本次的学习内容有:慕课网CSS3扁平化博客之文章页及常用组件; DOM事件探秘; JS动画效果; JS倒计时效果;
1、写代码小技巧:
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
<li><a href="">item4</a></li>
<li><a href="">item5</a></li>
像上面这个重复的 li,可以简写为 (li>a{item$})*5 ,然后回车,就得到如上代码。
2、addEventListener()
方法用于向指定元素添加事件句柄。
提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
语法
参数值
参数 | 描述 |
---|---|
event | 必须。字符串,指定事件名。 注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册。 |
function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
useCapture | 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。 可能值:
|
跨浏览器解决方法:
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.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实现显示当前时间效果(秒数动态增加)
代码:
<body>
<div class="content1">
<div id="show">显示时间的位置</div>
</div>
<script>
window.onload=function(){
showTime();
}
//当分钟和秒钟小于10时检查,若小于10,则在前面添加一个0.
function checkTime(i) {
if(i<10){
i='0'+i;
}
return i;
}
function showTime() {
var myDate = new Date();
var year = myDate.getFullYear();//年
var month = myDate.getMonth()+1;//月份默认从0开始,需加1
var date = myDate.getDate();//日
var d = myDate.getDay();//默认星期几输出数字0-6
var h = myDate.getHours();
var m = myDate.getMinutes();
var s = myDate.getSeconds();
m = checkTime(m);
s = checkTime(s);
//星期几在转换的时候定义一个数组
var weekday = new Array(7)
weekday[0]='星期日'
weekday[1]='星期一'
weekday[2]='星期二'
weekday[3]='星期三'
weekday[4]='星期四'
weekday[5]='星期五'
weekday[6]='星期六'
document.getElementById("show").innerHTML = year + '年' + month + '月'
+ date + '日'+weekday[d]+h+':'+m+':'+s;
setTimeout(showTime,500);//500毫秒刷新一次,让时间显示倒计时效果
}
</script>
</body>
8、getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
9、JS显示倒计时效果
代码:
<body>
<div class="content2">
<div class="txtshow">距离放暑假还有<span id="timeShow"></span>天</div>
</div>
<script>
window.onload = function () {
//结束时间减当前时间就是倒计时天数
var curtime = new Date();
var endtime = new Date('2018,7,1');
//天数=(结束时间的毫秒数-当前时间的毫秒数)/一天总共的毫秒数
//Math.ceil向上取整
var lefttime = Math.ceil((endtime.getTime() - curtime.getTime())/(24*60*60*1000));
document.getElementById('timeShow').innerHTML=lefttime;
}
</script>
</body>
10、JS显示限时抢倒计时效果
代码:
<body>
<div class="content3">
<div class="time">
还剩<span id="LeftTime"></span>
</div>
</div>
<script>
window.onload=function(){
showTime();
}
function showTime(){
var curtime = new Date();
var endtime = new Date('2018/7/1,22:22:22');//结束时间
var lefttime = parseInt((endtime.getTime() - curtime.getTime())/1000); //得到结果为秒
var d = parseInt(lefttime/(24*60*60)); //得到天数
var h = parseInt(lefttime/(60*60)%24); //得到小时数
var m = parseInt(lefttime/60%60);//得到分钟数
var s = parseInt(lefttime%60);//得到秒数
document.getElementById('LeftTime').innerHTML=d+'天'+h+'时'+m+'分'+s+'秒';
if(lefttime<=0){
document.getElementById('LeftTime').innerHTML='限时抢结束';
}
setTimeout(showTime,500); //动态显示,500毫秒刷新一次
}
</script>
</body>
11、setTimeout(表达式,延迟时间);在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
setInterval(表达式,交互时间);在执行时,它从载入后,每隔指定时间就执行一次表达式。
12、scrollTop属性设置或返回元素的垂直滑动条距离上边的位置。
scrollLeft属性设置或返回元素的水平滑动条的位置。