目标：能够使用定时器函数重复执行代码
1.开启定时器
语法：
setInterval(函数,间隔时间)
举例说明：
<script>
//第一种写法
setInterval(function(){
console.log('月薪过万~ ')
},1000)
</script>
//第二种写法
function repeat() { console.log(`前端程序员,就是头发多咋的~~~`) } //每隔一秒调用repeat函数,函数名字不需要加括号，定时器返回的是一个id数字 setInterval(repeat,1000)
2.关闭定时器
setInterval返回的是一个数值，用变量名将数值存起来，然后再来清除
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)
案例
倒计时效果
需求：按钮60秒之后才可以使用
案例
分析：
①：开始先把按钮禁用（disabled 属性）
②：一定要获取元素
③：函数内处理逻辑
秒数开始减减
按钮里面的文字跟着一起变化
如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(60)</button>
<script>
//1.获取元素
let btn = document.querySelector('button')
//2.计算逻辑
//2.1我们需要一个变量，用来计数
let i = 6
//2.2开启定时器，间歇函数,timer是定时器的序号id
let timer = setInterval(function(){
i--
btn.innerHTML = `我已阅读用户协议(${i}) `
if( i=== 0) {
//不走了，清除定时器
clearInterval(timer)
//开启按钮
btn.disabled = false
//更换文字
btn.innerHTML = '我同意该协议啦'
}
},1000)
</script>
</body>
综合案例
网页轮播图效果
需求：每隔一秒钟切换一个图片
案例
分析：
①：获取元素（图片和文字）
②：设置定时器函数
设置一个变量++
更改图片张数
更改文字信息
③：处理图片自动复原从头播放
如果图片播放到最后一张就是第9张
则把变量重置为0
注意逻辑代码写到图片和文字变化的前面
<style> .img-box { width: 700px; height: 320px; margin: 50px auto 0; background: #000; position: relative; } .img-box .tip { width: 700px; height: 53px; line-height: 53px; position: absolute; bottom: 0px; background-color: rgba(0, 0, 0, 0.8); z-index: 10; } .img-box .tip h3 { width: 82%; margin: 0; margin-right: 20px; padding-left: 20px; color: #98E404; font-size: 28px; float: left; font-weight: 500; font-family: "Microsoft Yahei", Tahoma, Geneva; } .img-box .tip a { width: 30px; height: 29px; display: block; float: left; margin-top: 12px; margin-right: 3px; } .img-box ul { position: absolute; bottom: 0; right: 30px; list-style: none; z-index: 99; } </style> </head> <body> <div class="img-box"> <img class="pic" src="images/b01.jpg" alt="第1张图的描述信息"> <div class="tip"> <h3 class="text">挑战云歌单，欢迎你来</h3> </div> </div> <script> // 数据（数组对象，是从后台取过来的，正式开发项目时使用的） let data = [ { imgSrc: 'images/b01.jpg', title: '挑战云歌单，欢迎你来' }, { imgSrc: 'images/b02.jpg', title: '田园日记，上演上京记' }, { imgSrc: 'images/b03.jpg', title: '甜蜜攻势再次回归' }, { imgSrc: 'images/b04.jpg', title: '我为歌狂，生为歌王' }, { imgSrc: 'images/b05.jpg', title: '年度校园主题活动' }, { imgSrc: 'images/b06.jpg', title: 'pink老师新歌发布,5月10号正式推出' }, { imgSrc: 'images/b07.jpg', title: '动力火车来到西安' }, { imgSrc: 'images/b08.jpg', title: '钢铁侠3,英雄镇东风' }, { imgSrc: 'images/b09.jpg', title: '我用整颗心来等你' }, ] //1.获取元素 let pic = document.querySelector('.pic') let text = document.querySelector('.text') //i.记录图片的张数 let i = 0 //2.开启定时器 setInterval(function(){ i++ //修改图片的src属性 pic.src = data[i].imgSrc //修改文字内容 更改元素的内容 text.innerHTML = data[i].title //无缝衔接 if(i === data.length -1) { i = -1 } },1000) </script> </body>
