JavaScript简单倒计时

demo视频演示

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timertitle>
    <style>
        body{
            height: 400px;
            width: 305px;
            margin: 0 auto;
            margin-top: 200px;
        }
        .header{
            width: 304px;
            height: 20px;
        }
        .box{
            margin-top: 20px;
            width: 304px;
            height: 104px;
            border: 2px solid #000000;
            box-sizing: border-box;
        }
        .hour,
        .minute,
        .second,
        .point{
            float: left;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .hour,
        .minute,
        .second{
            width: 80px;
            height: 100px;
            font-size: 30px;
        }
        input{
            height: 20px;
            width: 74px;
        }
        .point{
            font-size: 30px;
            float: left;
            width: 30px;
            height: 100px;
        }
    style>
head>
<body>
    <div class="header">
        <input type="number" min ="0" max="23" placeholder="小时" value="0" id="hour">
        <input type="number" min ="0" max="59"  placeholder="分钟" value="0" id="minute">
        <input type="number" min ="0" max="59" placeholder="秒" value="0" id="second">
        <button disabled>开始button>
    div>
    <div class="box">
        <div class="hour">0div>
        <div class="point">:div>
        <div class="minute">0div>
        <div class="point">:div>
        <div class="second">0div>
    div>
    <script>
        let btn=document.querySelector("button");
        let hour=document.querySelector(".hour");
        let minute=document.querySelector(".minute");
        let second=document.querySelector(".second");
        btn.disabled=false;
        btn.addEventListener("click",function(){
            let inputHour=parseInt(document.querySelector("#hour").value);
            let inputMinute=parseInt(document.querySelector("#minute").value);
            let inputSecond=parseInt(document.querySelector("#second").value);
           if(inputHour<24&&inputMinute<60&&inputSecond<60){
            btn.disabled=true;
            let timer=setInterval(function(){
                hour.innerHTML=`${inputHour}`;
                minute.innerHTML=`${inputMinute}`;
                second.innerHTML=`${inputSecond}`;
                if(inputMinute===0&&inputHour===0&&inputSecond===0){
                    clearInterval(timer);
                    btn.disabled=false;
                }
                else if(inputSecond===0&&inputMinute>0){
                    inputMinute--;
                    inputSecond=59;
                }
                else if(inputMinute===0&&inputHour>0&&inputSecond===0){
                    inputHour--;
                    inputMinute=59;
                    inputSecond=59;
                }
                inputSecond--;
            },1000);
           }else{
            alert("输入的数字不符合时间设定，请重新输入");
           }
        });
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

相关阅读:
【docker-compose 跨节点部署 kafka-kraft SASL用户加密集群】全网最新！
微服务开发中，使用AOP和自定义注解实现对权限的校验
MySQL——五、库表操作（上篇）
JDK动态代理Demo
基于SSM的公司项目管理系统设计与实现
Linux-----nginx的简介，nginx搭载负载均衡以及nginx部署前后端分离项目
[免费专栏] Android安全之ZIP文件目录遍历漏洞
SpringMVC基础：配置视图解析器和控制器
开源模型应用落地-工具使用篇-向量数据库进阶（四）
数字疗法009 | “接受”还是“拒绝”？心理治疗背后的数字干预

原文地址：https://blog.csdn.net/hssf_xxy/article/details/126206300