每天一句:如果,感到此时的自己很辛苦,那告诉自己:容易走的都是下坡路!坚持住,因为你正在走上坡路,走过去,你就一定会有进步。
一、window.onload使用
网页中的JS脚本代码往往需要在文档加载完成后才能够执行,否则可能导致无法获取对象的情况,为了避免这种情况发生,可以使用以下两种方式:
- 将脚本代码放在网页的底部,即可保证运行脚本代码时,要操作的对象已经加载完成(该方式比较凌乱,但推荐使用);
- 通过window.onload来执行脚本代码;(window.onload是一个事件,当文档加载完成之后就会触发该事件,即可以将要执行的脚本代码放在事件处理函数中);
注: window.onload只会执行一次;
二、获取元素样式
- getComputeStyle() 非IE浏览器
参数1: 需要获取样式的元素对象;
参数2: 伪元素,例如 :hover, :first-letter, :before等,如果不需要伪元素则该参数为null或忽略不写;
返回值: 对应元素的样式
// 获取按钮宽度
var style = getComputedStyle(oBt);
alert(style.width);
- currentStyle() IE浏览器
// 获取按钮宽度
alert( oBt.currentStyle.width );
- 兼容写法
// 为了兼容的写法
if(window.getComputedStyle){
width = getComputedStyle(oBt).width;
} else {
width = oBt.currentStyle.width;
}
备注: style属性只能获取内联样式,获取不到外部样式和内部样式;
案例: 函数封装 — $符号的操作 (有助于之后学习jQuery)
案例: 函数封装 — 获取元素对应的属性
三、定时器/时钟
- 定时器的开启
语法:
setInterval(函数, 毫秒);
说明:
参数1: 函数名即可(不要括号,如果有带括号是函数调用);;
参数2: 1000毫秒 = 1秒,另外最小是为10毫秒;
返回值: 定时器对象;
timer = setInterval(function(){
console.log('hello');
}, 2000);
- 定时器的关闭
// 并不表示时钟对象为null
clearInterval(定时器名);
备注:
setInterval()和clearInterval(),定时器是重复执行的;
setTimeout()和clearTimeout(),定时器只执行一次;
案例: 轮播图
案例: 汤姆猫
案例: 弹窗广告
四、Date类型
Date类型使用UTC(国际协调时间又称世界统一时间1970年1月1日午夜(零时)开始经过的毫秒来保存日期
- 获取本地时间
var nowTime = new Date();
- 获取当前时间距离1970年1月1日之间的毫秒数
var nowTime = new Date();
alert(nowTime.getTime);
- 获取年份(4位数)
var year = nowTime.getFullYear();
- 获取月份(0-11)
var month = nowTime.getMonth();
- 获取日期
var date = nowTime.getDate();
- 获取星期(0-6)
var day = nowTime.getDay();
- 获取时
var hour = nowTime.getHours();
- 获取分
var min = nowTime.getMinutes();
- 获取秒
var sec = nowTime.getSeconds();
- 设置时间
var timer = new Date();
timer.setDate(6); // 设置日期
timer.setHours(12);// 设置小时
timer.setMinutes(10);// 设置分钟
timer.setSeconds(50);// 设置秒
案例: 将当前日期格式化输出为'2017年01月06日 星期五 16:33:30',并时间会走动
案例: 倒计时效果