Fork me on GitHub

简单电子时钟

这个电子时钟就有一点点难度啦。

点击查看代码 
 <head>
    <meta charset="utf-8">
    <title>简单电子时钟的设计与实现</title>
	<link rel="stylesheet" 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>
	<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>
  </body>
2./*电子时钟总体样式设置*/
#clock {
    width: 800px;
    font-size: 80px;
    color: red;
   
}
/*时分秒数字区域的样式设置*/
.box1 {
   
    width: 100px;
    height: 100px;
   
    float: left;
    border: gray 1px solid;
}
/*冒号区域的样式设置*/
.box2 {
    width: 30px;
    float: left;
    
}

结果显示：

posted @ 2022-02-21 18:56  sxflmy  阅读(130)  评论(0)    收藏  举报