本節(jié)內(nèi)容
1.定時(shí)器的使用
2.數(shù)碼時(shí)鐘
3.延時(shí)提示框
4.無縫滾動(dòng)
一、定時(shí)器的使用
兩種定時(shí)器
-setInterval 間隔型
-setTimeout 延時(shí)型
兩者區(qū)別：前者是無限次的執(zhí)行 后者只執(zhí)行一次
setInterval(參數(shù)1，參數(shù)2)第一個(gè)參數(shù)需要穿進(jìn)去一個(gè)函數(shù)，第二個(gè)函數(shù)設(shè)置時(shí)間
代碼示例--用兩個(gè)按鈕來控制定時(shí)器的使用
<script>
window.onload = function () {
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var timer = null;
oBtn1.onclick = function () {
// 用timer變量存儲(chǔ)這個(gè)定時(shí)器 就可以在關(guān)閉的方法中進(jìn)行使用了
timer = setInterval(function () {
alert('a');
},1000)
}
oBtn2.onclick = function () {
clearInterval(timer)
}
}
</script>
<body>
<input id="btn1" type="button" value="開啟">
<input id="btn2" type="button" value="關(guān)閉">
</body>
如果需要停止定時(shí)器則對(duì)應(yīng)的方法是
停止定時(shí)器
- clearInterval
- clearTimeout
二、數(shù)碼時(shí)鐘
下邊用Date對(duì)象和定時(shí)器做一個(gè)數(shù)碼時(shí)鐘，效果如下：
示例.png
整體的思路：
1.獲取系統(tǒng)時(shí)間
- Date對(duì)象
- getHours()、getMinutes()、getSeconds()
- 年 getFullYear() 月 getMonth() 日 getDate() 星期 getDay()
2.顯示系統(tǒng)時(shí)間
- 字符串連接
- 空位補(bǔ)零
3.通過更改圖片的src來達(dá)到動(dòng)態(tài)更換圖片的目的
核心代碼如下：
<script>
// 寫一個(gè)將數(shù)字不成兩位的方法 空位補(bǔ)零
function toDouble(n) {
if(n<10) {
return '0' + n;
} else {
return '' + n;
// 使用一個(gè)空字符串的目的是讓返回結(jié)果保證是一個(gè)字符串
// 也同時(shí)保證了即使是一個(gè)兩位數(shù)也不會(huì)出現(xiàn)相加的情況
}
}
window.onload = function () {
// 先獲取元素
var aImg = document.getElementsByTagName('img');
// var str = '132321'; 用這種6位數(shù)的字符串一一對(duì)應(yīng)
function tick() {
// Date()對(duì)象 獲取時(shí)間 首先創(chuàng)建一個(gè)對(duì)象
var oDate = new Date();
// 拼出一個(gè)向上邊的那種字符串
var str = toDouble(oDate.getHours()) + toDouble(oDate.getMinutes()) + toDouble(oDate.getSeconds());
for(var i=0; i < aImg.length; i++) {
aImg[i].src = 'img/'+str[i]+'.jpeg';
}
}
// 最后用一個(gè)定時(shí)器來讓這個(gè)匯總表動(dòng)起來
setInterval(tick,1000)
// 這時(shí)候會(huì)發(fā)現(xiàn)定時(shí)器會(huì)先出現(xiàn)初始的狀態(tài) 然后才會(huì)開始正常計(jì)時(shí),給人一種跳表的感覺,這是因?yàn)槎〞r(shí)器函數(shù)是在1秒之后才開始執(zhí)行
// 下邊就來解決這種問題 將函數(shù)命名為tick 在onload函數(shù)中執(zhí)行一次就行了
tick();
}
</script>
<body>
<label>:</label>
<label>:</label>
</body>
注意1：這里為了兼容性問題在IE7中str[i]是無法執(zhí)行的因此考慮使用str.charAt[i]來代替str[i]這兩者本身都是一個(gè)含義。
注意2：在日期對(duì)象中獲取月份的時(shí)候，由于月份也是從0開始算，因此得到的月份會(huì)比實(shí)際的少一，因此在獲取月份的時(shí)候需要特殊注意
<script>
var aDate = new Date();
alert(aDate.getMonth()+1);
</script>
三、延時(shí)提示框
需求：div1和div2，鼠標(biāo)移入某個(gè)div上，div2不隱藏，移出div1和div2后，div2隱藏
<script>
window.onload = function () {
// 當(dāng)鼠標(biāo)移入的時(shí)候 顯示div2 移出時(shí)延時(shí)消失
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer = null;
/*
oDiv1.onmouseover = function () {
clearTimeout(timer);
oDiv2.style.display = 'block';
};
oDiv1.onmouseout = function () {
// 延時(shí)消失
timer = setTimeout(function () {
oDiv2.style.display = 'none';
},500)
};
// 我們希望鼠標(biāo)停在div2上的時(shí)候 div2能保持出現(xiàn) 那么就需要在div2上清除定時(shí)器
oDiv2.onmouseover = function () {
clearTimeout(timer);
};
// 下邊我們?nèi)允窍Ｍ?dāng)鼠標(biāo)從div2移除的時(shí)候消失 這時(shí)候還需要添加下邊的方法
oDiv2.onmouseout = function () {
// 這時(shí)候我們?nèi)园l(fā)現(xiàn)一個(gè)問題 當(dāng)鼠標(biāo)快速移出div2的時(shí)候會(huì)閃一下 因?yàn)榘凑障逻叺拇a的話,鼠標(biāo)一離開div2,div2立即消失
// 要解決這個(gè)小問題 我們也給div2加一個(gè)定時(shí)器
timer = setTimeout(function () {
oDiv2.style.display = 'none';
},500);
// 這時(shí)移到div1上后 div2還是會(huì)消失 原因還是這個(gè)定時(shí)器,因此在移入div1的時(shí)候先進(jìn)行移除定時(shí)器操作
}
*/
// 最后通過比對(duì)上邊的代碼 進(jìn)行重復(fù)代碼合并和簡(jiǎn)化
oDiv1.onmouseover = oDiv2.onmousemove = function () {
clearTimeout(timer);
oDiv2.style.display = 'block';
};
oDiv1.onmouseout = oDiv2.onmouseout = function () {
timer = setTimeout(function () {
oDiv2.style.display = 'none';
},500)
};
}
</script>
四、無縫滾動(dòng)
1.offsetLeft的作用
2.用定時(shí)器讓物體連續(xù)移動(dòng)
3.效果原理-讓ul一直向左移動(dòng),復(fù)制li
4.innerHTML和+= 修改ul的width
5.滾動(dòng)過界后,重設(shè)位置,判斷過界
核心代碼如下
<style>
* {margin: 0; padding: 0;}
#div1{width: 1420px; height:215px; margin:100px auto;position: relative;background: red;overflow: hidden;}
#div1 ul{position: absolute;left: 0;top: 0;}
#div1 ul li { float: left; width: 355px;height: 215px;list-style: none;}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var speed = -2;
oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
function move() {
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left = '0';
}
if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2+'px';
}
oUl.style.left = oUl.offsetLeft+speed+'px';
}
var timer = setInterval(move,30);
// 鼠標(biāo)移入定時(shí)器停止
oDiv.onmouseover = function () {
clearInterval(timer);
};
oDiv.onmouseout = function () {
timer = setInterval(move,30);
};
document.getElementsByTagName('a')[0].onclick = function () {
speed = -2;
};
document.getElementsByTagName('a')[1].onclick = function () {
speed = 2;
}
}
</script>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
