JS:设计一个秒表 1.表盘布局 Timer m s 00:00 00(每10毫秒变一次,99向秒进位) 开始 暂停 布局 2.按钮样式 背景色为橙色的黑色字体
时间: 2024-01-11 10:03:07 浏览: 22
HTML 代码:
```html
<div class="timer">
<span class="minutes">00</span>:<span class="seconds">00</span> <span class="milliseconds">00</span>
</div>
<button class="start">开始</button>
<button class="pause">暂停</button>
```
CSS 代码:
```css
.timer {
font-size: 50px;
font-weight: bold;
color: #000;
background-color: #fff;
padding: 20px;
border-radius: 10px;
display: inline-block;
}
.start,
.pause {
background-color: orange;
color: #000;
font-size: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-right: 10px;
cursor: pointer;
}
.start:hover,
.pause:hover {
background-color: #000;
color: orange;
}
```
JavaScript 代码:
```js
let minutes = 0;
let seconds = 0;
let milliseconds = 0;
let timer;
const minutesDisplay = document.querySelector('.minutes');
const secondsDisplay = document.querySelector('.seconds');
const millisecondsDisplay = document.querySelector('.milliseconds');
const startButton = document.querySelector('.start');
const pauseButton = document.querySelector('.pause');
function startTimer() {
timer = setInterval(() => {
milliseconds += 10;
if (milliseconds === 1000) {
seconds++;
milliseconds = 0;
}
if (seconds === 60) {
minutes++;
seconds = 0;
}
updateDisplay();
}, 10);
}
function pauseTimer() {
clearInterval(timer);
}
function resetTimer() {
minutes = 0;
seconds = 0;
milliseconds = 0;
updateDisplay();
}
function updateDisplay() {
minutesDisplay.innerText = padTime(minutes);
secondsDisplay.innerText = padTime(seconds);
millisecondsDisplay.innerText = padTime(milliseconds);
}
function padTime(time) {
return time.toString().padStart(2, '0');
}
startButton.addEventListener('click', startTimer);
pauseButton.addEventListener('click', pauseTimer);
```
此代码使用 JavaScript 和 CSS 创建一个具有表盘布局的秒表。它有一个开始和暂停按钮,以及一个用于显示时间的标签。JavaScript 代码处理计时器逻辑,并更新显示的时间。CSS 为按钮和标签提供样式。