-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path02.timer.html
113 lines (97 loc) · 3.26 KB
/
02.timer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!--<!DOCTYPE html>-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Timer</title>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="timer_style.css">
</head>
<body>
<!-- 計測中-->
<div id="timing">
<div class="timer_div">
<div class="timing_h_wrapper">
<h2>今日の学習時間は：</h2>
</div>
<div class="timer_wrapper">
<span id="hour"></span>
<span id="min"></span>
<span id="sec"></span>
</div>
<div id="btns_wrapper">
<div class="btn">
<label id="rest" style="display:block" >ちょこっとひと休み</label>
<label id="restart" style="display:none">学習再開</label>
</div>
<div class="btn" >
<label id="fin">終了</label>
</div>
</div>
<div id="fin_msg" style="display: none">
<h2>でした！</h2>
<h2>お疲れ様でした！</h2>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var hour = document.getElementById('hour')
var min = document.getElementById('min')
var sec = document.getElementById('sec')
var secnum = 0
var minnum = 0
var hournum = 0
hour.innerHTML = hournum+"時間"
min.innerHTML = minnum + "分"
sec.innerHTML = secnum + "秒"
var isRunning = null
function start(){
if (isRunning==null){
isRunning = setInterval(function () {
secnum++
if (secnum <= 59 && minnum <= 59) {
sec.innerHTML = secnum +"秒"
}else if (minnum <= 58){
minnum++
secnum = 0
min.innerHTML = minnum+"分"
sec.innerHTML = secnum +"秒"
}else {
hournum++
secnum = 0
minnum = 0
hour.innerHTML = hournum + "時間"
min.innerHTML = minnum+"分"
sec.innerHTML = secnum +"秒"
}
},1000)}
}
start()
//ボタン操作
var rest = document.getElementById('rest')
var restart =document.getElementById('restart')
var fin = document.getElementById('fin')
var btns = document.getElementById('btns_wrapper')
var fin_msg = document.getElementById('fin_msg')
rest.onclick = function () {
stopTimer()
this.style.display = this.style.display === "none"? "block":"none"
restart.style.display = restart.style.display === "none"? "block":"none"
}
restart.onclick = function () {
start()
this.style.display = this.style.display === "none"? "block":"none"
rest.style.display = rest.style.display === "none"? "block":"none"
}
fin.onclick = function () {
stopTimer()
btns.style.display = "none"
fin_msg.style.display = "block"
}
function stopTimer(){
clearInterval(isRunning)
isRunning = null
}
</script>
</body>
</html>