JavaScript를 사용하여 스톱워치 구현
2822 단어 JavaScript
하고 싶은 일
JavaScript를 오랫동안 만지지 않아서 생각나려고
간단한 JavaScript로 아래와 같은 START 버튼을 누른 후 스톱워치를 시작하고 스톱 버튼으로 중지합니다.
코드는 다음과 같습니다.
복잡하지 않기 때문에 HTML에 직접 기재합니다.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>TIMER</title>
</head>
<body>
<div class="container">
<p id="timer">00:00:00</p>
<div>
<button id="start_stop" class="btn btn-lg btn-primary">START</button>
</div>
</div>
<script>
var start;
var timer_id;
document.getElementById('start_stop').addEventListener('click', function(){
if (this.innerHTML === 'START') {
start = new Date();
// 一定時間ごとに特定の処理を繰り返す(10ミリ秒)
timer_id = setInterval(goTimer, 10);
// STOPボタンにする
this.innerHTML = 'STOP'
this.classList.remove('btn-primary');
this.classList.add('btn-danger');
} else {
clearInterval(timer_id);
this.innerHTML = 'START'
this.classList.remove('btn-danger');
this.classList.add('btn-primary');
}
})
var addZero = function(value) {
if (value < 10) {
value = '0' + value;
}
return value;
}
var goTimer = function() {
var now = new Date();
// 現在の時間をSTARTした時間から引いて経過時間を計算
var milli = now.getTime() - start.getTime();
var seconds = Math.floor(milli / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
seconds = seconds - minutes * 60;
minutes = minutes - hours * 60;
// innerHTMLの要素を書き換える
document.getElementById('timer').innerHTML = addZero(hours) + ':' + addZero(minutes) + ':' + addZero(seconds);
}
</script>
</body>
</html>
Reference
이 문제에 관하여(JavaScript를 사용하여 스톱워치 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/empereur7/items/45539b2bf39b8b5b492c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>TIMER</title>
</head>
<body>
<div class="container">
<p id="timer">00:00:00</p>
<div>
<button id="start_stop" class="btn btn-lg btn-primary">START</button>
</div>
</div>
<script>
var start;
var timer_id;
document.getElementById('start_stop').addEventListener('click', function(){
if (this.innerHTML === 'START') {
start = new Date();
// 一定時間ごとに特定の処理を繰り返す(10ミリ秒)
timer_id = setInterval(goTimer, 10);
// STOPボタンにする
this.innerHTML = 'STOP'
this.classList.remove('btn-primary');
this.classList.add('btn-danger');
} else {
clearInterval(timer_id);
this.innerHTML = 'START'
this.classList.remove('btn-danger');
this.classList.add('btn-primary');
}
})
var addZero = function(value) {
if (value < 10) {
value = '0' + value;
}
return value;
}
var goTimer = function() {
var now = new Date();
// 現在の時間をSTARTした時間から引いて経過時間を計算
var milli = now.getTime() - start.getTime();
var seconds = Math.floor(milli / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
seconds = seconds - minutes * 60;
minutes = minutes - hours * 60;
// innerHTMLの要素を書き換える
document.getElementById('timer').innerHTML = addZero(hours) + ':' + addZero(minutes) + ':' + addZero(seconds);
}
</script>
</body>
</html>
Reference
이 문제에 관하여(JavaScript를 사용하여 스톱워치 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/empereur7/items/45539b2bf39b8b5b492c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
