<style type="text/css">
input {
border: 1px solid rgba(0, 0, 0, 8);
text-align: center;
font-size: 20px;
font-weight: bold;
/* 字体加粗 */
width: 25px;
height: 20px;
}
</style>
</head>
<body>
hours:<input type="text" value="02" class="hours">
minutes:<input type="text" value="00" class="minutes">
seconds:<input type="text" value="00" class="seconds">
</body>
</html>
<script type="text/javascript">
var hourNode = document.getElementsByClassName('hours')[0];
var minuteNode = document.getElementsByClassName('minutes')[0];
var secondNode = document.getElementsByClassName('seconds')[0];
var hour = 2, /* 小时 */
minute = 0, /* 分钟 */
second = 0, /* 秒钟 */
time = 59; /* 交换变量(当分钟为零的情况下调用)*/
//计时器
var timer = setInterval(function () {
//判断分钟是否为零,如果为零调用交换变量
if (minute != 0) {
second--;
} else {
time--;
}
//秒钟重置和分钟减减
if (second == 0) {
second = 59;
if (!minute == 0) {
minuteNode.value = minute--;
}
}
//分钟重置和时钟减减
if (!hour == 0) {
if (minute == 0) {
minute = 59;
hour--;
}
}
//获取秒钟,并修饰代码[00:00:00](根据分钟是否为0判断,来为秒钟赋值)
if (minute != 0) {
if (second < 10) {
secondNode.value = "0" + second;
} else {
secondNode.value = second;
}
} else {
if (second < 10) {
secondNode.value = "0" + time;
} else {
secondNode.value = time;
}
}
//获取分钟,并修饰代码[00:00:00]
if (minute < 10) {
minuteNode.value = "0" + minute;
} else {
minuteNode.value = minute;
}
//获取小时,并修饰代码[00:00:00]
if (hour < 10) {
hourNode.value = "0" + hour;
} else {
hourNode.value = hour;
}
//停止
if (time == 0) {
secondNode.value = "0" + time;//改变最后一秒的格式[00:00:00]
clearInterval(timer);
}
}, 1000);