js实现简单的倒计时功能

努力敲代码ing

已于 2023-04-01 17:24:45 修改

阅读量1.3k

点赞数 1

分类专栏： js 文章标签： javascript css html css3 前端

于 2023-04-01 16:29:22 首次发布

本文链接：https://blog.csdn.net/weixin_43430432/article/details/129898983

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该文章展示了一个使用HTML、CSS和JavaScript实现的倒计时功能，用户可以输入目标的年月日，点击开始按钮后，页面会显示从当前时间到所输入日期的剩余天数、小时、分钟和秒。JavaScript代码中包含了对用户输入的处理、时间戳的计算以及定时更新倒计时的方法。

摘要由CSDN通过智能技术生成

使用Date内置对象实现一个简单的倒计时，用户输入目标年月日，点击开始可以看到剩余时间。新手练习，欢迎大家讨论并指出错误。注意不可以输入当前时间之前的时间
效果如图
在这里插入图片描述

html代码如下

<!-- 倒计时 -->
    <div class="daojishi">
        <h2>倒计时</h2>
        <div class="shuru">
            请输入:
            <input type="text">年
            <input type="text">月
            <input type="text">日
        </div>
        <div class="begin">开始</div>
        <div class="shengyu">现在距离-<em>0000</em>-还剩:</div>
        <div class="juti">
            <b class="on">00</b>天
            <b class="on">00</b>小时
            <b class="on">00</b>分钟
            <b class="on">00</b>秒
        </div>
    </div>

css代码如下

.daojishi {
            width: 700px;
            height: 420px;
            background-color: #9e9e9e;
            margin: auto;
        }

        h2 {
            margin: auto;
            text-align: center;
            margin-bottom: 20px;
            font-size: 28px;
        }

        .shuru {
            margin: auto;
            text-align: center;
            font-size: 16px;
        }

        .begin {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            background-color: #1e1e1e;
            color: white;
            margin: auto;
            font-size: 24px;
            cursor: pointer;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        .shengyu {
            text-align: center;
            font-size: 22px;
        }

        .juti {
            text-align: center;
            font-size: 22px;
            margin-top: 20px;
        }

        .on {
            color: rgba(255, 0, 0, 0.748);
        }

js代码如下

// 倒计时
        // 获取
        var input = document.getElementsByTagName('input');
        var begin = document.getElementsByClassName('begin')[0];
        var em = document.getElementsByTagName('em')[0];
        var on = document.getElementsByClassName('on');

        // begin点击事件
        begin.onclick = function () {
             //定时器，一秒变一下
           setInterval(function(){
             // 获取取到的年月日 补0
             var year = input[0].value;
            year = year < 10 ? '0' + year : year;
            var month = input[1].value;
            month = month < 10 ? '0' + month : month;
            var date = input[2].value;
            date = date < 10 ? '0' + date : date;
            // 输入的日期赋给em
            em.innerText = year + '年' + month + '月' + date + '日';
            console.log(em);
            // 创建data1对象，输入的时间转换为时间戳
            var date1 = new Date(year + '-' + month + '-' + date);
            console.log(date1);
            var date1c = +new Date(date1);
            console.log(date1c);
            // 获取当前时间戳
            var date2c = +new Date();
            console.log(date2c);
            // 时间戳相减 注意要除以1000转为秒
            var datecc = (date1c - date2c) / 1000;
            // 得到的结果转换为天时分秒，注意补0
            var d = parseInt(datecc / 60 / 60 / 24);
            var h = parseInt(datecc / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            var m = parseInt(datecc / 60 % 60);
            m = m < 10 ? '0' + m : m;
            var s = parseInt(datecc % 60);
            s = s < 10 ? '0' + s : s;
            // 赋给结果
            on[0].innerText = d;
            on[1].innerText = h;
            on[2].innerText = m;
            on[3].innerText = s;
           },1000)
        }