写个简单运动模板

Posted 嘉儿2017

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了写个简单运动模板相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单的运动</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background: #CC66CC;
            margin-bottom: 20px;
            position: relative;
        }
    </style>
</head>
<body>
     <!-- 
         两个div使用一个运动函数,一个向右移动350px,一个向右移动590px,每次移动3px
      -->
      <input type="button" value="开始运动">
      <div id="div1"></div>
      <div id="div2"></div>
      <script>
          window.onload = function(){
              var btn = document.querySelector("input");
              var div1 = document.querySelector("#div1");
              var div2 = document.querySelector("#div2");
              var timer;
              function move(obj,attr,target){
                  clearInterval(obj.timer);
                  obj.timer = setInterval(function(){
                      var val = parseInt(getComputedStyle(obj)[attr]);
                      val +=3;
                      if(val>=target){
                          clearInterval(obj.timer);
                          val = target;
                      }
                      obj.style[attr] = val+"px";
                  },16);
              }
              btn.onclick = function(){
                  move(div1,"left",350);
                  move(div2,"left",590);
              }
              
          }
      </script>
</body>
</html>

1.在使用定时器时,要根据情况先清除其他定时器，避免多次点击属性值变化加快。

2.修订最后运动停止的值，注意运动目标值与改变值（代码中target、val）之间的关系。

以上是关于写个简单运动模板的主要内容，如果未能解决你的问题，请参考以下文章

创建自己的代码片段（CodeSnippet）

KMP模板简单写个KMP~

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段(vue主模板)