js 时间倒计时

杭州前端开发需要数据交互 前端开发需要逻辑 web前端开发进阶需要美工

用设置好的时间减去现在的时间,就刚好形成时间倒计时
html 代码片段

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
</head>
<body>
    距xxx还有<span id=”span” style=”font-size:30px;”></span>
    <script>
        var oSpan = document.getElementById(‘span’);
        function myTime() {
            var Time1 = new Date(); //当前时间
            var Time2 = new Date(2016, 1, 7, 24, 0, 0); //倒计时时间
            var t = Math.floor((Time2 – Time1) / 1000);
            // 天:Math.floor(t/86400)
            // 时:Math.floor(t%86400/3600)
            // 分:Math.floor(t%86400%3600/60)
            // 秒:t%60
            var str = Math.floor(t / 86400) + ‘天’ + toTwo(Math.floor(t % 86400 / 3600)) + ‘时’ + toTwo(Math.floor(t % 86400 % 3600 / 60)) + ‘分’ + toTwo(t % 60) + ‘秒’;
            oSpan.innerHTML = str;
        }
        myTime();
        function toTwo(n) { //判断当’时分秒’为个位数时,需要前面加0,如01
            return n < 10 ? ‘0’ + n : ” + n;
        }
        setInterval(function () {
            myTime();
        }, 1000);
    </script>
</body>
</html>

商城倒计时抢购活动
html 代码片段

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style>
        #box{ padding:10px;}
#boximg{ width: 120px; height: 120px; display: block; margin-bottom: 10px;}
#boxspan{padding:3px8px; background:#dbdbdb; color: #929292;}
#box.on{ padding:3px8px; background:#ff8400; color: #fff; cursor:pointer;}
</style>
</head>
<body>
    请设置活动结束时间:<input type=”text” value=”January 28,2016 17:30:00″><input type=”button” value=”活动开始”><br />
    至活动结束还有:<span id=”span2″></span>
    <div id=”box”><span id=”span”>活动未开始</span></div>
    <script>
        var Inp = document.getElementsByTagName(‘input’);
        var oSpan = document.getElementById(‘span’);
        var oSpan2 = document.getElementById(‘span2’);
        var oBox = document.getElementById(‘box’);
        var str = ”;
        var Timer = null;
        Inp[1].onclick = function () {
            Timer = setInterval(function () {
                myTime();
            }, 1000);
        }
        function myTime() {
            Time1 = new Date();
            Time2 = new Date(Inp[0].value);
            t = Math.floor((Time2 – Time1) / 1000);
            oSpan.className = ‘on’;
            oSpan.innerHTML = ‘立即购买’;
            if (t > -1) {
                str = Math.floor(t / 86400) + ‘天’ + toTwo(Math.floor(t % 86400 / 3600)) + ‘时’ + toTwo(Math.floor(t % 86400 % 3600 / 60)) + ‘分’ + toTwo(t % 60) + ‘秒’;
                oSpan2.innerHTML = str;
            } else {
                clearInterval(Timer);
                oSpan.className = ”;
                oSpan.innerHTML = ‘已结束’;
            }
        }
        function toTwo(n) { //判断当’时分秒’为个位数时,需要前面加0,如01
            return n < 10 ? ‘0’ + n : ” + n;
        }
    </script>
    <!–
一月:January
二月:February
三月:March
四月:April
五月:May
六月:June
七月:July
八月:August
九月:September
十月:October
十一月:November
十二月:December –>
</body>
</html>

前端开发需要掌握的技术有哪些 web前端开发需要哪些技术 前端开发所需要的环境

» 本文来自:前端开发者 » 《js 时间倒计时》
» 本文链接地址:https://www.rokub.com/5886.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!