jQueryを用いてタイマーを作成したい

###前提・実現したいこと
jQueryを利用してカウントダウンタイマーを作成したいです。
これはjQueryを利用せずに作成したカウントダウンタイマーなのですが
jQueryを利用するにはこれにどのように手を加えたらいいのか教えて下さるとうれしいです。

よろしくお願い致します

###該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウントダウンタイマー</title>
<link rel="stylesheet" href="timer.css">
<script>
var count = 180;
var min = 0;
var sec = 0;
var stp = null;
var i = 0;

function count_start(){
i++;
if(i === 1){
stp = setInterval(count_down,1000);
} else {
alert("2度押し厳禁！");
i = 0;
}
}

function count_down(){
if(count === 1){
var display = document.getElementById("default");
display.innerHTML = "Time UP!";
clearInterval(stp);
} else {
count--;
min = parseInt(count / 60);
sec = count % 60;
var count_down = document.getElementById("default");
count_down.innerHTML = ("0"+min).slice(-2) +"：" + ("0"+sec).slice(-2);
}
} 

function count_stop(){
clearInterval(stp);
i = 0;
}

function count_reset(){
count = 180;
min = parseInt(count / 60);
sec = count % 60;
i = 0;
var count_down = document.getElementById("default");
count_down.innerHTML = ("0"+min).slice(-2) +"：" + ("0"+sec).slice(-2);
} 

window.onload = function(){
var start = document.getElementById('start');
var stop = document.getElementById("stop");
var reset = document.getElementById("reset");
start.addEventListener('click',count_start, false);
stop.addEventListener("click",count_stop, false);
reset.addEventListener("click",count_reset,false);
} 

</script>
</head>
<body>
<div id="body">
<div id ="box">
<p id="default">03：00</p>
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>
</div>
</div>
</body>
</html>

toutou

2017/05/03 07:55

https://gorian91.com/2015/09/10/blog/1678/　ここのマルパクリだと思いますがどこまで理解されてるんでしょうか？ただの変換だと受け付けてくれないと思います。

yuki84web

2017/05/03 08:27

そもそもjQueryを使わなければならない理由はなんでしょう

行動規範の内容に同意します

回答1件

ベストアンサー

document.getElementById("")を$("#")に変更し
addEventListenerをonに変更し
innerHTMLをtext()に変更します

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset="UTF-8">
6	<title>カウントダウンタイマー</title>
7	<link rel="stylesheet" href="timer.css">
8	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
9	<script>
10	$(function() {
11		var count = 180;
12		var min = 0;
13		var sec = 0;
14		var stp = null;
15		var i = 0;
16
17		$("#start").on('click', function count_start() {
18			i++;
19			if (i === 1) {
20				stp = setInterval(count_down, 1000);
21			} else {
22				alert("2度押し厳禁！");
23				i = 0;
24			}
25		});
26
27		function count_down() {
28			if (count === 1) {
29				$("#default").text() = "Time UP!";
30				clearInterval(stp);
31			} else {
32				count--;
33				min = parseInt(count / 60);
34				sec = count % 60;
35				$("#default").text(("0" + min).slice(-2) + "：" + ("0" + sec).slice(-2));
36			}
37		}
38
39		$("#stop").on("click", function count_stop() {
40			clearInterval(stp);
41			i = 0;
42		});
43
44		$("#reset").on("click", function count_reset() {
45			count = 180;
46			min = parseInt(count / 60);
47			sec = count % 60;
48			i = 0;
49			$("#default").text(("0" + min).slice(-2) + "：" + ("0" + sec).slice(-2));
50		});
51	});
52	</script>
53</head>
54
55<body>
56	<div id="body">
57		<div id="box">
58			<p id="default">03：00</p>
59			<button id="start">スタート</button>
60			<button id="stop">ストップ</button>
61			<button id="reset">リセット</button>
62		</div>
63	</div>
64</body>
65
66</html>
67