JS.006:WEB API总结（03动画函数）

小脑斧 · 发表于 2020-7-21 00:50:12

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由小脑斧于 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>

复制代码

账号		自动登录	找回密码
密码			立即注册

[学习笔记] JS.006:WEB API总结（03动画函数）

马上注册，结交更多好友，享用更多功能^_^