简单的电子时钟 web前端开发 HTML5 JavaScript css

代码与注释如下<!doctype html><html><head><meta charset="utf-8"><title>简单电子时钟的设计与实现</title><style>#clock{width:800px;font-size:80px;font-weight:bold;color:red;text-al

我的猴子

3512人浏览 · 2021-09-23 16:04:50

我的猴子 · 2021-09-23 16:04:50 发布

代码与注释如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单电子时钟的设计与实现</title>
<style>
#clock{
       width:800px;
       font-size:80px; 
       font-weight:bold;
       color:red;
       text-align:center;
       margin:20px;
       }
.box1{
     margin-right:10px;
     width:100px; 
     height:100px; 
     float:left;
     line-height:100px;
        border:#C30 1px solid;
     }   
.box2{
    width:30px; 
    float:left;
    margin-right:10px;
    }
#h1{ text-align:center;}            
</style>
</head>
<body  onLoad="getCurrentTime()">
<!- 获取打开页面时的当前时间->
<h1>简单电子时钟的设计与实现</h1>
<!-标题->
<hr/>
 <!-下划线->
 <div id="clock">
 <div class="box1" id="h"></div>
 <div class="box2" id="">:</div>
 <div class="box1" id="m"></div>
 <div class="box2" 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");
 
 //获取当前时间
 function getCurrentTime(){
     //定义
  var date=new Date();
  //时
  var h=date.getHours();
  //分
  var m=date.getMinutes();
  //秒
  var s=date.getSeconds();
  //使每个div里都有两个数字，
  if(h<10) h="0"+h;
     if(m<10) m="0"+m;
     if(s<10) s="0"+s;
     //将修改后的数值使用innerHTML属性显示到对应的时间显示框中
  hours.innerHTML=h;
  minute.innerHTML=m;
  second.innerHTML=s;  
 }
 setInterval("getCurrentTime()", 1000);
 //每1000毫秒更新一次，getcurrenttime为调用的函数。
 </script>
</body>
</html>