-
Notifications
You must be signed in to change notification settings - Fork 0
/
timer.html
59 lines (51 loc) · 1.77 KB
/
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
<!DOCTYPE html>
<html>
<header>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
var count = 0;
var notify = function(){
var timeLeft = $("#input").val()*1000;
$("#timer").text(timeLeft/1000+'s');
var target = new Date().getTime()+timeLeft;
var timer = setInterval(function(){
var left = Math.floor((target-new Date().getTime())/1000);
$("#timer").text(left+'s');
document.title=left+'s';
}, 500);
setTimeout(function(){
console.log("notify!");
clearInterval(timer);
$("#timer").text('');
count++;
if (window.webkitNotifications.checkPermission() == 0) {
var notification = window.webkitNotifications.createNotification('http://cr0ybot.github.io/ingress-logos/ingress_original.png',"Time to hack!",timeLeft/1000+" seconds have passed. Click here to start again. This will be hack #"+(count+1)+".")
notification.show();
notification.onclick = function() { console.log("clicked!"); notify(); };
notification.onclose = function() { count = 0; };
} else {
console.log("no permission");
}
}, timeLeft)
};
$('#permit').bind("click", function(){
if (window.webkitNotifications.checkPermission() != 0) {
window.webkitNotifications.requestPermission();
}
});
$('#notify').bind("click", notify);
});
</script>
</header>
<body>
<p>
<button id="permit" href="#">Activate Notifications!</button>
</p>
<p>
<button id="notify" href="#">Start countdown!</button>
</p>
<input type="number" value="300" id="input" min="1"/>
<p id="timer" style="font-size: 5em;"></p>
</body>
</html>