HTML+JS实现简单电子时钟：代码解析与注释

<p><!doctype html></p>
<html>
<head>
<meta charset='utf-8'>
<title>简单电子时钟的设计与实现</title>
<style>
#clock{
       width:800px;
       font-size:80px; 
       color:black
       }
.box1{
     margin-right:10px;
     width:100px; 
     height:100px;
     float: left;
     line-height:100px;
     }   
</style>
</head>
<body  onLoad='getCurrentTime()'>
 <!-- 下划线 -->
 <div id='clock'>
 <div class='box1' id='h'></div>
 <div class='box1' id=''>:</div>
 <div class='box1' id='m'></div>
 <div class='box1' id=''>:</div>
 <div class='box1' id='s'></div>
 </div>
 <!-- 设置时分秒与div -->
 <script language='javascript'>
 // 获取显示区域框对象 时分秒
 var hours=document.getElementById('h');
 var minute=document.getElementById('m');
 var second=document.getElementById('s');
<p>// 获取当前时间
function getCurrentTime(){
// 定义
var date=new Date();
// 时
var h=date.getHours();
// 分
var m=date.getMinutes();
// 秒
var s=date.getSeconds();
// 使每个div里都有两个数字，
if(h&lt;10) h='0'+h;
if(m&lt;10) m='0'+m;
if(s&lt;10) s='0'+s;
// 将修改后的数值使用innerHTML属性显示到对应的时间显示框中
hours.innerHTML=h;
minute.innerHTML=m;
second.innerHTML=s;<br />
}
setInterval('getCurrentTime()', 100);
// 每100毫秒更新一次，getcurrenttime为调用的函数。
</script></p>
</body>
</html>