好的学校网站设计,东莞互联网,黑龙江建筑职业技术学院招生网站,wordpress 分类分页案例要求
1.界面为一个显示计时面板和三个按钮分别为:开始#xff0c;暂停#xff0c;重置 2.点击开始#xff0c;面板开始计时#xff0c; 3.点击暂停#xff0c;面板停止 4.点击重置#xff0c;计时面板重新为0
案例源码
!DOCTYPE html
html lang…案例要求
1.界面为一个显示计时面板和三个按钮分别为:开始暂停重置 2.点击开始面板开始计时 3.点击暂停面板停止 4.点击重置计时面板重新为0
案例源码
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
title秒表计时器/title
stylebody {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;}.container {text-align: center;}#timerDisplay {font-size: 36px;margin-bottom: 20px;}.clock {width: 200px;height: 200px;border: 8px solid #007bff;border-radius: 50%;position: relative;margin-bottom: 20px;}.hand {width: 2px;background-color: #007bff;position: absolute;top: 50%;left: 50%;transform-origin: bottom center;}.hour-hand {height: 50px;}.minute-hand {height: 70px;}.second-hand {height: 80px;background-color: red;}.center-dot {width: 8px;height: 8px;background-color: #007bff;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.buttons {display: flex;justify-content: center;}.button {background-color: #007bff;color: #fff;border: none;padding: 10px 20px;cursor: pointer;margin-right: 10px;}
/style
/head
bodydiv classcontainerdiv idtimerDisplay00:00:00/divdiv classclockdiv classhand hour-hand/divdiv classhand minute-hand/divdiv classhand second-hand/divdiv classcenter-dot/div/divdiv classbuttonsbutton idstartButton classbutton开始/buttonbutton idpauseButton classbutton暂停/buttonbutton idresetButton classbutton重置/button/div
/divscript
var timer;
var hours 0;
var minutes 0;
var seconds 0;function startTimer() {timer setInterval(updateTimer, 1000);
}function pauseTimer() {clearInterval(timer);
}function resetTimer() {clearInterval(timer);hours 0;minutes 0;seconds 0;updateDisplay();
}function updateTimer() {seconds;if (seconds 60) {seconds 0;minutes;}if (minutes 60) {minutes 0;hours;}updateDisplay();updateClock();
}function updateDisplay() {var displayHours (hours 10) ? 0 hours : hours;var displayMinutes (minutes 10) ? 0 minutes : minutes;var displaySeconds (seconds 10) ? 0 seconds : seconds;document.getElementById(timerDisplay).innerText displayHours : displayMinutes : displaySeconds;
}function updateClock() {var hourHand document.querySelector(.hour-hand);var minuteHand document.querySelector(.minute-hand);var secondHand document.querySelector(.second-hand);var hourRotation (hours % 12) * 30 minutes * 0.5;var minuteRotation minutes * 6 seconds * 0.1;var secondRotation seconds * 6;hourHand.style.transform translate(-1px, -100%) rotate(${hourRotation}deg);minuteHand.style.transform translate(-1px, -100%) rotate(${minuteRotation}deg);secondHand.style.transform translate(-1px, -100%) rotate(${secondRotation}deg);
}document.getElementById(startButton).addEventListener(click, startTimer);
document.getElementById(pauseButton).addEventListener(click, pauseTimer);
document.getElementById(resetButton).addEventListener(click, resetTimer);
/script/body
/html案例效果图
