摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>js控制div样式</title>
<style type="text/css">
body{margin: 0px;padding: 0px;}
.box{
width:200px;
height: 100px;
background:pink;
color:#999;
}
</style>
</head>
<body>
<h1>点击下面元素有惊喜</h1>
<div id="Ibox" class="box" onclick="MyOdiv(this)" >大家好！我是纸飞机的梦想多么渺小！期待与大家一起共同进步！</div>
<script>
//速度值 ,原始的div宽度值 需要改变的宽度值,计时器 ,div对象
var speed = 5 , width = 200 , MaxWidth = 500 , jishiqi , Odiv
var number = (MaxWidth - width)/speed;
var cishu = 1;
// div的点击函数
function MyOdiv(Odiv){
console.log(jishiqi)
if(!jishiqi){
jishiqi = setInterval(Anite,50)
}else{
return ;
}
}
//动画函数
function Anite(){
if(!Odiv){
Odiv = document.getElementById('Ibox')
}
if(number==0 ){
clearInterval(jishiqi)
//还原
setTimeout(chongZhi,2000)
return ;
}
Odiv.style.width = width + cishu*speed + "px"
number--;
cishu ++;
}
//重置函数
function chongZhi(){
if(!Odiv){
Odiv = document.getElementById('Ibox')
}
Odiv.style.width = width + "px"
number = (MaxWidth - width)/speed;
jishiqi = null;
cishu = 1;
}
</script>
</body>
</html>
批改老师：韦小宝批改时间：2018-11-10 09:29:16
老师总结：写的很不错哦！下次记得加点自己的总结进去哦！以保以后看到不会迷糊！加油吧！
