Sample index:
1. 定時器運用
2. 電子時鐘
3. 延遲提示框
定時器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<script>
function show()
{
alert('a');
}
//每隔1秒就彈一次訊息
//無限的執行 : setInterval(show,1000);
//只會執行一次 : setTimeout(show,1000);
</script>
</head>
<body>
</body>
</html>
定時器的開啟和關閉
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<script>
window.onload=function()
{
var oBtnStart=document.getElementById('m_btnStart');
var oBtnStop=document.getElementById('m_btnStop');
var timer = null;
oBtnStart.onclick=function()
{
timer = setInterval( function()
{
alert('a');
},1000);
}
oBtnStop.onclick=function()
{
clearInterval(timer);
}
}
</script>
</head>
<body>
<input id="m_btnStart" type="button" value="Start"/>
<input id="m_btnStop" type="button" value="Stop"/>
</body>
</html>
電子時鐘
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
</head>
<script>
function toDou(n)
{
if (n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
}
window.onload=function()
{
var aImg=document.getElementsByTagName('img');
//使用定時器，每一秒更新
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[i]+'.png';
//但是為了考慮兼容性，所以改成這樣
aImg[i].src='img/'+str.charAt(i)+'.png';
}
}
/*
為什麼setInterval後還要在調用一次tick?
原因 :
因為setInterval真正作用的時間是在1秒鐘之後，
所以使用者會看到一秒的00:00:00，這並不好，
所以我讓一開始的時候，先調用一次tick()這個function，
將正確時間先顯示出來，下一秒定時器開始跑，這樣不管你怎麼樣刷新，
你都會看到正確時間了。
*/
setInterval(tick,1000);
tick();
}
</script>
<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>
延遲提示框
用法 : 滑鼠放在紅色的上面，灰色的部分會顯示，如果移到灰色的部分，灰色也不會消失，一直到離開回到白色的區域，過0.5秒後，灰色的部分會消失。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
div
{
float:left;
margin:10px;
}
#div1
{
width:50px;
height:50px;
background:red;
}
#div2
{
width:250px;
height:180px;
background:#CCC;
display:none;
}
</style>
</head>
<script>
window.onload=function()
{
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()
{
timer = setTimeout(function()
{
oDiv2.style.display='none';
},500);
}
oDiv2.onmouseover=function()
{
clearTimeout(timer);
}
oDiv2.onmouseout=function()
{
timer = setTimeout(function()
{
oDiv2.style.display='none';
},500);
}
*/
//簡化code
oDiv1.onmouseout = oDiv2.onmouseout=function()
{
timer = setTimeout(function()
{
oDiv2.style.display='none';
},500);
}
oDiv1.onmouseover=oDiv2.onmouseover=function()
{
clearTimeout(timer);
oDiv2.style.display='block';
}
}
</script>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
留言列表
Linux (2)
{{ article.title }}