-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathafter-vaccine.html
72 lines (70 loc) · 2.64 KB
/
after-vaccine.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>接種後経過時間</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script>
// 接種日時を設定
const injection_date = new Date(2022, 12-1, 12, 18, 0);
function parse_ms(ms) {
const total_second = Math.floor( ms / 1000 );
const day = Math.floor( total_second / 86400 );
const hour = Math.floor( total_second % 86400 / 3600 );
const minute = Math.floor( total_second % 3600 / 60 );
return [day, hour, minute];
}
function update_message() {
const now_date = new Date();
const diff = now_date - injection_date;
const [day, hour, minute] = parse_ms(diff);
const sesshugo = `${day}日と${hour}時間${minute}分` + (
day >= 1 ? `（${hour + 24 * day}時間）` : ''
);
document.getElementById("sesshugo").innerText = sesshugo;
document.getElementById("last_update").innerText = now_date.toString();
document.getElementById("menekiato").innerText = 14 - day;
// TODO: 14 - day <= 0 の場合の表示
document.getElementById("toggle_description").addEventListener("click", () => {
const style = document.getElementById("description").style
if ( style.display !== "block" ) {
style.display = "block";
} else {
style.display = "none";
}
});
}
addEventListener("load", () => {
update_message();
setInterval(update_message, 60 * 1000);
});
</script>
<style>
body {
font-size: 24pt;
}
#sesshugo {
font-weight: bold;
font-size: 1.5em;
}
#description {
border: 1px solid green;
display: none;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #888
}
}
</style>
</head>
<body>
<div>接種後<br><span id="sesshugo">...</span><br>経過しました。</div>
<div>免疫が付くまであと<span id="menekiato">...</span>日</div>
<hr>
<div>Last Update: <span id="last_update"></span></div>
<div><legend><button id="toggle_description">▼説明</button></legend></div>
<p id="description">時間はHTMLに直接書かれています。使う方はダウンロードしてその箇所を書き換えてローカルで開いて使用して下さい。</p>
</body>
</html>