每天一句:如果,感到此時的自己很辛苦犯祠,那告訴自己:容易走的都是下坡路旭等!堅持住,因為你正在走上坡路衡载,走過去搔耕,你就一定會有進步。
一痰娱、window.onload使用
網頁中的JS腳本代碼往往需要在文檔加載完成后才能夠執(zhí)行弃榨,否則可能導致無法獲取對象的情況,為了避免這種情況發(fā)生梨睁,可以使用以下兩種方式:
- 將腳本代碼放在網頁的底部鲸睛,即可保證運行腳本代碼時,要操作的對象已經加載完成(該方式比較凌亂坡贺,但推薦使用);
- 通過window.onload來執(zhí)行腳本代碼;(window.onload是一個事件腊凶,當文檔加載完成之后就會觸發(fā)該事件,即可以將要執(zhí)行的腳本代碼放在事件處理函數中);
注: window.onload只會執(zhí)行一次;
二拴念、獲取元素樣式
- 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()万搔,定時器是重復執(zhí)行的;
setTimeout()和clearTimeout()胡桨,定時器只執(zhí)行一次;
案例: 輪播圖
案例: 湯姆貓
案例: 彈窗廣告
四、Date類型
Date類型使用UTC(國際協調時間又稱世界統(tǒng)一時間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'瞬雹,并時間會走動
案例: 倒計時效果