网页计时器

最新推荐文章于 2024-08-06 05:10:31 发布

原创最新推荐文章于 2024-08-06 05:10:31 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

javascript 同时被 2 个专栏收录

5 篇文章

订阅专栏

html

3 篇文章

订阅专栏

这篇博客介绍如何创建一个HTML页面，包含一个输入框用于输入日期，并使用JavaScript实现倒计时功能。用户可以输入指定日期，点击按钮后，程序会计算并实时显示当前时间与输入日期之间的剩余时间，直到倒计时结束。每秒更新剩余时间，当时间差为0时，倒计时停止。

要求：
在和上一任务同一目录下面创建一个task0002_2.html文件，在js目录中创建task0002_2.js，并在其中编码，实现一个倒计时功能。
1.界面首先有一个文本输入框，允许按照特定的格式YYYY-MM-DD输入年月日；
2.输入框旁有一个按钮，点击按钮后，计算当前距离输入的日期的00:00:00有多少时间差
3.在页面中显示，距离YYYY年MM月DD日还有XX天XX小时XX分XX秒
4.每一秒钟更新倒计时上显示的数，如果时差为0，则倒计时停止

html代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="text" id="txt" placeholder="YYYY-MM-DD" />
    <button id="btn" onclick =""></button>
    <div id="op"></div>
    <script src="task0002_2.js" charset="gbk"></script>
    <script>
        var txt = document.getElementById('txt');
        var op = document.getElementById('op');
        var btn = document.getElementById('btn');
        function show() {
            var clock = setInterval(cal, 100); //实现每秒更新
            var input = getInputTime();
            var nowtime = getNowTime();
            var res = input - nowtime;
            if (res <= 0) { var input = txt.value;
                var inputs = input.split('-');
                inputs[0] = parseInt(inputs[0]);
                inputs[1] = parseInt(inputs[1]);
                inputs[2] = parseInt(inputs[2]);
                var str = "距离" + inputs[0] + "年" + inputs[1] + "月" + inputs[2] + "日还有"  + "0天" + "0小时"  + "0分"  + "0秒";
                op.innerHTML = str;
                clearInterval(clock);//当倒数时间为0时停止计数

        }
        btn.addEventListener("click", show);
    </script>
</body>
</html>

JS代码：

function isLeapYear(y) {
    if ((y % 4 == 0 && y % 100 != 0) || (y % 100 == 0 && y % 400 == 0)) {
        return true;
    } else {
        return false;
    }
}
function getYearTime(y) { //获取公元元年到上一年的时间一共的秒数
    var res = 0;
    for (i = 1 ; i < y; i++) {
        if (isLeapYear(i)) { res = res + 31622400 }
        else { res = res + 31536000 }
    }
    return res;
}
function getMonthTime(y, m) { //获取今年到上个月的秒数
    var res = 0;
    if (isLeapYear(y)) {
        switch (m) {
            case 1:
                res = 0;
                break;
            case 2:
                res = 2678400;
                break;
            case 3:
                res = 5184000;
            case 4:
                res = 7862400;
            case 5:
                res = 10454400;
            case 6:
                res = 13132800;
            case 7:
                res = 15724800;
            case 8:
                res = 18403200;
            case 9:
                res = 21081600;
            case 10:
                res = 23673600;
            case 11:
                res = 26352000;
            case 12:
                res = 28944000;
        }
    }
    else {
        switch (m) {
            case 1:
                res = 0;
                break;
            case 2:
                res = 2678400;
                break;
            case 3:
                res = 5184000 - 86400;
            case 4:
                res = 7862400 - 86400;
            case 5:
                res = 10454400 - 86400;
            case 6:
                res = 13132800 - 86400;
            case 7:
                res = 15724800 - 86400;
            case 8:
                res = 18403200 - 86400;
            case 9:
                res = 21081600 - 86400;
            case 10:
                res = 23673600 - 86400;
            case 11:
                res = 26352000 - 86400;
            case 12:
                res = 28944000 - 86400;
        }
    }
    return res;
}
function getDayTime(d) { //获取这个月到昨天的秒数
    var res = 0;
    res = (d - 1) * 86400;
    return res;
}
function getHourTime(h) {// 获取今天到上一小时的秒数
    var res = h * 3600;
    return res;
}
function getMinTime(m) {//获取这一小时到上一分钟的秒数
    var res = m * 60;
    return res;
}
function getSecTime(s) { //获取秒数
    var res = s;
    return res;
}
function getNowTime() { //获取公元元年到现在的时间
    var now = new Date();
    var year = now.getFullYear();
    year = parseInt(year);
    var month = now.getMonth() + 1;
    month = parseInt(month);
    var day = now.getDate();
    day = parseInt(day);
    var hour = now.getHours();
    hour = parseInt(hour);
    var minutes = now.getMinutes();
    minutes = parseInt(minutes);
    var second = now.getSeconds();
    second = parseInt(second);
    var time = getYearTime(year) + getMonthTime(year, month) + getDayTime(day) + getHourTime(hour) + getMinTime(minutes) + getSecTime(second);
    return time;
}
function getInputTime() { //计算出输入数据的时间
    var input = txt.value;
    var inputs = input.split('-');
    inputs[0] = parseInt(inputs[0]);
    inputs[1] = parseInt(inputs[1]);
    inputs[2] = parseInt(inputs[2]);
    var iptime = getYearTime(inputs[0]) + getMonthTime(inputs[0], inputs[1]) + getDayTime(inputs[2]);
    return iptime;
}
function cal() { 
    var input = txt.value;
    var inputs = input.split('-'); //把输入数据按照年月日计算
    inputs[0] = parseInt(inputs[0]);
    inputs[1] = parseInt(inputs[1]);
    inputs[2] = parseInt(inputs[2]);
    var input = getInputTime();
    var nowtime = getNowTime();
    var res = input - nowtime;
    var d = res / 86400;
    d = parseInt(d);
    res = res % 86400;
    var h = res / 3600;
    h = parseInt(h);
    res = res % 3600;
    var min = res / 60;
    min = parseInt(min)
    res = res % 60;
    var s = res
    s = parseInt(s);
    var str = "距离" + inputs[0] + "年" + inputs[1] + "月" + inputs[2] + "日还有" + d + "天" + h + "小时" + min + "分" + s + "秒";
    op.innerHTML = str; //显示数据
}