首页 > 代码库 > JavaScript的时钟实现

JavaScript的时钟实现

在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。

<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="UTF-8">
		<meta name="author" content="宋添发" />
		<meta name="Genarator" content="sublime"/>
	<title>时间的实现</title>
	<style type="text/css">
       #timetxt{
             width:200px;
             height:200px;
             background-color:gray;
             border-radius: 50%;//圆角效果
             font-size:45px;
             line-height:200px;
             margin:auto auto;
             text-align:center;
       }
	</style>
	<script type="text/javascript">
	   function startTime(){
	      var today=new Date(); //定义时间
		  var h=today.getHours();  //小时
		  var m=today.getMinutes();  //分钟
		  var s=today.getSeconds();  //秒

		  //调用函数
		   h=checkTime(h);
           m=checkTime(m);
		   s=checkTime(s);
		  document.getElementById("timetxt").innerHTML=h+":"+m+":"+s; //时间显示的格式
		  t=setTimeout(function(){
		    startTime();
		  },500);//500,是延时显示的意思,即500毫秒更新一次
	   }

	   //当分钟和秒是一位时候,需要在前面加0(才更符合要求)
	   function checkTime(i){
	     if(i<10){
		   i="0"+i;
		 }
		 return i;
	   }
	   </script>
</head>
	<body onl oad="startTime()">
	   <div id="timetxt"></div>
	</body>
</html>

 浏览器展示效果:

技术分享

如果在浏览器中显示的不是一个正圆,是因为CSS3的圆角效果问题,因为众多的浏览器都为了一己自私,设置了太多的私有属性,所以只要在CSS3的标签前面加上其浏览器的私有前缀就可以了,在这里给出了前端需要测试的5大浏览器的前缀,只要这5大浏览器通过了,其他的都是没有问题的了。

技术分享

JavaScript的时钟实现