Javascript应用（旋转圆）

不修×蝙蝠

于 2024-09-11 16:53:56 发布

阅读量319

点赞数 1

本文链接：https://blog.csdn.net/m0_74977981/article/details/142144219

版权

定时器
1. setInterval(function,time) 周期函数-指定时间后，重复执行指定函数(其中time的单是毫秒，1000毫秒=1s)
2. setTimeout(function,time) 延时定时器-指定时间后，执行一次函数(其中time的单是毫秒，1000毫秒=1s)

    setInterval(function(){
        alert("重复")
        
     },2000)
    setTimeout(function(){
         alert("执行一次")
    },2000)

3.另一种表达方式

   var i=0
   // 另一种表达方式
     var hh=function(){
        if (i==10){
             clearInterval(time1)  //clearInterval() 停止一个定时器
         }
         console.log(i++)
     } //到10后停止定时器
    var time1= setInterval(hh,1000)

4.同时调用两种方式


    var time1= setInterval(hh,1000)
    var time2= setInterval(hh,3000)
    console.log(time1)  
    cosole.log(time2)

5.将setTimeout() 定时器无限进行

var i=0;
 var hh=function(){
     console.log(i++)
     time1=setTimeout(hh,1000)
     if (i==4){
         return
     }
     setTimeout(hh,1000)
 }
 var time1=setTimeout(hh,1000)  //将setTimeout() 定时器无限进行
// clearTimeout(time1)


var i=0;
 var hh=function(){
     console.log(i++)
     time1=setTimeout(hh,1000)
     console.log("停止的time值为:"+time1)
     if (i==4){
         console.log("停止的time值:"+time1)
         clearTimeout(time1)
     }
 }  
 var time1=setTimeout(hh,1000)

一个简易旋转例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
   
window.onload=function(){
    var c = document.querySelector(".content")
    var s = document.querySelector(".start")
    var e = document.querySelector(".end")

    var i=0
    var time
    var hh=function(){
        c.style.background=" linear-gradient("+(i++)+"deg,#fff,#000,#add)";
        c.style.boxShadow="0px 0px "+ (i+10) +"px #000";
    }
    s.onclick=function(){
        time=setInterval(hh,10)
        this.disabled=true
    }
    e.onclick=function(){
        clearInterval(time)
        s.disabled=false
    }
   
}



    </script>
    <style>
        .content{
            width:200px;
            height:200px;
            border-radius: 100px;
            background: linear-gradient(0deg,#fff,#000,#add);
            box-shadow:0px 0px 0px #000;
        }
        input{
            margin: 15px 25px;
        }

    </style>
</head>
<body>   <!-- 旋转圆圈 -->

    <div class="content"></div>
    <input type="button" value="开始" class="start" >
    <!-- disabled “禁用属性” -->
    <input type="button" value="结束" class="end">
    
</body>
</html>

由于加入禁用指令，所以点击前后如下：