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

 

你可能感兴趣的:(2.动画与缓动(setTimeout和setInterval))