JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例

JS实现的定时器展示简单秒表、页面弹框及跳转操作是一项很实用的功能。下面将详细讲解这项功能的攻略。

实现简单秒表

1. HTML代码

在HTML页面上添加一个按钮和展示秒数的div，如下所示：

<button id="startBtn">开始计时</button>
<div id="timeDisplay">0秒</div>

1. JavaScript代码

首先定义一个计时器对象timer和一个计数器变量count，点击开始计时按钮后，计时器开始工作，每隔1000毫秒count变量自增1，并将count转换成秒数后更新到展示秒数的div上。

var timer;
var count = 0;

document.getElementById("startBtn").addEventListener("click", function() {
  timer = setInterval(function() {
    count++;
    document.getElementById("timeDisplay").innerHTML = count + "秒";
  }, 1000);
});

1. 实现暂停和继续功能

添加一个暂停按钮和一个继续计时的按钮，并添加事件监听器。

<button id="pauseBtn">暂停</button>
<button id="continueBtn">继续计时</button>

document.getElementById("pauseBtn").addEventListener("click", function() {
  clearInterval(timer);
});

document.getElementById("continueBtn").addEventListener("click", function() {
  timer = setInterval(function() {
    count++;
    document.getElementById("timeDisplay").innerHTML = count + "秒";
  }, 1000);
});

实现页面弹框

1. HTML代码

创建一个页面弹框的按钮和一个遮罩层的div，用于当弹框出现时阻止用户操作。

<button id="showBtn">展示弹框</button>
<div id="mask"></div>
<div id="popup">这是一个弹框</div>

1. CSS样式

设置mask的z-index为10，将其覆盖在弹框之上，使用透明度实现遮罩效果。

#mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 10;
  opacity: 0.4;
}

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-left: -100px;
  margin-top: -50px;
  background-color: white;
  border: 1px solid black;
  z-index: 11;
  display: none;
}

1. JavaScript代码

添加一个展示弹框的事件监听器，实现弹框的展示功能。

document.getElementById("showBtn").addEventListener("click", function() {
  document.getElementById("mask").style.display = "block";
  document.getElementById("popup").style.display = "block";
});

添加一个关闭弹框的事件监听器，实现弹框的关闭功能。

document.getElementById("mask").addEventListener("click", function() {
  document.getElementById("mask").style.display = "none";
  document.getElementById("popup").style.display = "none";
});

实现跳转操作

1. HTML代码

创建一个按钮，点击该按钮后跳转到谷歌的主页。

<button id="jumpBtn">跳转到谷歌</button>

1. JavaScript代码

添加一个点击事件监听器，实现跳转到谷歌主页的功能。

document.getElementById("jumpBtn").addEventListener("click", function() {
  window.location.href = "https://www.google.com";
});

以上就是JS实现的定时器展示简单秒表、页面弹框及跳转操作的完整攻略。