时钟 web前端开发 HTML5 JavaScript css"/>
简单的电子时钟 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-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>更多推荐
简单的电子时钟 web前端开发 HTML5 JavaScript css
发布评论