这章节有两个实例，1，定时器的使用; 2，数码时钟;
用到的js知识：定时器，Date对象.
>>>>>定时器
开启定时器：
setInterval 间隔型
setTimeout 延时型
停止定时器：
clearInterval
clearTimeout
setInterval 间隔型 用法小列子：
window.onload=function()
{
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var timer=null; oBtn1.onclick=function() //开启定时器
{
timer=setInterval(show,1000);
};
oBtn2.onclick=function() //关闭定时器
{
clearInterval(timer);
//clearTimeout(timer);
};
}
function show()
{
alert("定时器");
}
setTimeout 延时型 用法小例子，类似qq界面延迟显示详细资料效果
<script type="text/javascript">
window.onload=function()
{
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var timer=null; div1.onmouseover=function()
{
setTimeout(function(){ div2.style.display="block"; },1000);
};
div1.onmouseout=function()
{
timer = setTimeout(function(){ div2.style.display="none"; },1000);
};
div2.onmouseover=function()
{
div2.style.display="block";
clearTimeout(timer);
};
div2.onmouseout=function()
{
setTimeout(function(){ div2.style.display="none";},1000);
};
};
</script>
>>>>>>>>>>数码时钟:效果思路
*获取系统时间
Date对象
getHours,getMinutes,getSeconds
Date对象的其他方法：
年 .getfullYear()
月 .getMonth() (月从0开始)
日 .getDate()
星期 .getDay()
*显示系统时间
字符串连接
空位补零
*设置图片路径
charAt方法
<script type="text/javascript">
function toDouble(num)
{
if(num<10)
{
return "0" + num;
}
else
{
return num;
}
}
window.onload=function(){
var oBtn = document.getElementById("btn1");
var aImg = document.getElementsByTagName("img");
//oBtn.onclick=function(){ setInterval(updatetime,1000); }; function updatetime() //更新时间
{
var oDate = new Date();
var i=0;
//var imgArr = ["1","6","5","8","5","6"];
var imgArr = toDouble(oDate.getHours()) + toDouble(oDate.getMinutes()) + toDouble(oDate.getSeconds()) + '';
//alert(imgArr);
for(i=0; i < aImg.length; i++)
{
aImg[i].src = "pic/" + imgArr.charAt(i) + ".jpg";
}
}
setInterval(updatetime,100);
updatetime();
};
</script>
类似效果，这里只有时间没有日期，相应的星期可用switch函数：
function toChines(numDay)
{
var numDay;
switch(numDay){
case 0:
return "星期日";
case 1:
return "星期一";
case 2:
return "星期二";
case 3:
return "星期三";
case 4:
return "星期四";
case 5:
return "星期五";
case 6:
return "星期六";
}