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  阅读(108)  评论(0编辑  收藏