115 lines
4.4 KiB
HTML
115 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Countdown timer</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">
|
|
<script src="https://vuejs.org/js/vue.js"></script>
|
|
<style>
|
|
table tbody tr:nth-child(2n) {
|
|
background-color: transparent;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<h1>Countdown</h1>
|
|
<button @click="newTimer=!newTimer">Add new timer</button>
|
|
<div v-if="newTimer">
|
|
<div>
|
|
<input type="time" id="newTimerValue">
|
|
<button @click="addTimer">Add timer</button>
|
|
</div>
|
|
</div>
|
|
<table>
|
|
<tr v-for="(timer, key) of timers">
|
|
<td><h3>{{ formatTime(timer.currentTime) }}</h3></td>
|
|
<td>
|
|
<button @click="start(timer)" v-if="timer.state == 'stop'">Start</button>
|
|
<button @click="remove(key)" v-if="timer.state == 'stop'">Remove</button>
|
|
<button @click="cont(timer)" v-if="timer.state == 'pause'">Continue</button>
|
|
<button @click="reset(key)" v-if="timer.state == 'pause'">Reset</button>
|
|
<button @click="pause(timer)" v-if="timer.state == 'start'">Pause</button>
|
|
<button @click="stop(key)" v-if="timer.state == 'start'">Stop</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<script>
|
|
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
timers: [
|
|
{name: '', hours: 0, originalTime: 60, currentTime: 60, state: 'stop'},
|
|
{name: '', hours: 0, originalTime: 120, currentTime: 120, state: 'stop'},
|
|
{name: '', hours: 0, originalTime: 180, currentTime: 180, state: 'stop'},
|
|
],
|
|
newTimer: false
|
|
},
|
|
created: function () {
|
|
setInterval(function () {
|
|
for (let timer of this.timers) {
|
|
if (timer.state == 'start') {
|
|
if (timer.currentTime > 0) {
|
|
timer.currentTime--;
|
|
} else {
|
|
timer.state = "stop";
|
|
timer.currentTime = timer.originalTime;
|
|
window.navigator.vibrate([200, 200, 200, 200, 600]);
|
|
}
|
|
}
|
|
}
|
|
}.bind(this), 1000);
|
|
},
|
|
methods: {
|
|
formatTime: function (currentTime) {
|
|
|
|
let hours = parseInt(currentTime / 3600, 10);
|
|
currentTime -= hours * 3600;
|
|
let minutes = parseInt(currentTime / 60, 10);
|
|
let seconds = parseInt(currentTime % 60, 10);
|
|
|
|
hours = hours < 10 ? "0" + hours : hours;
|
|
minutes = minutes < 10 ? "0" + minutes : minutes;
|
|
seconds = seconds < 10 ? "0" + seconds : seconds;
|
|
|
|
return hours + ":" + minutes + ":" + seconds;
|
|
},
|
|
start: function (timer) {
|
|
console.info(timer);
|
|
timer.state = "start";
|
|
},
|
|
remove: function (timerId) {
|
|
console.info(timerId);
|
|
this.timers.splice(timerId, 1);
|
|
},
|
|
reset: function (timerId) {
|
|
this.timers[timerId].state = 'stop';
|
|
this.timers[timerId].currentTime = this.timers[timerId].originalTime;
|
|
console.info(this.timers[timerId]);
|
|
},
|
|
pause: function (timer) {
|
|
timer.state = 'pause';
|
|
},
|
|
stop: function (timerId) {
|
|
this.timers[timerId].state = 'stop';
|
|
this.timers[timerId].currentTime = this.timers[timerId].originalTime;
|
|
},
|
|
cont: function (timer) {
|
|
timer.state = 'start';
|
|
},
|
|
addTimer: function () {
|
|
console.info(document.querySelector('#newTimerValue').value.split(':'));
|
|
if (document.querySelector('#newTimerValue').value) {
|
|
let time = document.querySelector('#newTimerValue').value.split(':');
|
|
let seconds = parseInt(time[0], 10) * 3600 + parseInt(time[1], 10) * 60;
|
|
this.timers.push({name: 'timer', state: 'stop', originalTime: seconds, currentTime: seconds});
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |