JavaScript的时钟实现
Posted 惊风随笔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 onload="startTime()"> <div id="timetxt"></div> </body> </html>
浏览器展示效果：
如果在浏览器中显示的不是一个正圆，是因为CSS3的圆角效果问题，因为众多的浏览器厂商都为了一己自私，设置了太多的私有属性，所以只要在CSS3的标签前面加上其浏览器的私有前缀就可以了，在这里给出了前端需要测试的5大浏览器的前缀，只要这5大浏览器通过了，其他的都是没有问题的了。
以上是关于JavaScript的时钟实现的主要内容，如果未能解决你的问题，请参考以下文章
[12小时Javascript Clock显示24时间，错误的AM / PM
html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。