JS倒计时

最新推荐文章于 2024-07-14 15:54:59 发布

xw1985520

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量263

点赞数

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

JAVASCRIPT 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <meta charset="utf-8">
        <title>显示系统时间</title>
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
        <div id="container">
            <h2>当前时间为：</h2>
            <h3 id="current">显示当前时间时间</h3>
            <h2>距离2017年1月1日还有：</h2>
            <h3 id="deadline">显示倒计时</h3>
        </div>
    <script src="js/script.js"></script>
    </body>
</html>

#container {
    width:300px;
    margin:50px auto;
}

#container h3:nth-of-type(1) {
    color:cyan;
    margin-bottom:50px;
}


#container h3:nth-of-type(2) {
    color:red;
    height:50px;
    line-height:50px;
    font-size:24px;
}

window.onload = function() {
    showCurrentTime();
    showEndTime();
};

function checkTime(i) {
    if(i < 10) {
        i = "0" + i;
    }
    return i;
}

function showCurrentTime() {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();
    var d = now.getDay();
    var hour = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();

    hour = checkTime(hour);
    min = checkTime(min);
    sec = checkTime(sec);

    var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

    var show = document.getElementById("current");
    var time = year + "年" + month + "月" + day + "日 " + weekday[d] + " " + hour + ":" + min + ":" + sec;
    show.innerHTML = time;
    //将setTimeout写在showTime内部，这是一个递归调用
    setTimeout(showCurrentTime, 1000);
};

//如果要将时间更新写在showTime外部，则需要setInterval方法
// setInterval(showTime, 1000);

function showEndTime() {
    var now = new Date();
    var deadline = new Date(2017, 0, 1);//->修改你需要的时间 其中月份少一个月
    var left_time = parseInt((deadline.getTime() - now.getTime()) / 1000);
    var day = parseInt(left_time / (60 * 60 * 24));
    var hour = parseInt(left_time / (60 * 60) % 24);
    var min = parseInt(left_time / 60 % 60);
    var sec = parseInt(left_time % 60);

    day = checkTime(day);
    hour = checkTime(hour);
    min = checkTime(min);
    sec = checkTime(sec);

    var time = day + "天 " + hour + "时 " + min + "分 " + sec + "秒";
    var show = document.getElementById("deadline");

    if(left_time < -60*60*24) {
        show.innerHTML = "时间已过！"
    } else if(left_time < 0) {
        show.innerHTML = "就是今天！"
    } else {
        show.innerHTML = time;
    }
    setTimeout(showEndTime, 1000);
}

xw1985520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS倒计时

<html> <head> <meta charset="utf-8"> <title>显示系统时间</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <h2>当前
复制链接

扫一扫