正文

学会JS计时显示：轻松掌握网页倒计时、秒表和计时器技巧

/0 浏览量
0405

在网页设计中，计时器是一个非常有用的功能，它可以用来创建倒计时、秒表或普通的计时器。JavaScript（简称JS）提供了强大的功能来实现这些功能。以下，我将一步步教你如何轻松掌握网页倒计时、秒表和计时器的制作技巧。

一、基础知识准备

在开始之前，确保你已熟悉以下JavaScript基础：

  • 变量与数据类型
  • 控制流程（如if语句、循环）
  • 事件处理
  • DOM操作

二、倒计时

2.1 基本概念

倒计时通常用于展示某个事件即将发生的时间，例如一个活动的开始时间。

2.2 实现步骤

  1. HTML结构：定义一个用于显示倒计时的容器。

    <div id="countdown">00:00:00:00</div>

  2. CSS样式：根据需要添加样式。

    #countdown {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

  3. JavaScript代码：

    • 定义目标时间（例如，活动开始的时间）。
    • 计算当前时间和目标时间的差值。
    • 使用setInterval函数每隔一秒更新倒计时。
    function startCountdown(targetTime) {
    const countdownElement = document.getElementById('countdown');
    const now = new Date();
    const difference = targetTime - now;


    if (difference <= 0) {
        countdownElement.textContent = '00:00:00:00';
        return;
    }


    let days = Math.floor(difference / (1000 * 60 * 60 * 24));
    let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((difference % (1000 * 60)) / 1000);


    countdownElement.textContent = 
        (days > 0 ? days + '天 ' : '') + 
        (hours < 10 ? '0' + hours : hours) + ':' + 
        (minutes < 10 ? '0' + minutes : minutes) + ':' + 
        (seconds < 10 ? '0' + seconds : seconds);
}


// 设置目标时间，例如2023年12月31日23:59:59
const targetDate = new Date('2023-12-31T23:59:59').getTime();
setInterval(() => startCountdown(targetDate), 1000);

三、秒表

3.1 基本概念

秒表用于测量经过的时间，通常具有开始、停止和重置功能。

3.2 实现步骤

  1. HTML结构：定义显示时间的容器以及控制按钮。

    <div id="stopwatch">
    <div id="display">00:00:00</div>
    <button onclick="startStopwatch()">开始</button>
    <button onclick="stopStopwatch()">停止</button>
    <button onclick="resetStopwatch()">重置</button>
</div>

  2. CSS样式：添加样式。

    #stopwatch {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
#display {
    margin-bottom: 20px;
}
button {
    margin: 0 5px;
}

  3. JavaScript代码：

    • 使用变量存储开始时间、当前时间和经过的时间。
    • 使用setInterval更新显示时间。
    • 实现开始、停止和重置功能。
    let startTime = 0;
let elapsedTime = 0;
let stopwatchInterval;


function startStopwatch() {
    if (startTime === 0) {
        startTime = new Date().getTime() - elapsedTime;
    }
    stopwatchInterval = setInterval(updateDisplay, 100);
}


function stopStopwatch() {
    clearInterval(stopwatchInterval);
    elapsedTime = new Date().getTime() - startTime;
}


function resetStopwatch() {
    clearInterval(stopwatchInterval);
    startTime = 0;
    elapsedTime = 0;
    document.getElementById('display').textContent = '00:00:00';
}


function updateDisplay() {
    const now = new Date().getTime();
    elapsedTime = now - startTime;
    let hours = Math.floor((elapsedTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);


    document.getElementById('display').textContent = 
        (hours < 10 ? '0' + hours : hours) + ':' + 
        (minutes < 10 ? '0' + minutes : minutes) + ':' + 
        (seconds < 10 ? '0' + seconds : seconds);
}

四、计时器

4.1 基本概念

计时器用于测量经过的时间，与秒表类似，但通常不提供停止功能。

4.2 实现步骤

  1. HTML结构：定义显示时间的容器以及设置计时器的输入框和开始按钮。

    <div id="timer">
    <input type="number" id="timerInput" placeholder="输入时间（秒）">
    <button onclick="setTimer()">设置</button>
    <div id="timerDisplay">00:00</div>
</div>

  2. CSS样式：添加样式。

    #timer {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
#timerInput {
    margin: 0 5px;
}

  3. JavaScript代码：

    • 使用变量存储计时器时间、当前时间和经过的时间。
    • 使用setTimeout更新显示时间。
    let timerTime = 0;
let timerInterval;


function setTimer() {
    const input = document.getElementById('timerInput');
    const time = parseInt(input.value, 10);
    if (time > 0) {
        timerTime = time;
        clearInterval(timerInterval);
        timerInterval = setInterval(updateTimerDisplay, 1000);
    }
}


function updateTimerDisplay() {
    let minutes = Math.floor(timerTime / 60);
    let seconds = timerTime % 60;


    document.getElementById('timerDisplay').textContent = 
        (minutes < 10 ? '0' + minutes : minutes) + ':' + 
        (seconds < 10 ? '0' + seconds : seconds);


    if (--timerTime <= 0) {
        clearInterval(timerInterval);
        document.getElementById('timerDisplay').textContent = '00:00';
    }
}

五、总结

通过以上步骤，你现在已经可以轻松地在网页上实现倒计时、秒表和计时器功能。这些技巧不仅可以帮助你提高网页交互性，还能加深你对JavaScript的理解。不断实践和尝试，你会发现自己在这方面的技能会越来越强。

-- 展开阅读全文 --