前端-js例子：定时器

函数 

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

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

---

 

试用： 

var i=0var 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=0var 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=0var 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=0var 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}}