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

最新推荐文章于 2024-05-18 09:53:20 发布

拿铁玩编程

最新推荐文章于 2024-05-18 09:53:20 发布

阅读量248

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/Evelyn_index/article/details/115742019

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

   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

/*css代码*/
 <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">

/*JS代码*/
  <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文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间倒数器</title>
    <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">
    <link rel="stylesheet" href="app.css">
</head>
<body>

    <div id="main">
        <div class="d-flex mb-3 inputs">
            <div class="form-group">
                <input id="hours" class="form-control form-control-lg" type="number" min=0 value="0" name="hours" />h
            </div>
            <div class="form-group">
                <input id="minutes" class="form-control form-control-lg" type="number" min=0 value="5" name="minutes">m
            </div>
            <div class="form-group">
                <input id="seconds" class="form-control form-control-lg" type="number" min=0 value="0" name="seconds">s
            </div>
        </div>
        <div class="d-flex buttons justify-content-center">
            <button class="btn btn-outline-primary btn-start-resume">Start</button> <!--开始按钮-->
            <button class="btn btn-outline-primary btn-pause">Pause</button><!--暂停按钮-->
            <button class="btn btn-outline-primary btn-stop">Stop</button><!--停止按钮-->
            <button class="btn btn-outline-primary btn-reset">Reset</button><!--重启按钮-->
        </div>
    </div>

    <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>
    <script src="app.js"></script>
</body>
</html>

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

const hoursEl = document.querySelector('#hours');
const minutesEl = document.querySelector('#minutes');
const secondsEl = document.querySelector('#seconds');
const btnStart = document.querySelector('.btn-start-resume');
const btnPause = document.querySelector('.btn-pause');
const btnStop = document.querySelector('.btn-stop');
const btnReset = document.querySelector('.btn-reset');
let interval;
let pause = false;
let totalSeconds = 0;
let totalSecondsBackup = 0;

init();

function init() {
    btnPause.style.display = 'none';
    btnStop.style.display = 'none';
    btnReset.style.display = 'none';


    btnStart.addEventListener('click', () => {
        const hours = parseInt(hoursEl.value);
        const minutes = parseInt(minutesEl.value);
        const seconds = parseInt(secondsEl.value);

        totalSecondsBackup = totalSeconds = hours * 60 * 60 + minutes * 60 + seconds;
        if (totalSeconds < 0) {
            return;
        }

        startTimer();

        btnPause.style.display = 'inline-block';
        btnStop.style.display = 'inline-block';
        btnReset.style.display = 'inline-block';
        btnStart.style.display = 'none';
    });

    btnPause.addEventListener('click', () => {
        pause = !pause;
        if (pause) {
            btnPause.innerText = 'Resume';
        } else {
            btnPause.innerText = 'Pause';
        }
    })

    btnStop.addEventListener('click', () => {
        stopTimer();
        totalSeconds = totalSecondsBackup;
        pause = false;
        updateInputs();

        btnPause.style.display = 'none';
        btnStop.style.display = 'none';
        btnReset.style.display = 'none';
        btnStart.style.display = '';
    })

    btnReset.addEventListener('click', () => {
        totalSeconds = totalSecondsBackup;
        updateInputs();
    })
}

function startTimer() {
    interval = setInterval(() => {

        if (pause) return;
        totalSeconds--;
        updateInputs();

        if (totalSeconds <= 0) {
            stopTimer();
        }
    }, 1000)
}

function stopTimer() {
    interval = clearInterval(interval);
}

function updateInputs() {
    const hours = Math.floor(totalSeconds / 60 / 60);
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;

    hoursEl.value = hours;
    minutesEl.value = minutes;
    secondsEl.value = seconds;
}

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

body {
    padding: 50px;
}

.inputs {
    justify-content: center;
}
.inputs .form-control {
    margin: 0 10px;
}

.inputs .form-group {
    display: inline-flex;
    margin: 0 15px;
    align-items: flex-end;
}

.buttons .btn{
    margin: 0 15px;
}

拿铁玩编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Vanilla框架制作时间倒数器 ——JavaScript

一、制作时间倒数器要求以及思路： 1.首先创建三个输入字段，分别是小时，分钟和秒，以及“开始”按钮。输入的初始值必须为0h 5m 0s。当用户输入小时，分钟和秒并单击“开始”按钮倒数计时器应开始工作时，“开始”按钮必须处于隐藏状态，并且您应显示“暂停”，“停止”和“重置”按钮。2.当单击“暂停”按钮时，计时器必须暂停，并且“暂停”按钮的文本必须通过“恢复”进行更改。当用户单击“继续”按钮时，倒数计时器继续工作，“继续”文本再次变为“暂停”。当单击停止时，计时器必须停止，并且仅显示单个按钮启动。...
复制链接

扫一扫