大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......

• github：
• 微信公众号：
• 博客园：
• CSDN：

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、定时器

BOM 中有两中方式设置定时器。

1、方式一

特点：定时器可以重复使用。

// 参数有两个：// 第一个参数：定时器定时结束处理函数// 第二个参数：定时事件，单位毫秒。// 返回值：定时器id值var timeId = window.setInterval(function() {
        // ...}, 1000); // 定时1s// 清除定时器// 参数只有一个：定时器的 id 值。window.clearInterval(timeId);

1.1、案例：图片摇起来

点击”摇起来“按钮，图片每隔 100ms 动一次，点击停止按钮，图片停止移动。

遗留问题：

多次点击“摇起来”按钮的时候，图片动的越来越快，而且点击“停止”按钮没法停下来。

原因分析：

多次点击“摇起来”按钮的时候，timeId 的值会有多个，而停止的时候，只会清理最后一个值，其他的值对应的定时器没有清理。

解决方法：

在每次点击按钮的时候，先进行一次定时器的清理动作。clearInterval(timeId);

2、方式二

特点：定时器是一次性的。

setTimeout(); // 参数与返回值同 setInterval();

这个定时器只执行一次。虽然只执行一次，但是还是要清零，不然就一直占内存。

clearTimeOut(); // 参数为 setTimeout() 定时器的 id。

2.1、案例：协议禁用倒计时

倒计时后才可以点击同意按钮。

2.2、案例：移动元素

目标：有两个按钮，点击第一个按钮，div 缓慢移动到 400px 位置，点击第二个按钮缓慢移动到 800px 位置，再点击第一个按钮缓慢移动到 400px 位置......

1、既然要缓慢移动，就需要定时器。

2、当前位置的获取不能使用 element.style.left; 而需要使用 element.offsetLeft; 因为所有写在标签中的 style 属性值都拿不到，只有内联的 style 属性值可以使用 element.style.left 拿到。而 element.offsetLeft 则两种方式都可以拿到。

3、需要每次移动的步数 onestep，而且有回退的需要，所以 onestep 可能是负数。

4、每次移动后判断现在的位置到目标位置的距离，如果大于 onestep，那么就移动 当前 current 加减 onestep 的位置，否则就移动到目标位置，这样做的目的是避免 onestep 的不确定，导致最后的终点与目标还差少许的距离。

5、使用当前与目标距离的绝对值来决定是前进还是后退。

6、到达目标位置后，关闭定时器。

7、将动画过程封装成一个函数，参数为移动的目标和移动的距离。

8、注意：div 需要脱离文档流。

2.3、案例：轮播图

2.3.1、简单的轮播图

    
             
     
    
      
        
       
        
       
        
       
    
      
    
      
        
       1        
       2        
       3    
      
     

1、移动的时候移动的是 ul，而不是单独的 li 或者 img。

2、span 小标签在鼠标进入的时候，背景变成红色。（排他事件：需要两步，第一清理所有，第二当前元素设置属性）

3、为每个 span 绑定事件时，程序开始，for 循环就运行完了，得不到每个span 标签的编号，所以要自定义属性保存每个 span 标签的编号。

4、直接调用封装好的动画移动函数来移动 ul 标签。

2.3.2、左右焦点轮播图

    
             
     
    
      
        
       
        
       
        
       
    
      
    
      
        
       <        
       >    
      
     

2.3.3、完整轮播图

需求：鼠标进入数字按钮自动切换；鼠标点击左右切换按钮切换，并且数字按钮跟着切换；自动轮播。

代码：

    
             
         
     
    
      
        
       
        
       
        
       
    
      
    
      
        
       1        
       2        
       3    
      
    
      
        
       <        
       >    
      
     

1、首先获取所有需要的元素。

2、使用克隆第一个 li 标签来模拟从最后一个图片切换到第一个图片的过程。注意：这时候 ul 的宽度要改变，保证 li 的浮动在一行显示。

3、在右移最后一张过度到第二张的时候的处理方式为：当用户看到第一张的时候其实是最后一张，这个时候怎么过度到第二张？处理方法是，当在需要从最后一张跳转到第二张的时候，先让最后一张图切换到第一张，因为是克隆的，所以最后一张和第一张没有区别，用户看到的第一张其实是最后一张切换到了第一张，这个时候正常切换到第二张即可。

4、当需要点击左右切换按钮，需要数字按钮相对应的时候，注意第一个数字按钮和最后一个数字按钮的特殊处理。

5、图片下标 pos 是链接点击按钮和数字按钮的关键。

6、设置自动播放的时候，不使用定时器设置 pos 的方式，是因为当前 pos 的值不确定，使用自动点击右移按钮的方式。之所以设置两个 setInterval(moveRight, 1000); ，一个是进入页面自动播放，一个是鼠标退出 box 后的自动播放。