zoukankan      html  css  js  c++  java
  • 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{
                 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 onload="startTime()">
    	   <div id="timetxt"></div>
    	</body>
    </html>
    

     浏览器展示效果:

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

  • 相关阅读:
    [ABC200E] Patisserie ABC 2
    [CF1521E] Nastia and a Beautiful Matrix
    [CF1498D] Bananas in a Microwave
    [CF1515B] Phoenix and Puzzle
    [CF1519C] Berland Regional
    [CF1519B] The Cake Is a Lie
    [ZONe Energy Programming Contest C] MAD TEAM
    [洛谷P7480] Reboot from Blue
    [CF1508A] Binary Literature
    1371. 货币系统
  • 原文地址:https://www.cnblogs.com/Song-Timfa/p/6298755.html
Copyright © 2011-2022 走看看