定时器的使用

图1

我们先来体验一下定时器

设置定时器

图2

我们定义个函数show弹窗，然后使用setInterval(show,1000);

这里setInterval第一个参数为执行函数，第二个为执行间隔，单位毫秒，因此我们上图就实现了每1s弹窗一次，函数返回定时器对象

定时器还有一个函数setTimeout，参数和上面一样，但是只执行一次，而且是到时间执行

图3

停止定时器

clearInterval()停止定时器，里面传入定时器参数，例子如下图

图4

我们定义2个函数，一个开启一个关闭，点击开启。就设置定时器启动，点击关闭就设置关闭，为了能把定时器传给关闭的函数clearInterval，我们把timer初始化在外层，然后设置定时器时利用返回值赋值，关闭时就可以实现关闭

当然clearTimeout是停止那个延时定时器

案例，数码时钟

图5

想做一个数码时钟显示为xx:xx:xx时分秒6位数字显示(视频里数字用的是专门的图片)，而且根据实际时间允许，这里我们需要了解时间对象

var date=new Date();我们就创建了时间对象，我们可以使用getHours获得小时数，getMinutes获得分钟数，getSeconds获得秒数，

图6

因为我找图片实在是太麻烦，就用文字设置了，这里要注意，由于setInterval，第一下不是马上执行，会导致::时间开始1s不显示，为了出现效果，我们需要单独运行下show（），最终完成效果

这里因为返回的时分秒为数字需要转换成字符串，就用了字符串拼接的方法实现

关于字符串访问字符

有2种写法[下标]和.charAt(下标)，前者低版本ie不兼容

图7

上图代码，都能弹出数字3，但是是高版本浏览器

图8

我们之前看了日期有时分秒属性获得，其实还有获得年月日，星期几的方法

图9

这里需要注意的是getDay()返回值0-6,0代表周日，歪果仁从周日开始一周

下面说一个延时的应用，比如我们鼠标移到qq头像，会显示一个信息框，我们移出，过一段可消失，我们可以点击这个信息框，

图10

我们设置2个div框，可以设置onmouseover d2就显示，然后移出的时候d2延时1s消失，即可，如上

如果我们想鼠标到d2不消失呢，还有我们是不是可以合并一些重复的东西，里面涉及到一些js的面向对象的思路

图11

我们d1,d2的移入都是让d2显示，但是d2已经显示了，我们还显示有用么，其实这里还有清除定时器timer的作用，因我们不想1s就关闭，当然移出的时候我们都要考虑调用定时器延时设置d2的属性

例子：无缝滚动

我们经常看到有些网站一些图片拼成一行或一列，像走马灯一样滚动，这就是我们要做的例子

图12

为了实现这个例子，我们先做个div矩形，设置position属性为absolute,即绝对位置，我们同时设置top,left值，就可以设置其在网页中的位置，我们还可以用点击响应其属性offsetLeft，来获得左侧距离，可以看到就是我们设置的200

图13

我们给其加上50的margin页边距，就可以看到提示的是250，即靠左侧的绝对偏移，所以我们使用offsetLeft比较准确，当然我们也有offsetTop，offsetHeight,offsetWidth属性

图14

所以我们设置如上，让定时器修改其属性，就可以实现修改其偏移，实现移动，当使用margin的时候会发现，移动有问题，因为offsetLeft含了额外的偏移，导致不匀速，还有这里我尝试获得style.left和style.margin属性都是string，但是其长度都是0，即意味着是空字符串，所以我曾经想使用切片来设置没有成功

现在我们跟据上面的实现来设置我们的无缝滚动，代码如下