网页计时器

最新推荐文章于 2024-09-11 22:45:35 发布

Genius_S_

最新推荐文章于 2024-09-11 22:45:35 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.csdn.net/Genius_S_/article/details/47258607

版权

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

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

要求：
在和上一任务同一目录下面创建一个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