JS毫秒倒计时

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>倒计时</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>


<input id="btn" type="button" value="开始倒计时"/><br/>
剩余时间：<span id="box-countdown">10:00</span> 秒


<script>
    var btn = document.getElementById("btn"),
            boxCountdown = document.getElementById("box-countdown"),
            now = 10000,
            timer;


    function countdown() {
        timer = setInterval((function countdown() {
            var endTime = new Date().getTime() + now;
            return function () {
                var startTime = new Date().getTime(),
                        diff = endTime - startTime,
                        num1 = parseInt(diff / 1000),
                        num2 = parseInt(diff / 100 - num1 * 10),
                        num3 = parseInt(diff / 10 - num1 * 100 - num2 * 10),
                        result = num1 + ":" + num2 + num3;
                if (diff < 0) {
                    clearInterval(timer);
                }
                boxCountdown.innerHTML = result;
            }
        })(), 10);
    }
    btn.onclick = function () {
        countdown();
    };

</script>

</body>
</html>

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS毫秒倒计时</title>
</head>

<body>

剩余时间：<span id="state">10:00</span> 秒

<script type="text/javascript">
var state = document.getElementById("state");
var num = 10000;
var timer = null;
var now = 0;

function countdown() {
    num -= 10;
    var num1 = parseInt(num/1000);
    var num2 = parseInt((num/1000 - num1) * 10);
    var num3 = parseInt(Math.random() * 10);    //用随机数充数
    //var num3 = parseInt((num/1000 - num1 - num2/10) * 10);    //这个是才是真实的数字，不过由于是整数，所以。。。
    if (!num) {
        clearInterval(timer);
        num3 = 0;
    }
    var str = "0" + num1 + ":" + num2 + num3;
    state.innerHTML = str;
}
timer = setInterval(countdown, 10);
</script>
</body>
</html>

 

posted @ 2014-09-11 23:21  赵小磊  阅读(474)  评论(0)    收藏  举报
回到头部