用JS写了一个30分钟倒计时器的实现示例

以下是用JS写一个30分钟倒计时器的实现示例的完整攻略：

步骤1：HTML结构

首先，在HTML文件中添加以下结构：

<div id="timer">30:00</div>

这是倒计时器的外框，其中数字部分即为倒计时器的显示区域。

步骤2：CSS样式

接着，为倒计时器添加样式：

#timer {
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  padding: 30px;
  background-color: #f2f2f2;
}

这些样式将使倒计时器居中显示，数字区域加粗并设为48px，背景颜色为灰色。

步骤3：JavaScript代码

最后，编写JavaScript代码，实现倒计时器的功能。代码如下：

var minutes = 30;
var seconds = 0;

function updateTime() {
  var timerLabel = document.getElementById('timer');
  if (seconds == 0) {
    if (minutes == 0) {
      clearInterval(intervalId);
      timerLabel.innerHTML = 'Time\'s up!';
      return;
    }
    minutes--;
    seconds = 59;
  } else {
    seconds--;
  }
  var sec = seconds < 10 ? '0' + seconds : seconds;
  var min = minutes < 10 ? '0' + minutes : minutes;
  timerLabel.innerHTML = min + ':' + sec;
}

var intervalId = setInterval(updateTime, 1000);

这段代码首先定义了分钟和秒数的初始值为30和0，然后定义了一个名为updateTime的函数实现倒计时的功能，包括分钟数和秒数的更新和倒计时结束时的清除intervalId和显示"Time's up!"。最后，使用setInterval函数每1000毫秒调用一次updateTime函数实现倒计时器的功能。

示例说明

示例1

在倒计时结束时弹出提示框的示例。

改进代码：

var minutes = 30;
var seconds = 0;

function updateTime() {
  var timerLabel = document.getElementById('timer');
  if (seconds == 0) {
    if (minutes == 0) {
      clearInterval(intervalId);
      alert('Time\'s up!');
      return;
    }
    minutes--;
    seconds = 59;
  } else {
    seconds--;
  }
  var sec = seconds < 10 ? '0' + seconds : seconds;
  var min = minutes < 10 ? '0' + minutes : minutes;
  timerLabel.innerHTML = min + ':' + sec;
}

var intervalId = setInterval(updateTime, 1000);

在代码中加入了alert()函数，当倒计时结束时弹出提示框提醒用户。

示例2

在倒计时结束时跳转页面的示例。

改进代码：

var minutes = 30;
var seconds = 0;

function updateTime() {
  var timerLabel = document.getElementById('timer');
  if (seconds == 0) {
    if (minutes == 0) {
      clearInterval(intervalId);
      window.location.href = 'http://www.example.com';  // 修改为需要跳转的链接
      return;
    }
    minutes--;
    seconds = 59;
  } else {
    seconds--;
  }
  var sec = seconds < 10 ? '0' + seconds : seconds;
  var min = minutes < 10 ? '0' + minutes : minutes;
  timerLabel.innerHTML = min + ':' + sec;
}

var intervalId = setInterval(updateTime, 1000);

在代码中使用window.location.href实现了倒计时结束后跳转到指定页面的功能。