在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 >
<div id="timetxt"></div>
</body>
</html>
浏览器展示效果：
如果在浏览器中显示的不是一个正圆，是因为CSS3的圆角效果问题，因为众多的浏览器都为了一己自私，设置了太多的私有属性，所以只要在CSS3的标签前面加上其浏览器的私有前缀就可以了，在这里给出了前端需要测试的5大浏览器的前缀，只要这5大浏览器通过了，其他的都是没有问题的了。
时间： 2024-10-22 13:07:55