JS.006:WEB API总结（03动画函数）
本帖最后由 小脑斧 于 2020-7-22 10:20 编辑定时器使用之
协议按钮禁用
<body>
<textarea name="texta" id="" cols="30" rows="10">
这个世界，，，，，，，，，，，，，，，，
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
<script src="jquery-3.2.1/jquery-3.2.1.js"></script>
<script>
function myId(id) {
return document.getElementById(id);
}
var time=5;
var timeId= setInterval(function () {
time--;
myId("btn").value="请仔细阅读协议("+time+")";
if(time<=0){
//停止定时器就可以
clearInterval(timeId);
//按钮可以被点击了
myId("btn").disabled=false;
myId("btn").value="同意";
}
},1000);
</script>
</body>
案例div变化
<body>
<div id="dv"></div>
<input type="button" value="渐变" id="btn"/>
<script src="jquery-3.2.1/jquery-3.2.1.js"></script>
<script>
//颜色透明度变化
myId("btn").onclick=function () {
var opacity=10;
//按钮的点击事件
var timeId=setInterval(function () {
//透明化了
opacity--;
if(opacity<=0){
clearInterval(timeId);//清理定时器
}
//设置div的透明度
myId("dv").style.opacity=opacity/10;
},200);
};
</script>
</body>
div宽度变化
<body>
<input type="button" value="变宽" id="btn"/>
<div id="dv"></div>
<script src="记得修改.js"></script>
<script>
myId("btn").onclick = function () {
var width = 200;
var timeId = setInterval(function () {
width+=10;
if(width==800){
clearInterval(timeId);
}
myId("dv").style.width=width+"px";
}, 20);
};
</script>
</body>
案例div移动封装函数（重点）
<body>
<input type="button" id="btn1" value="移到400px">
<input type="button" id="btn2" value="移到800px">
<div id="dv" ></div>
<script src="jquery-3.2.1/jquery-3.2.1.js"></script>
<script>
//div要移动,要脱离文档流---position:absolute
//如果样式的代码是在style的标签中设置,外面是获取不到
//如果样式的代码是在style的属性设置,外面是可以获取
//获取div的当前位置
//console.log(myId("dv").offsetLeft);
//800->400当前与目标比大小
function myId(id) {
return document.getElementById(id);
}</p><p>
//封装函数
// function animate(element,target) {
// var timeid = setInterval(function () {
// var current= element.offsetLeft;//number
// var step =10;
//
// if (current<target){
// if ((target-current)>step){
// current += step;
// element.style.left = current+"px";
// }else {
// element.style.left = target +"px";
// }
//
// }else if (current>target){
// if ((current-target)>step){
// current -= step;
// element.style.left = current+"px";
// }else {
// element.style.left = target +"px";
// }
// }else {
// clearInterval(timeid);
// }
// },20);
// }
// 封装函数精简版
function animate(element,target){
//优化代码减少无用定时器
clearInterval(element.timeid);
element.timeid = setInterval(function () {
//var timeid = setInterval(function () {
var current = element.offsetLeft;
var step = 10;
step = current>target?-step:step;
current += step;
if (Math.abs(current-target)>Math.abs(step)){//绝对值
element.style.left = current+"px";
}else {
clearInterval(element.timeid);//可一起写
element.style.left = target +"px";
}
},20);
}
myId("btn1").onclick = function () {
animate(myId("dv"),400);
};
myId("btn2").onclick = function () {
animate(myId("dv"),800);
};
</script>
</body>
页:
[1]