</script> <button class="start">开始</button> <button class="stop">暂停</button> <button class="end">结束</button> <h1 class="time">10:9</h1> <script> //定义按钮 let start = document.querySelector('.start') let stop = document.querySelector('.stop') let end = document.querySelector('.end') let time = document.querySelector('.time') let seconds = 0 let ms = 0 time.innerHTML = `${seconds}:${ms}` let timer = null // 开启计时器 start.onclick = function () { // 开始的时候删掉之前的计时器并重新开启一个计时器 防止多次开启计时器越来越快的情况 clearInterval(timer) timer = setInterval(() => { // 设置进制 if (ms === 9) { seconds++ ms = 0 } ms++ time.innerHTML = `${seconds}:${ms}` }, 100) } // 暂停计时器 stop.onclick = function () { clearInterval(timer) } // 结束计时器 end.onclick = function () { seconds = 0 ms = 0 time.innerHTML = `${seconds}:${ms}` } </script>
时间: 2024-04-02 08:31:24 浏览: 103
这是一段使用 JavaScript 实现计时器功能的代码。代码中,通过 document.querySelector() 方法获取了三个按钮和一个显示时间的元素,并初始化了秒数和毫秒数为 0。然后定义了一个 timer 变量用于存储计时器实例,并且给开始按钮添加了点击事件,点击开始按钮会清除之前的计时器,并重新开启一个计时器,每 100 毫秒增加一次毫秒数,当毫秒数达到 9 时,将秒数增加一,毫秒数归零,最后更新显示时间。给暂停按钮添加了点击事件,点击暂停按钮会清除计时器。给结束按钮添加了点击事件,点击结束按钮会将秒数和毫秒数重置为 0,并更新显示时间。
相关问题
用jquery改写以下程序<!DOCTYPE html> <html lang="en"> <head> <title>Styles Example</title> <style type="text/css"> .myDiv { background-color: blue; width: 150px; height: 150px; margin-right: 20px; display: table-cell; vertical-align: middle; text-align: center } .highlight { font-size: xx-large; } span { display: block; color: yellow; text-align: center; } </style> </head> <body> <table> <tr> <td> <div class="myDiv highlight"> <span>虎虎生威</span> </div> </td> <td> <div class="myDiv"> <span>生龙活虎</span> </div> </td> </tr> <tr> <td> <div class="myDiv"> <span>如虎添翼</span> </div> </td> <td> <div class="myDiv"> <span>卧虎藏龙</span> </div> </td> </table> <button onclick="start()" id="start">开始</button> <button onclick="stop()" disabled="disabled" id="stop">停止</button> <button onclick="resume()" disabled="disabled" id="resume">继续</button> <script> let divs = document.querySelectorAll(".myDiv");//取得所有div let startButton = document.getElementById("start");//取得开始按钮 let stopButton = document.getElementById("stop");//取得停止按钮 let resumeButton = document.getElementById("resume");//取得继续按钮 let nums = [0, 1, 3, 2]; let index = 0, timerId; function start() { startButton.disabled = true; for (let num of nums) { divs[nums[index]].classList.remove("highlight"); } index = 0; divs[nums[0]].classList.add("highlight"); resume(); } function stop() { clearInterval(timerId); stopButton.disabled = true; startButton.removeAttribute("disabled"); resumeButton.removeAttribute("disabled"); } function resume() { resumeButton.disabled = true; stopButton.removeAttribute("disabled"); timerId = window.setInterval(function () { divs[nums[index]].classList.remove("highlight"); index = (index + 1) % 4; divs[nums[index]].classList.add("highlight"); }, 500); } </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styles Example</title>
<style type="text/css">
.myDiv {
background-color: blue;
width: 150px;
height: 150px;
margin-right: 20px;
display: table-cell;
vertical-align: middle;
text-align: center
}
.highlight {
font-size: xx-large;
}
span {
display: block;
color: yellow;
text-align: center;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<div class="myDiv highlight">
<span>虎虎生威</span>
</div>
</td>
<td>
<div class="myDiv">
<span>生龙活虎</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="myDiv">
<span>如虎添翼</span>
</div>
</td>
<td>
<div class="myDiv">
<span>卧虎藏龙</span>
</div>
</td>
</table>
<button onclick="start()" id="start">开始</button>
<button onclick="stop()" disabled="disabled" id="stop">停止</button>
<button onclick="resume()" disabled="disabled" id="resume">继续</button>
<script>
let divs = $(".myDiv"); //取得所有div
let startButton = $("#start"); //取得开始按钮
let stopButton = $("#stop"); //取得停止按钮
let resumeButton = $("#resume"); //取得继续按钮
let nums = [0, 1, 3, 2];
let index = 0, timerId;
function start() {
startButton.prop("disabled", true);
for (let num of nums) {
divs.eq(nums[index]).removeClass("highlight");
}
index = 0;
divs.eq(nums[0]).addClass("highlight");
resume();
}
function stop() {
clearInterval(timerId);
stopButton.prop("disabled", true);
startButton.removeAttr("disabled");
resumeButton.removeAttr("disabled");
}
function resume() {
resumeButton.prop("disabled", true);
stopButton.removeAttr("disabled");
timerId = window.setInterval(function () {
divs.eq(nums[index]).removeClass("highlight");
index = (index + 1) % 4;
divs.eq(nums[index]).addClass("highlight");
}, 500);
}
</script>
</body>
</html>
用jquery精简一下程序<!DOCTYPE html> <html lang="en"> <head> <title>Styles Example</title> <style type="text/css"> .myDiv { background-color: blue; width: 150px; height: 150px; margin-right: 20px; display: table-cell; vertical-align: middle; text-align: center } .highlight { font-size: xx-large; } span { display: block; color: yellow; text-align: center; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <table> <tr> <td> <div class="myDiv highlight"> <span>虎虎生威</span> </div> </td> <td> <div class="myDiv"> <span>生龙活虎</span> </div> </td> </tr> <tr> <td> <div class="myDiv"> <span>如虎添翼</span> </div> </td> <td> <div class="myDiv"> <span>卧虎藏龙</span> </div> </td> </table> <button onclick="start()" id="start">开始</button> <button onclick="stop()" disabled="disabled" id="stop">停止</button> <button onclick="resume()" disabled="disabled" id="resume">继续</button> <script> let divs = $(".myDiv"); //取得所有div let startBtn = $("#start"); //取得开始按钮 let stopBtn = $("#stop"); //取得停止按钮 let resumeBtn = $("#resume"); //取得继续按钮 let nums = [0, 1, 3, 2]; let index = 0, timerId; function start() { startBtn.prop("disabled", true); for (let num of nums) { divs.eq(nums[index]).removeClass("highlight"); } index = 0; divs.eq(nums[0]).addClass("highlight"); resume(); } function stop() { clearInterval(timerId); stopBtn.prop("disabled", true); startBtn.removeAttr("disabled"); resumeBtn.removeAttr("disabled"); } function resume() { resumeBtn.prop("disabled", true); stopBtn.removeAttr("disabled"); timerId = window.setInterval(function () { divs.eq(nums[index]).removeClass("highlight"); index = (index + 1) % 4; divs.eq(nums[index]).addClass("highlight"); }, 500); } </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styles Example</title>
<style type="text/css">
.myDiv {
background-color: blue;
width: 150px;
height: 150px;
margin-right: 20px;
display: table-cell;
vertical-align: middle;
text-align: center
}
.highlight {
font-size: xx-large;
}
span {
display: block;
color: yellow;
text-align: center;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<div class="myDiv highlight">
<span>虎虎生威</span>
</div>
</td>
<td>
<div class="myDiv">
<span>生龙活虎</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="myDiv">
<span>如虎添翼</span>
</div>
</td>
<td>
<div class="myDiv">
<span>卧虎藏龙</span>
</div>
</td>
</tr>
</table>
<button id="start">开始</button>
<button id="stop" disabled>停止</button>
<button id="resume" disabled>继续</button>
<script>
const divs = $(".myDiv");
const startBtn = $("#start");
const stopBtn = $("#stop");
const resumeBtn = $("#resume");
const nums = [0, 1, 3, 2];
let index = 0, timerId;
function start() {
startBtn.prop("disabled", true);
divs.eq(nums[index]).removeClass("highlight");
index = 0;
divs.eq(nums[0]).addClass("highlight");
resume();
}
function stop() {
clearInterval(timerId);
stopBtn.prop("disabled", true);
startBtn.removeAttr("disabled");
resumeBtn.removeAttr("disabled");
}
function resume() {
resumeBtn.prop("disabled", true);
stopBtn.removeAttr("disabled");
timerId = setInterval(function () {
divs.eq(nums[index]).removeClass("highlight");
index = (index + 1) % 4;
divs.eq(nums[index]).addClass("highlight");
}, 500);
}
startBtn.click(start);
stopBtn.click(stop);
resumeBtn.click(resume);
</script>
</body>
</html>
阅读全文