JS-定时器-间歇函数(一)

• 定时器函数介绍

定时器函数在开发中的使用场景

• 网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
• 例如：网页中的倒计时
• 要实现这种需求，需要定时器函数
• 定时器函数有两种，今天我先讲间歇函数

• 定时器函数基本使用

定时器函数可以开启和关闭定时器

• 开启定时器

作用：每隔一段时间调用这个函数 ，间隔时间单位是毫秒 

 

• 关闭定时器 

 

案例：

案例1：阅读注册协议

需求：按钮60秒之后才可以使用
分析：
①：开始先把按钮禁用（disabled 属性）
②：一定要获取元素
③：函数内处理逻辑

• 秒数开始减减
• 按钮里面的文字跟着一起变化
• 如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点

    
    
    



            用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    
    

    我已经阅读用户协议(60)

    

案例2：轮播图定时变换图片

需求：每隔一秒钟切换一个图片
分析：
①：准备一个数组对象，里面包含详细信息（素材包含）
②：获取元素
③：设置定时器函数
设置一个变量++
找到变量对应的对象
更改图片、文字信息
激活小圆点：移除上一个高亮的类名，当前变量对应的小圆点添加类
④：处理图片自动复原从头播放（放到变量++后面，紧挨）
如果图片播放到最后一张， 就是大于等于数组的长度
则把变量重置为0

  
  
  
  
  



  

    

      
    
    

      
对人类来说会不会太超前了？
      

        

        

        

        

        

        

        

        

      
      

        <
        >
      
    
  
  

案例3： 电子时钟

要求：在网页上显示一个时钟，秒针，分针。时针可以旋转