使用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 }
使用Vanilla框架制作时间倒数器 ——JavaScript的更多相关文章
- 表单（下）-EasyUI Spinner 微调器、EasyUI Numberspinner 数值微调器、EasyUI Timespinner 时间微调器、EasyUI Slider 滑块
EasyUI Spinner 微调器 扩展自 $.fn.validatebox.defaults.通过 $.fn.spinner.defaults 重写默认的 defaults. 微调器(spinne ...
- 使用AVPlayer制作一个播放器
代码地址如下:http://www.demodashi.com/demo/11685.html AVPlayer 是一个强大的视频播放器,可以播放多种格式的视频,缺点是没有控制界面,需要自己去实现. ...
- [Swift通天遁地]一、超级工具-(18)创建强大、灵活的日期时间拾取器
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- UIDatePicker 日期/时间选取器(滚轮)—IOS开发
UIDatePicker 是一个控制器类,封装了 UIPickerView,但是他是UIControl的子类,专门用于接受日期.时间和持续时长的输入.日期选取器的各列会按照指定的风格进行自动配置,这样 ...
- IOS开发—UIDatePicker 日期/时间选取器(滚轮)
UIDatePicker 是一个控制器类,封装了 UIPickerView,但是他是UIControl的子类,专门用于接受日期.时间和持续时长的输入.日期选取器的各列会按照指定的风格进行自动配置,这样 ...
- 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果
利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...
- 八、mysql视图、存储过程、函数以及时间调度器
.create or replace view emp_view as select * from t4 ;给t4表创建一个名为emp_view的视图 .drop view emp_view 删除视图 ...
- 利用Bootstrap框架制作查询页面的界面
UI设计实战篇——利用Bootstrap框架制作查询页面的界面 Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...
- java自定义注解知识实例及SSH框架下，拦截器中无法获得java注解属性值的问题
一.java自定义注解相关知识 注解这东西是java语言本身就带有的功能特点,于struts,hibernate,spring这三个框架无关.使用得当特别方便.基于注解的xml文件配置方式也受到人们的 ...
随机推荐
- 破除区块链支付壁垒，NGK支付架构方案浮出水面
什么叫做区块链支付?区块链支付系统与传统支付系统有哪些不同?简要地说,原来传统的支付系统是有一个类似于银行的中间平台存在的,用户们的支付交易第一时间是寄存在平台,由平台核实验证交易行为之后,方才放行交 ...
- 人物传记JULLIAN MURPHY：投资哪家强，区块链必然＞股票+房地产
今年上半年在金融股市出现巨大波动的时候,星盟的项目审核经理JULLIAN MURPHY发现了一个有趣的现象:各种熔断和暴跌的背后,特斯拉的股票却从去年年末开始至今已经暴涨了12倍,即便中途有所回落,但 ...
- django学习-12.访问不同url/接口地址实现对指定数据的增删改查功能
1.前言 通过前面博客[django学习-10.django连接mysql数据库和创建数据表]里的操作,我们已经成功在数据库[hongjingsheng_project]里创建了一张数据表[hello ...
- 国内源安装ROS2
资料参考: https://www.mscto.com/op/428870.html 需要修正的一点是,使用如下的命令添加源: sudo sh -c 'echo "deb [arch=$(d ...
- .NET 云原生架构师训练营（模块二 基础巩固 安全）--学习笔记
2.8 安全 认证 VS 授权 ASP .NET Core 认证授权中间件 认证 JWT 认证 授权 认证 VS 授权 认证是一个识别用户是谁的过程 授权是一个决定用户可以干什么的过程 401 Una ...
- 2.5w字 + 36 张图爆肝操作系统面试题，太牛逼了！
欢迎各位大佬访问我的 github ,跪求 star bestJavaer 大家好,我是 cxuan,我之前汇总了一下关于操作系统的面试题,最近又重新翻阅了一下发现不是很全,现在也到了面试季了,所以我 ...
- [个人总结]pytorch中用checkpoint设置恢复，在恢复后的acc上升
原因是因为checkpoint设置好的确是保存了相关字段.但是其中设置的train_dataset却已经走过了epoch轮,当你再继续训练时候,train_dataset是从第一个load_data开 ...
- 爬虫必知必会（7）_scrapy框架高级
一.请求传参 实现深度爬取:爬取多个层级对应的页面数据 使用场景:爬取的数据没有在同一张页面中 在手动请求的时候传递item:yield scrapy.Request(url,callback,met ...
- FreeBSD 宣布 2020 年第 4 季度状态报告
FreeBSD 宣布 2020 年第 4 季度状态报告● 继续努力从 FreeBSD 基本系统中移除 GPL 协议的软件,以实现 FreeBSD 项目基本目标.● Linux 二进制兼容层的 Linu ...
- C# 应用 - 多线程 2) Thread 和 ThreadPool
IEnumerable<int> intList = Enumerable.Range(1, 15); foreach (int i in intList) { ThreadPool.Qu ...