-
Notifications
You must be signed in to change notification settings - Fork 0
/
progress.html
105 lines (80 loc) · 2.82 KB
/
progress.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
<html>
<body style="background-color: #000000; color: #ffffff;">
<canvas id="canvas1" width="400" height="400" style="border:0px solid #000000;">
</canvas>
</body>
<script>
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
init();
function init()
{
window.addEventListener("resize", resize, false);
resize();
}
function resize()
{
//canvas.width = window.innerWidth * .92;
//canvas.height = window.innerHeight * .92;
render();
}
function render()
{
var border = 30;
var size = canvas.width < canvas.height ? canvas.width : canvas.height;
var width = size - 2 * border;
var height = size - 2 * border;
context.clearRect(0, 0, canvas.width, canvas.height);
context.translate(border, border);
context.lineWidth = 1;
var PI = 3.14159;
//var percent = 25;
var now = Date.now(); // UTC
var begin = Date.UTC(2021, 8, 6, 15, 0, 0);
var end = Date.UTC(2021, 8, 13, 15, 0, 0);
var total = end - begin;
var percent = (now - begin) / total * 100;
var remaining = (end - now) / 1000 / 60 / 60 / 24;
context.beginPath();
var arcWidth = size * .12;
context.lineWidth = arcWidth;
context.strokeStyle = "#00ff00";
var startAngle = -PI / 2;
var endAngle = -PI/2 + (percent / 100.0) * 2 * PI;
context.arc(width / 2, height / 2, width / 2 - arcWidth / 2 , startAngle, endAngle, false);
context.stroke();
context.beginPath();
context.strokeStyle = "#000050";
context.arc(width / 2, height / 2, width / 2 - arcWidth / 2 , startAngle, endAngle, true);
context.stroke();
context.strokeStyle = "#ffff00";
context.lineWidth = 1;
context.beginPath();
context.arc(width / 2, height / 2, width / 2, 0, 2 * PI);
context.stroke();
context.beginPath();
context.arc(width / 2, height / 2, width / 2 - arcWidth, 0, 2 * PI);
context.stroke();
context.font = "72px Arial";
context.fillStyle = "#ffffcc";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(Math.round(percent) + "%", width / 2, height / 2);
context.font = "12px Arial";
context.textBaseLine = "hanging";
var remainingDays = Math.floor(remaining);
remaining = (remaining - remainingDays) * 24;
var remainingHours = Math.floor(remaining);
remaining = (remaining - remainingHours) * 60;
var remainingMinutes = Math.floor(remaining);
remaining = (remaining - remainingMinutes) * 60;
var remainingSeconds = Math.floor(remaining);
var remainingText = remainingDays + " days, " + remainingHours + " hours, "
+ remainingMinutes + " minutes, "
+ remainingSeconds + " seconds";
context.fillText(remainingText, width / 2, height + 15);
setTimeout(render, 1000);
context.translate(-border, -border);
}
</script>
</html>