JavaScript学习系列（二）--定时器

本节内容

1.定时器的使用
2.数码时钟
3.延时提示框
4.无缝滚动

一、定时器的使用

两种定时器

-setInterval   间隔型
-setTimeout    延时型

两者区别：前者是无限次的执行 后者只执行一次

setInterval(参数1，参数2)第一个参数需要穿进去一个函数，第二个函数设置时间
代码示例--用两个按钮来控制定时器的使用

如果需要停止定时器则对应的方法是

停止定时器
- clearInterval
- clearTimeout  

二、数码时钟

下边用Date对象和定时器做一个数码时钟，效果如下：

示例.png

整体的思路：

1.获取系统时间
- Date对象
- getHours()、getMinutes()、getSeconds()
- 年 getFullYear()   月 getMonth()  日 getDate()  星期 getDay()

2.显示系统时间
- 字符串连接
- 空位补零

3.通过更改图片的src来达到动态更换图片的目的

核心代码如下：

![](img/0.jpeg)
![](img/1.jpeg)
:
![](img/4.jpeg)
![](img/5.jpeg)
:
![](img/2.jpeg)
![](img/5.jpeg)

注意1：这里为了兼容性问题在IE7中str[i]是无法执行的因此考虑使用str.charAt[i]来代替str[i]这两者本身都是一个含义。

注意2：在日期对象中获取月份的时候，由于月份也是从0开始算，因此得到的月份会比实际的少一，因此在获取月份的时候需要特殊注意

三、延时提示框

需求：div1和div2，鼠标移入某个div上，div2不隐藏，移出div1和div2后，div2隐藏

四、无缝滚动

1.offsetLeft的作用
2.用定时器让物体连续移动
3.效果原理-让ul一直向左移动,复制li
4.innerHTML和+= 修改ul的width
5.滚动过界后,重设位置,判断过界

核心代码如下

向左走
向右走

    

        
![](img2/1.png)
        
![](img2/2.png)
        
![](img2/3.png)
        
![](img2/4.png)