使用Vanilla框架制作时间倒数器 ——JavaScript

一、制作时间倒数器要求以及思路：

   1.首先创建三个输入字段，分别是小时，分钟和秒，以及“开始”按钮。输入的初始值必须为0h 5m 0s。当用户输入小时，分钟和秒并单击“开始”按钮倒数计时器应开始工作时，“开始”按钮必须处于隐藏状态，并且您应显示“暂停”，“停止”和“重置”按钮。

  2.当单击“暂停”按钮时，计时器必须暂停，并且“暂停”按钮的文本必须通过“恢复”进行更改。
当用户单击“继续”按钮时，倒数计时器继续工作，“继续”文本再次变为“暂停”。当单击停止时，计时器必须停止，并且仅显示单个按钮启动。输入的值必须再次更改为0h 5m 0s。
当单击重置时，计时器应从用户输入的值重新开始倒计时过程。
例如：如果用户输入的值是1小时22分33秒，然后单击“开始”按钮，并且10秒钟后（当计时器显示1小时22分23秒），则单击“重置”，则计时器应从1小时22分33秒开始重新工作。

      3. 对输入和按钮使用引导样式

 

效果如下：

 

 

 

二、代码实现
   1.创建index.html文件，在bootstrap.com网站上复制CSS和JS代码粘贴到index.html

1 /*css代码*/
2  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
3  
4 /*JS代码*/
5   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

index.html文件代码如下：

 1  <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>时间倒数器</title>
 7     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 8     <link rel="stylesheet" href="app.css">
 9 </head>
10 <body>
11     
12     <div id="main">
13         <div class="d-flex mb-3 inputs">
14             <div class="form-group">
15                 <input id="hours" class="form-control form-control-lg" type="number" min=0 value="0" name="hours" />h
16             </div>
17             <div class="form-group">
18                 <input id="minutes" class="form-control form-control-lg" type="number" min=0 value="5" name="minutes">m
19             </div>
20             <div class="form-group">
21                 <input id="seconds" class="form-control form-control-lg" type="number" min=0 value="0" name="seconds">s
22             </div>
23         </div>
24         <div class="d-flex buttons justify-content-center">
25             <button class="btn btn-outline-primary btn-start-resume">Start</button> <!--开始按钮-->
26             <button class="btn btn-outline-primary btn-pause">Pause</button><!--暂停按钮-->
27             <button class="btn btn-outline-primary btn-stop">Stop</button><!--停止按钮-->
28             <button class="btn btn-outline-primary btn-reset">Reset</button><!--重启按钮-->
29         </div>
30     </div>
31 
32     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
33     <script src="app.js"></script>
34 </body>
35 </html>

2.创建app.js文件，代码如下

 1 const hoursEl = document.querySelector('#hours');
 2 const minutesEl = document.querySelector('#minutes');
 3 const secondsEl = document.querySelector('#seconds');
 4 const btnStart = document.querySelector('.btn-start-resume');
 5 const btnPause = document.querySelector('.btn-pause');
 6 const btnStop = document.querySelector('.btn-stop');
 7 const btnReset = document.querySelector('.btn-reset');
 8 let interval;
 9 let pause = false;
10 let totalSeconds = 0;
11 let totalSecondsBackup = 0;
12 
13 init();
14 
15 function init() {
16     btnPause.style.display = 'none';
17     btnStop.style.display = 'none';
18     btnReset.style.display = 'none';
19 
20 
21     btnStart.addEventListener('click', () => {
22         const hours = parseInt(hoursEl.value);
23         const minutes = parseInt(minutesEl.value);
24         const seconds = parseInt(secondsEl.value);
25 
26         totalSecondsBackup = totalSeconds = hours * 60 * 60 + minutes * 60 + seconds;
27         if (totalSeconds < 0) {
28             return;
29         }
30 
31         startTimer();
32 
33         btnPause.style.display = 'inline-block';
34         btnStop.style.display = 'inline-block';
35         btnReset.style.display = 'inline-block';
36         btnStart.style.display = 'none';
37     });
38 
39     btnPause.addEventListener('click', () => {
40         pause = !pause;
41         if (pause) {
42             btnPause.innerText = 'Resume';
43         } else {
44             btnPause.innerText = 'Pause';
45         }
46     })
47 
48     btnStop.addEventListener('click', () => {
49         stopTimer();
50         totalSeconds = totalSecondsBackup;
51         pause = false;
52         updateInputs();
53 
54         btnPause.style.display = 'none';
55         btnStop.style.display = 'none';
56         btnReset.style.display = 'none';
57         btnStart.style.display = '';
58     })
59 
60     btnReset.addEventListener('click', () => {
61         totalSeconds = totalSecondsBackup;
62         updateInputs();
63     })
64 }
65 
66 function startTimer() {
67     interval = setInterval(() => {
68 
69         if (pause) return;
70         totalSeconds--;
71         updateInputs();
72 
73         if (totalSeconds <= 0) {
74             stopTimer();
75         }
76     }, 1000)
77 }
78 
79 function stopTimer() {
80     interval = clearInterval(interval);
81 }
82 
83 function updateInputs() {
84     const hours = Math.floor(totalSeconds / 60 / 60);
85     const minutes = Math.floor(totalSeconds / 60);
86     const seconds = totalSeconds % 60;
87 
88     hoursEl.value = hours;
89     minutesEl.value = minutes;
90     secondsEl.value = seconds;
91 }

3.创建app.css文件，文件代码如下

 1 body {
 2     padding: 50px;
 3 }
 4 
 5 .inputs {
 6     justify-content: center;
 7 }
 8 .inputs .form-control {
 9     margin: 0 10px;
10 }
11 
12 .inputs .form-group {
13     display: inline-flex;
14     margin: 0 15px;
15     align-items: flex-end;
16 }
17 
18 .buttons .btn{
19     margin: 0 15px;
20 }

 

posted @ 2021-04-15 22:33  拿铁玩编程  阅读(222)  评论(0)  编辑  收藏  举报