大家好，又见面了，我是你们的朋友全栈君。
/*电子时钟总体样式设置*/
#clock {
width: 800px;
font-size: 80px;
font-weight: bold;
color: red;
text-align: center;
margin: 20px;
}
/*时分秒数字区域的样式设置*/
.box1 {
margin-right: 10px;
width: 100px;
height: 100px;
line-height: 100px;
float: left;
border: gray 1px solid;
}
/*冒号区域的样式设置*/
.box2 {
width: 30px;
float: left;
margin-right: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>简单电子时钟的设计与实现</title>
<link rel=”stylesheet” href=”css/clock.css”>
</head>
<body οnlοad=”getCurrentTime()”>
<!–标题–>
<h3>简单电子时钟的设计与实现</h3>
<!–水平线–>
<hr />
<!–电子时钟区域–>
<div id=”clock”>
<div class=”box1″ id=”h”></div>
<div class=”box2″>:</div>
<div class=”box1″ id=”m”></div>
<div class=”box2″>:</div>
<div class=”box1″ id=”s”></div>
</div>
<script>
//获取显示小时的区域框对象
var hour = document.getElementById(“h”);
//获取显示分钟的区域框对象
var minute = document.getElementById(“m”);
//获取显示秒的区域框对象
var second = document.getElementById(“s”);
//获取当前时间
function getCurrentTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
if(h<10) h = “0”+h; //以确保0-9时也显示成两位数
if(m<10) m = “0”+m; //以确保0-9分钟也显示成两位数
if(s<10) s = “0”+s; //以确保0-9秒也显示成两位数
hour.innerHTML= h;
minute.innerHTML = m;
second.innerHTML = s;
}
//每秒更新一次时间
setInterval(“getCurrentTime()”, 1000);
</script>
</body>
</html>
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/154099.html原文链接：https://javaforall.net
