js电子时钟
好多bug 人气:0最终结果:
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2.1简单电子时钟的设计与实现</title> <link rel="stylesheet" type="text/css" href="css/clock.css"/> </head> <body onload="getCurrentTime()"> <h3>简单电子时钟的设计与实现</h3> <hr > <!-- 电子时钟区域 --> <div id="clock"> <div class="box1" id="h"></div> <div class="box2">:</div> <div class="box1" id="m"></div> <div class="box2">:</div> <div class="box1" id="s"></div> </div> </body> </html>
css部分
/* 电子时钟的总体样式设置 */ #clock{ width:800px; font-size: 80px; font-weight: bold; color: #008B8B; text-align: center; margin: 20px; } /* 时分秒数字区域的样式设置 */ .box1{ margin-right: 10px; width: 100px; height: 100px; line-height: 100px; float: left; border: gray 1px solid; } /* 冒号区域的样式设置 */ .box2{ width: 30px; float: left; margin-right: 10px; }
js部分
——使用外链时不需加<script>标签,不使用外链则直接写在<body>标签内
<script> //获取显示小时的区域框对象 var hour=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(); if(h<10) h='0'+h;//确保0-9时也显示成两位数 if(m<10) m='0'+m;//确保0-9分钟也显示成两位数 if(s<10) s='0'+s;//确保0-9秒也显示成两位数 hour.innerHTML=h; minute.innerHTML=m; second.innerHTML=s; } //每秒更新一次时间 setInterval('getCurrentTime()',1000); </script>
加载全部内容