JavaScript输入分钟、秒倒计时技巧总结（附代码）

2023年5月27日下午2:03 • JavaScript

我来详细讲解“JavaScript输入分钟、秒倒计时技巧总结（附代码）”的完整攻略。

概述

本文主要介绍如何利用JavaScript实现分钟、秒倒计时，并提供了相关的代码示例和解释。读者可以根据自己的需求进行参考和修改，具体实现过程可以参考下文。

实现思路

主要实现过程是利用setInterval()函数和JavaScript DOM，通过获取输入的分钟和秒数，然后每隔一秒钟减少一次秒数。当秒数减少到0时，分钟数减少1，最后输出倒计时的结果。

代码示例：

以下是实现代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body>
    <p>请输入倒计时的分钟数和秒数：</p>
    <form>
        <label for="minutes">分钟数：</label>
        <input type="text" id="minutes" name="minutes">
        <label for="seconds">秒数：</label>
        <input type="text" id="seconds" name="seconds">
        <input type="button" value="开始倒计时" onclick="countdown()">
    </form>
    <p id="countdown"></p>
    <script>
        function countdown() {
            var minutes = document.getElementById("minutes").value;
            var seconds = document.getElementById("seconds").value;

            var countdownTimer = setInterval(function() {
                if (seconds > 0) {
                    seconds--;
                }
                else {
                    seconds = 59;
                    if (minutes > 0) {
                        minutes--;
                    }
                    else {
                        clearInterval(countdownTimer);
                        alert("倒计时结束！");
                    }
                }
                document.getElementById("countdown").textContent = "倒计时还有 " + minutes + " 分 " + seconds + " 秒";
            }, 1000);
        }
    </script>
</body>
</html>