【jQuery】jQuery로 카운트다운 타이머를 작성하라. 구체적인 요건은 다음과 같습니다.
12396 단어 jQuery
2 ・시작 버튼을 누르면 1초씩 카운트가 진행된다
3·카운트가 00:00이 되면 「Time UP!」라고 표시한다
4 · 정지 버튼을 누르면 카운트가 멈 춥니 다.
5 · 리셋 버튼을 누르면 카운트가 03:00으로 돌아가 카운트가 멈 춥니 다.
6. 스타트를 두 번 눌러도 1초씩 카운트가 진행되는 것.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jqueryでカウントダウンタイマー</title>
<script src="jquery-3.6.0.min.js"></script>
<script>
//001----------jqueryの開始------------------------------------------------------
$(function(){
//002-----------↓何分のタイマーにするか入力------------------------------------------
var minutes = 0.1;
//003---------------------------------------------------------------------------
var dafa_time = (minutes * 60);
var time = dafa_time;
var interval;
var min;
var sec;
calc();
$('#start').on("click",function(){
$('#start').prop('disabled',true);
interval = setInterval(startTimer,1000);
});
$('#stop').on("click",function stopTimer() {
clearInterval(interval);
$('#start').prop('disabled',false);
});
$('#reset').on("click",function() {
clearInterval(interval);
$('#start').prop('disabled',false);
$('#timer').html("TIME UP!!").css("color","black");
resetTimer();
});
function startTimer() {
time --;
if (time === 0 ) {
$('#timer').html("TIME UP!!").css("color","red");
clearInterval(interval);
} else {
calc();
}
}
function resetTimer() {
time = dafa_time;
calc();
}
function calc() {
min = Math.floor( time / 60 );
sec = time % 60;
min = ('00' + min).slice(-2);
sec = ('00' + sec).slice(-2);
$('#timer').html(min + ":" + sec);
}
});
</script>
<!-----タイマーを表示--------------------------------------------->
<div id ="timer"></div>
<!-------------------------------------------------------------->
<!-----スタートボタンを表示----------------------------------------->
<button id="start">スタート</button>
<!-----ストップボタンを表示----------------------------------------->
<button id="stop">ストップ</button>
<!-----リセットボタンを表示----------------------------------------->
<button id="reset">リセット</button>
<!-------------------------------------------------------------->
Reference
이 문제에 관하여(【jQuery】jQuery로 카운트다운 타이머를 작성하라. 구체적인 요건은 다음과 같습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/panda-chibi/items/ff3bdea324a1e6f6b6da텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
