js基础练习三之数码时钟
这章节有两个实例,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 "星期六"; }