JS 显示时钟

1，只用JavaScript显示时钟图：如下：

 

后台代码如下：

代码

  1  设置显示一个时间
  2  ；
  3  代码如下：
  4 
  5 
  6  <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
  7  < html xmlns = " http://www.w3.org/1999/xhtml " >
  8  < head >
  9  < meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 "   />
 10  < title > 显示时间 </ title >
 11  < script language = " javascript " >
 12  var timer  =   null ;
 13  // 显示数字图片
 14 
 15   function displayClock(num)
 16   {
 17      var dig  =  parseInt(num / 10 );
 18      var timetag  =   " <img src=' "   +  dig  +   " .jpg'> " ;
 19      dig  =  num % 10 ;
 20      timetag  +=   " <img src=' "   +  dig  +   " .jpg'> " ;
 21       return  timetag;
 22      
 23   }
 24    // 停止计时
 25   
 26   function stopClock()
 27   {
 28       clearTimeout(timer);
 29   }
 30    // 开始计时
 31   
 32   function startClock()
 33   {
 34      var time  =   new  Date();
 35       //  获取时间
 36      
 37      var hours  =  displayClock(time.getHours())  +   " : " ;
 38      var minutes  =  displayClock(time.getMinutes())  +   " : " ;
 39      var seconds  =  displayClock(time.getSeconds())  ;
 40       //  显示时间
 41      show.innerHTML  =  hours  +  minutes  +  seconds ;
 42      timer  =  setTimeout( " startClock() " , 1000 );
 43       
 44      
 45   }
 46   
 47   
 48  </ script >
 49 
 50 
 51 
 52 
 53  </ head >
 54  < body onload = " startClock() "  onunload = " stopClock() " >
 55  < form >
 56     < center >
 57       < div id = " show " ></ div >
 58     </ center >
 59 
 60 
 61  </ body >
 62  </ html >
 63  <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
 64  < html xmlns = " http://www.w3.org/1999/xhtml " >
 65  < head >
 66  < meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 "   />
 67  < title > 显示时间 </ title >
 68  < script language = " javascript " >
 69  var timer  =   null ;
 70  // 显示数字图片
 71 
 72   function displayClock(num)
 73   {
 74      var dig  =  parseInt(num / 10 );
 75      var timetag  =   " <img src=' "   +  dig  +   " .jpg'> " ;
 76      dig  =  num % 10 ;
 77      timetag  +=   " <img src=' "   +  dig  +   " .jpg'> " ;
 78       return  timetag;
 79      
 80   }
 81    // 停止计时
 82   
 83   function stopClock()
 84   {
 85       clearTimeout(timer);
 86   }
 87    // 开始计时
 88   
 89   function startClock()
 90   {
 91      var time  =   new  Date();
 92       //  获取时间
 93      
 94      var hours  =  displayClock(time.getHours())  +   " : " ;
 95      var minutes  =  displayClock(time.getMinutes())  +   " : " ;
 96      var seconds  =  displayClock(time.getSeconds())  ;
 97       //  显示时间
 98      show.innerHTML  =  hours  +  minutes  +  seconds ;
 99      timer  =  setTimeout( " startClock() " , 1000 );
100       
101      
102   }
103   
104   
105  </ script >
106 
107 
108 
109 
110  </ head >
111  < body onload = " startClock() "  onunload = " stopClock() " >
112  < form >
113     < center >
114       < div id = " show " ></ div >
115     </ center >
116 
117 
118  </ body >
119  </ html >
120 
121  存在的问题：
122 
123  问题：网页无法自动显示时间，要按刷新按钮，才可以。
124   回答;
125  timer  =  setTimeout( " startClock  " , 1000 );这条语句少个“（）”
126  应改成如下语句
127  timer  =  setTimeout( " startClock() " , 1000 );
128 
129 
130 
131 

 

 

 

整体思路：

1，获取本地时间，

2.将分别获取本地时间的数字（个位数字）转换为数字图片（0~9）的文件名。

3，时钟显示通过Id中的show.innerHTML插入到页面中。

转载于:https://www.cnblogs.com/85538649/archive/2010/04/15/1712407.html