字体缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 300px;
border: red 2px solid;
padding: 5px;
}
.red{
color:red;
background: yellow;
}
.yellow{
color:yellow;
background: red;
}
</style>
</head>
<body>
<p><button id="big" type="button">+</button>
<button id="small" type="button">-</button>
<p><button id="red" type="button">红</button>
<button id="yellow" type="button">黄</button>
</p>
<div id="box">
阿斯达删掉手机后那是你打算；
你删掉实打实回到阿斯兰回答是
的我是打手打手打手打手od撒旦敬
爱哦的骄傲好屌； 那失败
</div>
<script type="text/javascript">
var obig = document.getElementById('big');
var osmall = document.getElementById('small');
var obox= document.getElementById('box');
var oRed= document.getElementById('red');
var oYellow= document.getElementById('yellow');
var fsize=16;
obig.onclick = b;
function b(){
fsize =fsize+2;
obox.style.fontSize=fsize+'px';
}
osmall.onclick=function(){
if(fsize<=12){
return;
}else{
fsize =fsize-2;
obox.style.fontSize=fsize+'px';
}
}
oRed.onclick=function(){
obox.className='red';
}
oYellow.onclick=function(){
obox.className='yellow';
}
</script>
</body>
</html>
模拟聊天
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#phone {
position: relative;
text-align: center;
background: url(img/练习2/mobile.png) no-repeat;
height: 590px;
width: 300px;
}
#box {
width: 215px;
height: 350px;
padding: 10px;
background: #f3f3f3;
border: 2px solid black;
overflow: auto;
margin-bottom: 5px;
position: absolute;
left: 25px;
top: 85px;
text-align: left;
}
#bottom{
width: 100%;
height: 40px;
padding-top: 5px;
}
#name{
position: absolute;
cursor: pointer;
left: 30px;
bottom: 90px;
}
#name #img {
width: 30px;
height: 30px;
border: 1px solid #000000;
vertical-align:middle;
}
#btn {
height: 35px;
border-radius: 5px;
padding: 5px;
position: absolute;
right: 40px;
bottom: 90px;
}
#content {
position: absolute;
width: 140px;
height: 30px;
left: 70px;
bottom: 91px;
}
</style>
</head>
<body>
<div id="phone">
<div id="box"></div>
<p id="bottom" >
<span id="name"><img id="img" class="img" src="img/练习2/expression2.png"></span>
<input stype="text" id="content" />
<button type="button" id="btn">发送</button>
</p>
</div>
<script type="text/javascript">
var oBox = document.getElementById('box');
var oName = document.getElementById('name');
var oContent = document.getElementById('content');
var oBtn = document.getElementById('btn');
var aImg = ['img/练习2/expression1.png', 'img/练习2/expression2.png']
var off = true;
oBtn.onclick = function() {
if (off) {
if (oContent.value != null && oContent.value != '') {
oBox.innerHTML += '<p style= "margin:5px auto;">' + oName.innerHTML +'  ' +
'<span style="border:1px solid black; background:#36ff07; padding:3px 5px;border-radius:5px;display:inline-block;">' +
oContent.value + '</span>'+'<p>';
oContent.value = '';
} else {
alert('请输入内容');
}
} else {
if (oContent.value != null && oContent.value != '') {
oBox.innerHTML += '<p style="text-align:right;">' +
'<span style="border:1px solid black; background:#36ff07; padding:3px 5px;border-radius:5px ;display:inline-block;">' +
oContent.value +'</span>'+'  '+ oName.innerHTML + '<p>';
oContent.value = '';
} else {
alert('请输入内容');
}
}
}
oName.innerHTML = '<img style="width: 30px;height: 30px;border: 1px solid #000000;"src='+aImg[1 ]+'>'
oName.onclick = function() {
if (off) {
oName.innerHTML = '<img style="width: 30px;height: 30px;border: 1px solid #000000;"src=' + aImg[0] + '>';
} else {
oName.innerHTML = '<img style="width: 30px;height: 30px;border: 1px solid #000000;"src=' + aImg[1] + '>';
}
off = !off;
}
</script>
</body>
</html>
图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width: 500px;
height: 300px;
}
p{
margin: 0;
}
a{
text-decoration: none;
}
#box{
width: 500px;
height: 300px;
border: 10px #636363 solid;
margin: 0 auto;
position: relative;
background: url(img/练习3/loader_ico.gif) no-repeat center;
;
}
.bg{
width: 100%;
height: 20px;
position: absolute;
background: black;
opacity: 0.4;
}
.top{
top: 0;
}
.bottom{
bottom: 0;
}
.text{
line-height: 20px;
color: white;
width: 100%;
text-align: center;
position: absolute;
}
.btn{
width: 50px;
height: 50px;
background: #DFDFDF;
line-height:50px;
position: absolute;
text-align: center;
color: black;
font-weight: bold;
opacity: 0.4;
border: #696969 2px solid;
/* 圆角 */
border-radius: 50%;
top: 120px;
/* 过渡 */
transition: 0.3;
}
.left{
left: 10px;
}
.right{
right: 10px;
}
.btn:hover{
opacity: 0.8;
/* 缩放样式 */
transform: scale(1.1);
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var oNum=document.getElementById('num');
var oImg=document.getElementById('img');
var oText=document.getElementById('text');
var oPrv=document.getElementById('prv');
var oNext=document.getElementById('next');
var arrimg=['img/练习3/1.jpg','img/练习3/2.jpg','img/练习3/3.jpg','img/练习3/4.jpg']
var arrText=['美女','运动员','蝴蝶','古装'];
var num=0;
function tab(){
oImg.src=arrimg[num];
oText.innerHTML=arrText[num];
oNum.innerHTML=num+1+'/'+arrimg.length;
}
tab();
oNext.onclick=function(){
num++;
if(num>=arrimg.length){
num=0;
}
tab();
}
oPrv.onclick=function(){
num--;
if(num<0){
num=arrimg.length-1;
}
tab();
}
}
</script>
<div id="box">
<img id="img" src="" >
<p class="bg top" ></p>
<p class=" bg bottom"></p>
<p id="num" class="text top">图片数量正在计算</p>
<p id="text" class="text bottom">图片描述正在加载..</p>
<a id="prv" class="btn left" href="javascript:;"><</a>
<a id="next" class="btn right" href="javascript:;">></a>
</div>
</body>
</html>
动态生成10个div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</div>
<script type="text/javascript">
var color = ['red','yellow','blue'];
for(var i=0;i<10;i++){
document.body.innerHTML+= '<div style="width:50px; height:50px;background:'+color[i%color.length]+'"></div>';
}
</script>
</body>
</html>
