您的位置：首页 > Web前端 > JavaScript

js 计时器,倒计时完整实例代码附效果图制作一个当前时间的动态时钟

2017-10-31 11:47 816 查看

点击触发倒计时的时候就会自动从30秒到0秒,当到达0秒的时候会弹出时间到. 代码很简洁 ,还加了一个制作当前时间的动态时钟的代码当做笔记了,如果分和秒是个位数的时候会在前面自动加0

点击触发倒计时的时候就会自动从30秒到0秒,当到达0秒的时候会弹出时间到.

<html>
<head>
<meta name="" charset="utf-8" content="" />
<script type="text/javascript">
var c = 30
function timedCount() {
document.getElementById('txt').value = c
c = c - 1
if(c >= 0) {
t = setTimeout("timedCount()", 1000)
} else {
alert("时间到")
}
}
</script>
</head>
<body>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">

<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
</html>

下面是制作一个当前时间的动态时钟

<html>
<head>
<meta name="" charset="utf-8" content="" />
<script type="text/javascript">
function startTime() {
var today = new Date()
var h = today.getHours()
var m = today.getMinutes()
var s = today.getSeconds()
// add a zero in front of numbers<10
m = checkTime(m)
s = checkTime(s)
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s
t = setTimeout('startTime()', 500)
}

function checkTime(i) {
if(i < 10) {
i = "0" + i
}
return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

js 计时器,倒计时完整实例代码附效果图 制作一个当前时间的动态时钟

js 计时器,倒计时完整实例代码附效果图制作一个当前时间的动态时钟