js 倒计时

来源：互联网发布：防止电脑安装软件编辑：程序博客网时间：2024/05/29 07:31
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <title>Document</title>    <link rel="stylesheet" href="./css/base.css">    <link rel="stylesheet" href="./css/list.css">    <style>    div ul{        width: 900px;        text-align: center;    }        div ul li{            float: left;            width: 100px;            height: 100px;            background: #000;            color: #fff;            line-height: 100px;            font-size: 36px;            margin: 0 5px;        }        .cur{            background: none;            color: #000;        }    </style></head><body>    <div>        <ul>            <li></li>            <li></li>            <li class="cur">:</li>            <li></li>            <li></li>            <li class="cur">:</li>            <li></li>            <li></li>        </ul>    </div></body></html><script>var liArr = document.querySelectorAll("ul li");window.onload = function () {    interTime();    function interTime() {        var totalTime =  3;        var totalSec = totalTime * 3600;        var timeId = setInterval(function () {            if (totalSec <= 0) {                clearInterval(timeId);            }            totalSec --;            var hour = Math.floor(totalSec / 3600);            var minute = Math.floor(totalSec % 3600 / 60);            var sec = totalSec % 60;                liArr[0].innerHTML = Math.floor(hour / 10);                liArr[1].innerHTML = hour % 10;                liArr[3].innerHTML = Math.floor(minute / 10);                liArr[4].innerHTML = minute % 10;                liArr[6].innerHTML = Math.floor(sec / 10);                liArr[7].innerHTML = sec % 10;                    if(sec % 10 === 1){                        liArr[7].style.background ="orange";                    }else if(sec % 10 === 2){                        liArr[7].style.background ="red";                    }else {                        liArr[7].style.background ="black";                    }        }, 1000);    }}</script>
阅读全文
0 0