2.動畫與緩動（setTimeout和setInterval）

時間 2020-07-21

標籤動畫緩動 settimeout setinterval 简体版

原文原文鏈接

setTimeout（一次）css

setInterval（定時一次）html

HTML:spa

<!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:code

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

JS:htm

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動一次

相關標籤/搜索