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动画函数）

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