JavaScript 的倒计时

纯文本倒计时实现

最新推荐文章于 2024-12-03 11:08:57 发布

转载最新推荐文章于 2024-12-03 11:08:57 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cyfhykx/p/5742823.html

本文介绍了一个使用纯文本和JavaScript实现的网页倒计时功能。该倒计时支持浏览器刷新后继续计数，并在剩余5分钟时发出提醒。代码通过sessionStorage存储剩余时间，确保了计时的连续性。

一年前，在网上找到的例子，现在已经找不到出处，对不住原作者，请原谅。修改了一下，在刷新页面的情况下，倒计时不重来。

没有任何样式，纯文字倒计时。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body>
<label id="time"></label>
<script>
    function CountDown() {
        var localtime=sessionStorage.getItem('time');
        if(localtime){
            if (localtime >= 0) {
                hours=Math.floor(localtime/3600);
                minutes = Math.floor((localtime-hours*3600)/ 60);
                seconds = Math.floor((localtime-hours*3600) % 60);
                hours = hours >= 10 ? hours : '0' + hours;
                minutes = minutes >= 10 ? minutes : '0' + minutes;
                seconds = seconds >= 10 ? seconds : '0' + seconds;
                msg = "距离结束还有"+ hours + "时" + minutes + "分" + seconds + "秒";
                document.getElementById('time').innerHTML = msg;
                if (localtime == 5*60) alert('注意，还有5分钟!');
                --localtime;
                sessionStorage.setItem('time',localtime)
            }
            else {
                document.getElementById('time').innerHTML = "时间到，结束!";
            }
        }else{
            var maxtime = 90*60; //一个半小时，按秒计算，自己调整!
            if (maxtime >= 0) {
                hours=Math.floor(maxtime/3600);
                minutes = Math.floor((maxtime-hours*3600)/ 60);
                seconds = Math.floor((maxtime-hours*3600) % 60);
                hours = hours >= 10 ? hours : '0' + hours;
                minutes = minutes >= 10 ? minutes : '0' + minutes;
                seconds = seconds >= 10 ? seconds : '0' + seconds;
                msg = "距离结束还有"+ hours + "时" + minutes + "分" + seconds + "秒";
                document.getElementById('time').innerHTML = msg;
                --maxtime;
                sessionStorage.setItem('time',maxtime)
            }
            else {
                document.getElementById('time').innerHTML = "时间到，结束!";
            }
        }
    }
    timer = setInterval("CountDown()", 1000);
</script>
</body>
</html>