当前位置：首页 > article >正文

前端-js例子：定时器

article 2025/1/10 20:59:05

函数

setInterval(function,time)周期函数指定时间后，重复执行指定函数
clearInterval(定时器标志变量)

setTimeout(function,time) 延迟定时器指定时间后执行一次指定函数
clearTimeout(定时器标志变量)

试用：

var i=0
        var hh=function(){
            // console.log(i)
            
            if(i==10){
                clearInterval(timer)
            }
            console.log(i++)
        }
        var timer=setInterval(hh,1000)

 var hh=function(){
            console.log(i++)
            
        }

        var i=0
        var timer=setTimeout(hh,1000)

嵌套使用setTimeout()

var hh=function(){
            console.log(i++)
            timer=setTimeout(hh,1000)
            console.log("timer的值为:"+timer)

            if(i==10){
                console.log("停止的timer值为:"+timer)
                clearTimeout(timer)
            }
        }

        var i=0
        var timer=setTimeout(hh,1000)

实现转盘形式

1.设置转盘主体部分和开始结束两个按钮

<div class="container">
    </div>
    <input type="button" value="开始" class="start" >
    <input type="button" value="结束" class="end">

2.css样式设置（圆）

.container{
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background: linear-gradient(0deg,red, blue,yellow);
        }

3.js变换设置

用周期函数定时器，当点击开始（只能点一次）时，开始转动；点击结束，停止转动

window.onload=function(){
            var container=document.querySelector(".container")
            var start=document.querySelector(".start")
            console.log(container)
            var i=0
            var timer
            // 开始定时器
            start.onclick=function(){
                timer=setInterval(function(){
                    container.style.background="linear-gradient("+(i++)+"deg,red, blue,yellow)"
                },10)
                this.disabled=true
            }

            var end=document.querySelector(".end")
            end.onclick=function(){
                clearInterval(timer)
                start.disabled=false
            }

            
        }