用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>
时间: 2023-11-16 14:10:13 浏览: 74
<!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>
阅读全文