JS时间倒计时

逃离我推掉我的手 2022-04-24 04:44 296阅读 0赞

# [JS时间倒计时][JS] #

HTML

<div class="con">
            <div class="time">
                选取时间 <input type="datetime-local" name="user_date">
                <div class="timeresult">目标时间：<span></span></div>
            </div>
            <div class="count">
                <div class="btn">计算倒计时</div>
                <div class="nowtime">当前时间：<span></span></div>
                <div class="result">倒计时：<span></span></div>
            </div>
            <div class="start">开始</div>
            <div class="end">结束</div>
        </div>

CSS

body {
          
        background-color:#000;
        color:#fff;
    }
    .con {
          
        padding:20px;
    }
    .time {
          
        height:100px;
        line-height:50px;
    }
    .timeresult {
          
        height:50px;
        line-height:50px;
    }
    .count {
          
        height:150px;
        line-height:50px;
    }
    .start {
          
        width:50px;
        height:25px;
        border-radius:5px;
        float:left;
        margin-right:10px;
        background-color:#333;
        text-align:center;
        line-height:25px;
        cursor:pointer;
    }
    .end {
          
        width:50px;
        height:25px;
        border-radius:5px;
        float:left;
        background-color:#333;
        text-align:center;
        line-height:25px;
        cursor:pointer;
    }

// 选择的时间
    var time;
    // 中间变量，传递时间
    var temp;
    // 中间变量，传递时间差值
    var tempsub;
    // 当前时间
    var timenow;
    // 时间差
    var sub;
    $("input").on("blur", function() {
        if ($("input").val() === "") {
            time = "请选择完整时间"
        } else {
            sub = new Date($("input").val()) - new Date();
            if (sub <= 0) {
                time = "请选择大于当前时间"
            } else {
                gettimenow($("input").val());
                // 函数获取的结果赋值给time
                time = temp;
            }
        }
        $(".timeresult span").html(time);
    })
    // 点击开始，开启定时器
    $(".start").on("click", function() {
        timer = setInterval(function() {
            // 获取当前时间
            gettimenow();
            // 当前时间渲染
            $(".nowtime span").html(temp);
    
            // 获取时间差
            sub = new Date($("input").val()) - new Date();
            // 判断时间差
            if (sub <= 0) {
                tempsub = "选择时间小于当前时间"
            } else if (isNaN(sub)) {
                tempsub = "选择时间未选择完整"
            } else {
                gettimesub(sub);
            }
            // 渲染时间差
            $(".result span").html(tempsub);
        }, 1000);
    
    })
    // 点击结束，清除定时器
    $(".end").on("click", function() {
        clearInterval(timer);
    })
    // 获取时间
    function gettimenow(val) {
        var datetemp;
        if (val === "" || val == null || val == undefined) {
            datetemp = new Date();
        } else {
            datetemp = new Date(val);
        }
        var year = datetemp.getFullYear();
        var month = datetemp.getMonth() + 1;
        var date = datetemp.getDate();
        var hour = datetemp.getHours();
        var minute = datetemp.getMinutes();
        var second = datetemp.getSeconds();
        if (month < 10) {
            month = "0" + month
        }
        if (date < 10) {
            date = "0" + date
        }
        if (hour < 10) {
            hour = "0" + hour
        }
        if (minute < 10) {
            minute = "0" + minute
        }
        if (second < 10) {
            second = "0" + second
        }
        temp = year + "年" + month + "月" + date + "日" + " " + hour + ":" + minute + ":" + second;
    };
    // 计算倒计时时间
    function gettimesub(sub) {
        // 天数
        var days = Math.floor(sub / (24 * 3600 * 1000));
        // 小时
        var leave1 = sub % (24 * 3600 * 1000);
        var hours = Math.floor(leave1 / (3600 * 1000));
        if (hours < 10) {
            hours = "0" + hours;
        }
        // 分钟
        var leave2 = leave1 % (3600 * 1000);
        var minutes = Math.floor(leave2 / (60 * 1000));
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        // 秒
        var leave3 = leave2 % (60 * 1000);
        var seconds = Math.round(leave3 / 1000);
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        console.log(sub);
        tempsub = days + "天 " + hours + "时 " + minutes + "分 " + seconds + "秒";
    
    }

效果图：

![650351-20190124161042727-675386514.png][]

posted @ 2019-01-24 16:11 [波霸38][38] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

[JS]: https://www.cnblogs.com/sharing1986687846/p/10315078.html
[650351-20190124161042727-675386514.png]: /images/20220219/db2f23f18c254f4eba6ae8ef11972a68.png
[38]: https://www.cnblogs.com/sharing1986687846/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=10315078