JS:设计一个秒表 1.表盘布局(外圈为蓝色的虚线) Timer m s 00:00 00(每10毫秒变一次,99向秒进位) 2.按钮 1)布局:开始 暂停 复位 2)按钮位于表盘的下方, 不同按钮有一定间距,三个按钮共占一行 3)背景色为橙色,字体为黑色 3.按钮功能 开始:开始计时 暂停:暂停计时 复位:归0
时间: 2024-01-26 10:05:14 浏览: 21
HTML代码如下:
```
<!DOCTYPE html>
<html>
<head>
<title>秒表</title>
<style>
#timer {
width: 300px;
height: 300px;
border-radius: 50%;
border: 2px dashed blue;
position: relative;
}
#timer #m {
position: absolute;
top: 50px;
left: 50px;
font-size: 24px;
font-weight: bold;
}
#timer #s {
position: absolute;
top: 50px;
right: 50px;
font-size: 24px;
font-weight: bold;
}
#timer #ms {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
font-weight: bold;
}
#buttons {
display: flex;
justify-content: center;
margin-top: 20px;
}
#buttons button {
background-color: orange;
color: black;
font-size: 16px;
padding: 10px 20px;
margin: 0 10px;
border-radius: 5px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="timer">
<div id="m">00</div>
<div id="s">00</div>
<div id="ms">00</div>
</div>
<div id="buttons">
<button id="start">开始</button>
<button id="pause">暂停</button>
<button id="reset">复位</button>
</div>
<script>
var timer = null;
var ms = 0, s = 0, m = 0;
var msElement = document.getElementById('ms');
var sElement = document.getElementById('s');
var mElement = document.getElementById('m');
var startButton = document.getElementById('start');
var pauseButton = document.getElementById('pause');
var resetButton = document.getElementById('reset');
startButton.onclick = function() {
if (timer == null) {
timer = setInterval(function() {
ms++;
if (ms == 100) {
ms = 0;
s++;
if (s == 60) {
s = 0;
m++;
if (m == 60) {
m = 0;
}
mElement.innerText = m < 10 ? '0' + m : m;
}
sElement.innerText = s < 10 ? '0' + s : s;
}
msElement.innerText = ms < 10 ? '0' + ms : ms;
}, 10);
}
};
pauseButton.onclick = function() {
clearInterval(timer);
timer = null;
};
resetButton.onclick = function() {
clearInterval(timer);
timer = null;
ms = 0;
s = 0;
m = 0;
msElement.innerText = '00';
sElement.innerText = '00';
mElement.innerText = '00';
};
</script>
</body>
</html>
```
这里使用了HTML、CSS和JavaScript来实现秒表。其中,HTML定义了秒表的布局,CSS定义了样式,JavaScript实现了秒表的计时、暂停和复位功能。