时间.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{width:50px;height:50px;background:red;position:absolute;}


    </style>
</head>
<body>
<div></div>
<script>
        let div=document.querySelector("div");
        let date=new Date().getTime();
        let bool=false;
        let num=40;

       div.addEventListener("click",clickHandler);


       function clickHandler(e){
           bool=!bool;
           if(bool){
               animation();
           } else if(!bool){
               cancelAnimationFrame(id)
           }
       }
    function animation(){
        id=requestAnimationFrame(animation);
       /*if(new Date().getTime()-date >1000){
           div.style.left=div.offsetLeft+2+"px";
           console.log("1");
           date=new Date().getTime();
       }*/
       num--;
       if(!num){
           div.style.left=div.offsetLeft+2+"px";
           console.log(num);
           num=1;
       }
    }
</script>
</body>
</html>