倒计时(小时:分钟:秒钟)【JS原生代码】

    <style type="text/css">
        input {
            border: 1px solid rgba(0, 0, 0, 8);
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            /* 字体加粗 */
            width: 25px;
            height: 20px;
        }
    </style>
</head>

<body>
    hours:<input type="text" value="02" class="hours">
    minutes:<input type="text" value="00" class="minutes">
    seconds:<input type="text" value="00" class="seconds">

</body>

</html>

<script type="text/javascript">
    var hourNode = document.getElementsByClassName('hours')[0];
    var minuteNode = document.getElementsByClassName('minutes')[0];
    var secondNode = document.getElementsByClassName('seconds')[0];


    var hour = 2,         /* 小时 */
        minute = 0,    /* 分钟 */
        second = 0,     /* 秒钟 */
        time = 59;    /* 交换变量(当分钟为零的情况下调用)*/


    //计时器
    var timer = setInterval(function () {

        //判断分钟是否为零,如果为零调用交换变量
        if (minute != 0) {
            second--;
        } else {
            time--;
        }

        //秒钟重置和分钟减减
        if (second == 0) {
            second = 59;
            if (!minute == 0) {
                minuteNode.value = minute--;
            }
        }

        //分钟重置和时钟减减
        if (!hour == 0) {
            if (minute == 0) {
                minute = 59;
                hour--;
            }
        }

        //获取秒钟,并修饰代码[00:00:00](根据分钟是否为0判断,来为秒钟赋值)
        if (minute != 0) {
            if (second < 10) {
                secondNode.value = "0" + second;
            } else {
                secondNode.value = second;
            }
        } else {
            if (second < 10) {
                secondNode.value = "0" + time;
            } else {
                secondNode.value = time;
            }
        }

        //获取分钟,并修饰代码[00:00:00]
        if (minute < 10) {
            minuteNode.value = "0" + minute;
        } else {
            minuteNode.value = minute;
        }

        //获取小时,并修饰代码[00:00:00]
        if (hour < 10) {
            hourNode.value = "0" + hour;
        } else {
            hourNode.value = hour;
        }

        //停止
        if (time == 0) {
            secondNode.value = "0" + time;//改变最后一秒的格式[00:00:00]
            clearInterval(timer);
        }

    }, 1000);

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值