前端个人学习笔记（四）

本次的学习内容有：慕课网CSS3扁平化博客之文章页及常用组件;  DOM事件探秘; JS动画效果; JS倒计时效果；

1、写代码小技巧：

item1
 
item2
 
item3
 
item4
 
item5

像上面这个重复的 li，可以简写为 (li>a{item$})*5 ,然后回车，就得到如上代码。

2、addEventListener() 

方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

语法

element.addEventListener(event, function, useCapture)

参数值

参数	描述
event	必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。  提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。  当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

跨浏览器解决方法:

var x = document.getElementById("myBtn"); if (x.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本 x.addEventListener("click", myFunction); } else if (x.attachEvent) { // IE 8 及更早版本 x.attachEvent("onclick", myFunction); }

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

3、事件的触发顺序自内向外，这就是事件冒泡；事件捕获顺序变更为自外向内。

参考：彻底弄懂JS的事件冒泡和事件捕获;浅谈js的事件冒泡和事件捕获。

4、DOM中的事件对象

（1）type，获取事件类型

（2）target,获取事件目标

（3）stopPropagation(),用于阻止事件冒泡

（4）preventDefault()，阻止事件的默认行为

5、IE中的事件对象

（1）type属性，获取事件类型

（2）srcElement属性，获取事件目标

（3）cancelBubble属性、阻止事件冒泡  （设置为true表示阻止冒泡，false表示不阻止）

（4）returnValue属性，阻止事件的默认行为（设置为false表示阻止事件的默认行为）

6、Math.floor(x)方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。

    Math.ceil(x)方法执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数。

   例缓冲运动判断：speed = speed >0?Math.ceil(speed):Math.floor(speed);

7、JS实现显示当前时间效果（秒数动态增加）

代码：

 
 
显示时间的位置
 
  

8、getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。

9、JS显示倒计时效果

代码：

 
 
距离放暑假还有天
 
  

10、JS显示限时抢倒计时效果

代码：

 
 
 还剩 
 
  

11、setTimeout(表达式，延迟时间)；在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。

       setInterval(表达式，交互时间)；在执行时，它从载入后，每隔指定时间就执行一次表达式。

12、scrollTop属性设置或返回元素的垂直滑动条距离上边的位置。

       scrollLeft属性设置或返回元素的水平滑动条的位置。