JavaScript实现简单倒计时

最新推荐文章于 2024-08-30 20:29:15 发布

Adorable_Rocy

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量120

点赞数 1

分类专栏： js 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_43409994/article/details/112031202

版权

JavaScript 倒计时 div布局定时器 setInterval

关键词由CSDN通过智能技术生成

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript实现简单倒计时

- - 1.简单div布局
  - 2.功能实现

1.简单div布局

  				     <div class="time">
                        <span>0</span>
                        <span class="hour">0</span>
                        <span>:</span>
                        <span class="hour">0</span>
                        <span class="hour">0</span>
                        <span>:</span>
                        <span class="hour">0</span>
                        <span class="hour">0</span>
                     </div>

在这里插入图片描述

2.功能实现

实现思路：1：60：60，定义好时分秒的递减条件，即可完成倒计时功能（原生逻辑实现）

 var spins = document.querySelector('.time');
    console.log(spins)
    var box = spins.getElementsByClassName('hour')

    var hour_0 = 1;
    var min_1 = 5
    var min_0 = 9
    var sex_1 = 5
    var sex_0 = 9

    var ivt = setInterval(function() {
        box[0].innerHTML = hour_0
        box[1].innerHTML = min_1
        box[2].innerHTML = min_0
        box[3].innerHTML = sex_1
        box[4].innerHTML = sex_0

        sex_0--
        if (sex_0 == -1) {
            sex_0 = 9
            sex_1--
        }

        if (sex_1 == -1) {
            sex_1 = 5
            min_0--
        }

        if (min_0 == -1) {
            min_0 = 9
            min_1--
        }

        if (min_1 == -1) {
            min_1 = 5
            hour_0--
        }

        if (hour_0 == -1) {
            hour_0 = 0
            clearInterval(ivt)
        }

    }, 1000)