技術標籤：html的小demohtml5javascriptcss

臨近春節，寫一個倒計時的demo，供大家參考，有點跑馬燈效果哦
普通版
樣式 #s1,
#s2,
#s3,
#s4,
#s5,
#s6,
#s7 {
font-size: 40px;
font-weight: bold;
display: block;
text-align: left;
margin-left: 200px;
}

內容與指令碼

<span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
<span id="s4"></span>
<span id="s5"></span>
<span id="s6"></span>
<span id="s7"></span>
<span id="s8"></span>

<script>
    function fn(cs1, cs2, cs3) {
        var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
        function generateMixed(n) {
            var res = "";
            for (var i = 0; i < n; i++) {
                var id = Math.ceil(Math.random() * 16);
                res += chars[id];
            }
            return res;
        }
        var num = generateMixed(6);
        var oSpan2 = document.getElementById(cs1);
        var nDate2 = new Date(cs2);//修改需要倒計時的時間
        showTime();
        // setInterval(showTime, 1000);
        function showTime() {
            var oDate = new Date();//獲取當地顯示器的時間
            var time = Math.floor((nDate2 - oDate) / 1000);
            var d2 = Math.floor(time / 86400);
            var h2 = Math.floor(time % 86400 / 3600);
            var m2 = Math.floor(time % 86400 % 3600 / 60);
            var s2 = time % 60;
            oSpan2.innerHTML = "距離" + cs3 + "還有：" +
                d2 + '天' + h2 + '時' + m2 + '分' + s2 + '秒';
        }
        oSpan2.style.color = "#" + num;
    };
    this.fn('s1', '2021-02-09 00:00:00', '2021年春節');
    this.fn('s2', '2021-04-03 00:00:00', '2021年清明節');
    this.fn('s3', '2021-05-01 00:00:00', '2021年勞動節');
    this.fn('s4', '2021-06-12 00:00:00', '2021年端午節');
    this.fn('s5', '2021-09-19 00:00:00', '2021年中秋節');
    this.fn('s6', '2021-10-01 00:00:00', '2021年國慶節');
    this.fn('s7', '2022-02-01 00:00:00', '2022年春節');
    (function () {
        window.setTimeout(() => {
            window.location.reload()
        }, 1000)
    })()

</script>