定时器

JS的程序的执行速度时非常快的,如果希望一段程序,可以每间隔一段时间执行一次,可以使用定时调用

setInterval()

• 定时调用
• 可以将一个函数,每隔一段事件执行一次
• 参数:
  • 1.回调函数,该哈数会每隔一段事件被调用一次
  • 2.每次调用间隔的时间,单位是毫秒
• 返回值:
  • 返回一个Number类型的数据,这个数字用来作为定时器的唯一标识

clearInterval()

• 可以用来关闭一个定时器
• 方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器.
• clearInterval()可以接受任意参数
• 如果参数时一个有效的定时器的标识,则停止对应的定时器
• 如果参数不是一个有效的标识,则什么也不做

定时器练习

其中判断索引是否超过最大索引来设置从头播放

高级写法:

分析:

当index为0时 0%5=0

当index为1时 1%5=1

当index为2时 2%5=2

当index为3时 3%5=3

当index为4时 4%5=4

当index为5时 5%5=0

完成循环

问题

目前,我们每点击一次按钮,就会开启一个定时器,点击多次就会开启多个定时器,这就导致图片的切换速度过快,并且我们只能关闭最后一次开启的定时器

解决

在开启定时器之前,需要将上一个定时器关闭

放在点击开启按钮绑定单击函数的最前头 保证只有一个定时器在使用

测试发现

在点击开始的时候不会切到第一张重新开始播放

在连续点击开始的时候会一直停留在当前图片,因为一直在开启关闭定时器,未到换图片的时间,所以不会切换

延时调用

setTieout()

• 延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次
• 延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次
• 延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己的需要去选择

clearTimeout()

• 使用clearTimeout()来关闭一个延时调用

定时器的应用一

调用参数时,需要就调用,不需要不写函数时,如何写

callback && callcack();

解释: 进行判断 两个都为true才执行本条指令

也就是函数存在才调用函数

实现无缝轮播

在最后一张图片后插入第一张 并且判断索引是否是最后一张 如果是将偏移量切换到第一张,实现无缝轮播

类的操作

修改box样式

• 通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面,这样执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便.

• 希望一行代码可以同时修改多个样式

• 可以通过修改元素的clsaa属性来间接的修改样式

• 这样一来,我们只需要修改一次,即可同时修改多个样式

• 此时浏览器只需要重新渲染页面一次,性能比较好

• 并且这种方式,可以使表现和行为进一步的分离

修改box样式,在不去掉原属性上添加或更替新的属性

• 注意在新加属性的前面要留出空格,否则浏览器会将b1和b2属性名连在一起,不会识别

定义一个函数,用来向一个元素中添加指定的class属性值

• 参数:
  • obj 要添加的class属性的元素
  • cn 要添加的class值

判断一个元素中是否含有指定的class属性值

• 如果有该class，则返回true，没有则返回false

删除一个元素中的指定的class属性

切换一个类

• toggleClass可以用来切换一个类
• 如果元素中具有该类，则删除
• 如果元素中没有该类，则添加

二级菜单

• 当一个div有class="collapsed"属性时,就是叠起来的效果

• 这个属性在

• 把高度设置为25

• 我们的每一个菜单都是一个div

• 当div具有collapsed这个类时，div就是折叠的状态

• 当div没有这个类是，div就是展开的状态

获取所有的class为menuSpan的元素

• 这里使用querySelectorAll而不是getElementById是为了兼容IE8
• 括号里有点 .menuSpan 因为调用css文件里的 所以必须有点

• 内联样式优先级高于样式表中样式
• 紫色框高于红色框