2.动画与缓动（setTimeout和setInterval）

setTimeout（一次）

setInterval（定时一次）

 HTML:

<!DOCTYPE html>
<html>
    <head>
         <meta chartset="utf-8">
           <title></title>
           <link rel ="stylesheet" href= "./style.css">
           <script src="./man.js"></script>     
    </head>
    <body>
        <div id=div1></div>
    </body>
</html>

CSS:

#div1{
    width: 100px;
    height: 100px;
    background: pink;
 }

JS:

div1.style.position = 'relative'
div1.style.left = 0
let n = 0
let id =setInterver( ()=>{
    n = n+1（每次移动1的距离）
    div1.style.left = n + 'px'//（注意加上单位）
    if(n>=200){
        window.clearInterval(id)//移动了200px时，清除这个功能
    }
},40)//设置40ms动一次

 

posted @ 2020-07-20 13:21  ScottRhee  阅读(258)  评论(0)  编辑  收藏  举报