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 "星期六";
 }