Я создал для своего нового сайта точный секундомер и написал о том, почему здесь, теперь вы можете получить его бесплатно. HTML и CSS включены. Загрузите его на github или просто скопируйте предоставленный здесь код и используйте его, как хотите.
Все, о чем я прошу, - это, возможно, посетить сайт, на котором он был изначально построен. Там вы можете зарегистрировать бесплатную учетную запись и начать хранить свои знания, чтобы помнить их навсегда . Или не. В любом случае, наслаждайтесь!
Секундомер
Секундомер запускается, когда пользователь нажимает кнопку воспроизведения, и он будет работать каждую миллисекунду, отображая полные часы как 00: 00: 00: 000 часы: минуты: секунды: миллисекунды.
HTML
<!DOCTYPE html> <html> <head> <title>Vanilla JS Stopwatch - Javascript Stopwatch</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> <link rel="stylesheet" href="stopWatch.css"> </head> <body> <div id="timerContainer"> <div class="timer" onclick="startTimer()">Start Timer!</div> <div class="startTimer reset" onclick="startTimer()" > <i class="fas fa-play"></i> </div> <div class="pauseTimer reset" onclick="pauseTimer()" > <i class="fas fa-pause"></i> </div> <div class="resetTimer reset" onclick="resetTimer()">Reset</div> </div> <script type="text/javascript" src="stopWatch.js"></script> </body> </html>
Включена таблица стилей Font Awesome, так что вы можете отображать правильную кнопку воспроизведения и паузы.
Я также добавил шрифт Google, который мне нравится. Вы можете изменить их, а также любой из представленных ниже стилей по своему усмотрению.
CSS
#timerContainer {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
width:700px;
margin:20px auto;
min-height: 60px;
border-top:0px;
}
.timer, .reset {
float:left;
width: 54%;
padding: 20px 0;
font-size: 24px;
text-align:center;
color: #fff;
background: #A90000;
cursor: pointer
}
.reset {
background: #550000;
color: white;
width:14.9%;
border-left: 1px solid #990000;
}
.reset:hover {
background: #CC0000;
}
.lighter {
background: #CC0000
}
Сценарий
var startTimerButton = document.querySelector('.startTimer');
var pauseTimerButton = document.querySelector('.pauseTimer');
var timerDisplay = document.querySelector('.timer');
var startTime;
var updatedTime;
var difference;
var tInterval;
var savedTime;
var paused = 0;
var running = 0;
function startTimer(){
if(!running){
startTime = new Date().getTime();
tInterval = setInterval(getShowTime, 1);
// change 1 to 1000 above to run script every second instead of every millisecond. one other change will be needed in the getShowTime() function below for this to work. see comment there.
paused = 0;
running = 1;
timerDisplay.style.background = "#FF0000";
timerDisplay.style.cursor = "auto";
timerDisplay.style.color = "yellow";
startTimerButton.classList.add('lighter');
pauseTimerButton.classList.remove('lighter');
startTimerButton.style.cursor = "auto";
pauseTimerButton.style.cursor = "pointer";
}
}
function pauseTimer(){
if (!difference){
// if timer never started, don't allow pause button to do anything
} else if (!paused) {
clearInterval(tInterval);
savedTime = difference;
paused = 1;
running = 0;
timerDisplay.style.background = "#A90000";
timerDisplay.style.color = "#690000";
timerDisplay.style.cursor = "pointer";
startTimerButton.classList.remove('lighter');
pauseTimerButton.classList.add('lighter');
startTimerButton.style.cursor = "pointer";
pauseTimerButton.style.cursor = "auto";
} else {
// if the timer was already paused, when they click pause again, start the timer again
startTimer();
}
}
function resetTimer(){
clearInterval(tInterval);
savedTime = 0;
difference = 0;
paused = 0;
running = 0;
timerDisplay.innerHTML = 'Start Timer!';
timerDisplay.style.background = "#A90000";
timerDisplay.style.color = "#fff";
timerDisplay.style.cursor = "pointer";
startTimerButton.classList.remove('lighter');
pauseTimerButton.classList.remove('lighter');
startTimerButton.style.cursor = "pointer";
pauseTimerButton.style.cursor = "auto";
}
function getShowTime(){
updatedTime = new Date().getTime();
if (savedTime){
difference = (updatedTime - startTime) + savedTime;
} else {
difference = updatedTime - startTime;
}
// var days = Math.floor(difference / (1000 * 60 * 60 * 24));
var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((difference % (1000 * 60)) / 1000);
var milliseconds = Math.floor((difference % (1000 * 60)) / 100);
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
milliseconds = (milliseconds < 100) ? (milliseconds < 10) ? "00" + milliseconds : "0" + milliseconds : milliseconds;
timerDisplay.innerHTML = hours + ':' + minutes + ':' + seconds + ':' + milliseconds;
}
Если вы запускаете скрипт за секунды, а не за миллисекунды, закомментируйте приведенный выше код миллисекунд.
Каждую секунду выполняется функция getShowTime ().
Уловка для всего этого заключается в том, чтобы НЕ зависеть от функции setInterval (), чтобы определить, сколько времени прошло. Таким образом, мы будем запускать getShowTime () каждую миллисекунду, но мы не будем предполагать, что прошла миллисекунда, потому что браузеры не точно рассчитывают время для этих событий. Следовательно, каждый раз, когда мы запускаем getShowTime (), мы проверяем текущее время и вычитаем его из общего количества времени, прошедшего с момента первого запуска скрипта.
