当前位置：首页 > news >正文

倒计时

news 来源：原创 2024/4/27 16:41:15

为什么80%的码农都做不了架构师？>>>

这个是给天猫店铺用的，求砖，求批，求指点！谢谢！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>倒计时</title>
</head>
<body>
    <!-- 从此行下一行开始复制 -->
    <style>
    body {margin: 0}
    .countdown-parent {background: #ffed04}
    .countdown {display: flex; flex-direction: row; justify-content: center; align-items: center}
    .countdown span {background: #f9113c; margin: 10px; border-radius: 10px; box-shadow: 5px 5px 5px rgb(117, 24, 38) inset; display: inline-flex; height: 64px; width: 45px; color:#fff; justify-content: center; align-items: center; flex-direction: column}
    .countdown strong {font-size: 50px; color: #f9113c}
    .countdown span h1,.countdown span h5 {margin: 0}
    .countdown span h5 {color: #000}
    </style>
    <div class="countdown-parent">
        <div class="countdown">
            <span><h1 id="day"></h1><h5>DAYS</h5></span>
            <strong>:</strong>
            <span><h1 id="hour"></h1><h5>HRS</h5></span>
            <strong>:</strong>
            <span><h1 id="min"></h1><h5>MINS</h5></span>
            <strong>:</strong>
            <span><h1 id="sec"></h1><h5>SECS</h5></span>
        </div>
    </div>
    <script type="text/javascript">
    function countdown() {
        var dayObj = document.getElementById('day');
        var hourObj = document.getElementById('hour');
        var minObj = document.getElementById('min');
        var secObj = document.getElementById('sec');

        var target = new Date('2016-11-07 12:00:00');
        var now = new Date();

        if (target.getTime() - now.getTime() <= 0) {
            dayObj.parentNode.innerHTML = '<h1>正</h1>';
            hourObj.parentNode.innerHTML = '<h1>在</h1>';
            minObj.parentNode.innerHTML = '<h1>抢</h1>';
            secObj.parentNode.innerHTML = '<h1>购</h1>';
            return;
        }

        var sec = target.getSeconds() - now.getSeconds();
        var min = target.getMinutes() - now.getMinutes();
        var hour = target.getHours() - now.getHours();
        var day = target.getDate() - now.getDate();

        min = sec < 0 ? min - 1 : min;
        sec = sec < 0 ? sec + 60 : sec;
        hour = min < 0 ? hour - 1 : hour;
        min = min < 0 ? min + 60 : min;
        day = hour < 0 ? day - 1 : day;
        hour = hour < 0 ? hour + 24 : hour;

        secObj.innerHTML = sec < 10 ? '0' + sec : sec;
        minObj.innerHTML = min < 10 ? '0' + min : min;
        hourObj.innerHTML = hour < 10 ? '0' + hour : hour;
        dayObj.innerHTML = day;

        setTimeout(function() {countdown()}, 1000);
    }
    countdown();
    </script>
    <!-- 复制到此行上一行结束 -->
</body>
</html>

转载于:https://my.oschina.net/nixus/blog/782765