Web APIS——第一天（下）

一、随机轮播图案例

  
  
  
  
  



  

    

      
    
    

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

        

        

        

        

        

        

        

        

      
      

        <
        >
      
    
  
  

二、定时器-间歇函数

2.1 定时器函数介绍

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发

例如下这种倒计时类型的效果：

2.2 定时器函数基本使用

2.2.1 开启定时器

setInterval(函数，间隔时间)

作用：

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

注意：

1. 函数名字不需要加括号
2. 定时器返回的是一个id数字 
3. 每个定时器都是独一无二的，有自己的编号

2.2.2 关闭定时器

let 变量名 = setInterval(函数,间隔时间)

clearInterval(变量名)

注意：

1. 函数名字不要加括号
2. 定时器返回的是一个id数字
3. 一般不会刚创建就停止，而是满足一定条件在停止

2.2.3 练习

阅读注册协议

需求：按钮60秒之后才可以使用

分析：

1. 开始先把按钮禁用（disabled属性）
2. 一定要获取元素
3. 函数内处理逻辑
   1. 秒数开始减减
   2. 按钮里面的文字跟着一起变化
   3. 如果秒数等于0停止定时器 里面文字变为同意 最后 按钮可以点击

    
    
    



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

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

三、综合案例

轮播图定时器版

需求：每隔一秒钟切换一个图片

分析：

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

  
  
  
  
  



  

    

      
    
    

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

        

        

        

        

        

        

        

        

      
      

        <
        >