標籤：onclick cti doc /var font 停止 elements 滑鼠 img
一、定時器的作用
（1）開啟定時器
setInterval 間隔型
setTimeout 延時型
兩種定時器的區別
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定時器</title>
<script>
function show()
{
alert(‘a‘);
};
//setInterval(show,1000);//每隔1000毫秒執行一次show函數
setTimeout(show,1000);//延遲1000毫秒之後執行show函數
</script>
</head>
<body>
</body>
</html>
（2）停止定時器
clearInterval
clearTimeout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定時器的開啟與關閉</title>
<script>
window.onload = function ()
{
var oBtn1=document.getElementById(‘btn1‘);
var oBtn2=document.getElementById(‘btn2‘);
var timer=null;
oBtn1.onclick = function ()
{
timer=setInterval(function()
{
alert(‘a‘);
},1000);
};
oBtn2.onclick = function ()
{
clearInterval(timer);
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="開啟" />
<input id="btn2" type="button" value="關閉" />
</body>
</html>
二、數位時鐘
（1）效果思路
（2）擷取系統時間
Data對象
gerHours、GetMinutes、getSeconds
(3)顯示系統時間
字串串連
空位補零
（4）設定圖片路徑
charAt方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>數位時鐘（相容模式）</title>
<script>
//但是不相容IE7
function toDou(n)
{
if(n<10)
{
return ‘0‘+n;//第一位加上0,保證取出來的時間數字一直是2位元的字串，比如01
}
else
{
return ‘‘+n;//為什麼要加Null 字元串‘‘,是為了讓返回的2位元字也是以字串的形式返回的
}
};
window.onload = function ()
{
var aImg=document.getElementsByTagName(‘img‘);
//var str=‘013221‘;//這個時間是寫死的
//開啟定時器，每過一秒鐘更新一次圖片
function tick()
{
var oDate=new Date();
var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
for(var i=0;i<aImg.length;i++)
{
aImg[i].src=‘img/‘+str.charAt(i)+‘.png‘;//使用charAt(i)使各種瀏覽器保持相容！
}
};
setInterval(tick,1000);
tick();//將tick()函數先在onload裡面執行一遍，這樣剛開啟頁面時不會有全是0的一瞬間延遲
};
</script>
</head>
<body style="background:black; color:white; font-size:50px;">
<img src="img/0.png" />
<img src="img/0.png" />
:
<img src="img/0.png" />
<img src="img/0.png" />
:
<img src="img/0.png" />
<img src="img/0.png" />
</body>
</html>
三、Date對象的其他方法
年getFullYear
月getMonth()
日getDate()
星期getDay()
四、延時提示框
（1）效果示範
（2）原來的方法
移入顯示，移出隱藏
（3）移出延時隱藏
移入下面的Div後，還是隱藏了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延時提示框</title>
<style>
div{
margin:10px;
float:left;
}
#div1{
width:50px;
height:50px;
background:red;
}
#div2{
width:250px;
height:180px;
background:#CCC;
display:none;
}
</style>
<script>
window.onload = function ()
{
var oDiv1=document.getElementById(‘div1‘);
var oDiv2=document.getElementById(‘div2‘);
var timer=null;
oDiv1.onmouseover=function()
{
clearTimeout(timer);//如果不事先清除div2的timeout這個定時炸彈，當滑鼠從div2移入div1時，div2會消失掉
oDiv2.style.display=‘block‘;
};
oDiv1.onmouseout=function()
{
timer=setTimeout(function()
{
oDiv2.style.display=‘none‘;
},500);
};
//當滑鼠移到Div2的時候，先把定時器關閉
oDiv2.onmouseover=function()
{
clearTimeout(timer);
};
oDiv2.onmouseout=function()
{
timer=setTimeout(function()
{
oDiv2.style.display=‘none‘;
},500);
};
};
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
（4）簡化代碼
合并兩個相同的mouseover和mouseout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延時提示框合并代碼</title>
<style>
div{
margin:10px;
float:left;
}
#div1{
width:50px;
height:50px;
background:red;
}
#div2{
width:250px;
height:180px;
background:#CCC;
display:none;
}
</style>
<script>
window.onload = function ()
{
var oDiv1=document.getElementById(‘div1‘);
var oDiv2=document.getElementById(‘div2‘);
var timer=null;
oDiv2.onmouseover=oDiv1.onmouseover=function()
{
clearTimeout(timer);//如果不事先清除div2的timeout這個定時炸彈，當滑鼠從div2移入div1時，div2會消失掉
oDiv2.style.display=‘block‘;
};
oDiv2.onmouseout=oDiv1.onmouseout=function()
{
timer=setTimeout(function()
{
oDiv2.style.display=‘none‘;
},500);
};
};
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
【JS學習】定時器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
