首页 > 代码库 > 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的时钟实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。