Skip to content

Commit 4f131b8

Browse files
himorinhimorin
committed
added seminar_timer
1 parent 302ea50 commit 4f131b8

File tree

1 file changed

+108
-0
lines changed

1 file changed

+108
-0
lines changed

‎seminar_timer.html

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>セミナー用カウントダウンタイマー</title>
6+
<script>
7+
let count_t = null, count_b = null, count_g = null, count_y = null, count_r = null;
8+
let bg = [];
9+
let bg_n = { "b": "blue", "g": "green", "y": "yellow", "r": "red" };
10+
let cur = 0;
11+
let count_date = null;
12+
let cur_timer = null;
13+
function refresh_current () {
14+
let c_date = new Date();
15+
document.getElementById('current').innerText = c_date.toLocaleTimeString();
16+
}
17+
function refresh_time () {
18+
let disp_count = "";
19+
if (count_date != null) {
20+
let date = new Date();
21+
cur = Math.floor((count_date.getTime() - date.getTime()) / 1000);
22+
}
23+
console.log(cur);
24+
if (cur < 0) {
25+
cur *= -1;
26+
disp_count = "-" + Math.floor(cur / 60).toString() + ":" + ("0" + (cur - Math.floor(cur / 60) * 60).toString()).substr(-2);
27+
cur *= -1;
28+
} else {
29+
disp_count = Math.floor(cur / 60).toString() + ":" + ("0" + (cur - Math.floor(cur / 60) * 60).toString()).substr(-2);
30+
}
31+
document.getElementById('countdown').innerText = disp_count;
32+
refresh_current();
33+
for (let cbg of bg) {
34+
if (cbg[1] >= cur) {
35+
document.getElementById('timer').className = bg_n[cbg[0]];
36+
break;
37+
}
38+
}
39+
}
40+
function startLoop() {
41+
count_date = new Date();
42+
count_date.setSeconds(count_date.getSeconds() + cur + 1);
43+
clearInterval(cur_timer);
44+
setInterval(refresh_time, 1000);
45+
}
46+
window.addEventListener("load", () => {
47+
const p = new URLSearchParams(window.location.search);
48+
if (p.has("t")) {
49+
document.getElementById('desc').style.display = "none";
50+
document.getElementById('timer').style.display = "block";
51+
count_t = p.get('t') == null ? null : parseInt(p.get('t'));
52+
cur = count_t;
53+
count_b = p.get('b') == null ? null : parseInt(p.get('b')); if (count_b != null) { bg.push(['b', count_b]); };
54+
count_g = p.get('g') == null ? null : parseInt(p.get('g')); if (count_g != null) { bg.push(['g', count_g]); };
55+
count_y = p.get('y') == null ? null : parseInt(p.get('y')); if (count_y != null) { bg.push(['y', count_y]); };
56+
count_r = p.get('r') == null ? null : parseInt(p.get('r')); if (count_r != null) { bg.push(['r', count_r]); };
57+
bg.sort((f,s) => f[1] - s[1]);
58+
refresh_time();
59+
cur_timer = setInterval(refresh_current, 1000);
60+
document.getElementById('timer').addEventListener('click', startLoop);
61+
}
62+
});
63+
</script>
64+
<style>
65+
<!--
66+
#timer { display: none; top: 0; left: 0; width: 100%; height: 100%; position: absolute; }
67+
#countdown { position: absolute; top: 20vh; width: 100%; text-align: center; font-size: 15vw; }
68+
#current { position: absolute; top: 60vh; width: 100%; text-align: center; font-size: 8vw; }
69+
#timer.blue { background-color: #0000FF; color: #FFFFFF; }
70+
#timer.green { background-color: #00FF00; }
71+
#timer.yellow { background-color: #FFFF00; }
72+
#timer.red { background-color: #FF0000; }
73+
-->
74+
</style>
75+
</head>
76+
<body>
77+
<div id="desc">
78+
<h1>使い方</h1>
79+
<p>
80+
クエリオプションを付けるとタイマー画面が表示されます。
81+
画面上部に残り時間(mm:ss表示)が、下に現在時間(hh:mm:ss表示; PCのタイムゾーン)が出て、1秒ごとに更新されます。
82+
</p>
83+
<p>
84+
背景色はデフォルトは白色、それ以外にクエリオプションで青、緑、黄、赤、表示が可能です。
85+
それぞれの色の開始時間を指定し、他の色が指定された時間まで継続されます。
86+
</p>
87+
<p>画面クリックで開始します。</p>
88+
<p>利用可能なオプションは以下の通り。</p>
89+
<dl>
90+
<dt>t</dt>
91+
<dd>カウントダウン時間 (sec)</dd>
92+
<dt>b</dt>
93+
<dd>背景色が青色になる開始時間 (sec)</dd>
94+
<dt>g</dt>
95+
<dd>背景色が緑色になる開始時間 (sec)</dd>
96+
<dt>y</dt>
97+
<dd>背景色が黄色になる開始時間 (sec)</dd>
98+
<dt>r</dt>
99+
<dd>背景色が赤色になる開始時間 (sec)</dd>
100+
</dl>
101+
<p>例としては、<code>seminar_timer.html?t=720&amp;y=120&amp;r=0</code>では、720秒(12分)のタイマー、120秒(2分)から0秒までは背景黄色、0秒以降は赤になります。</p>
102+
</div>
103+
<div id="timer">
104+
<div id="countdown"></div>
105+
<div id="current"></div>
106+
</div>
107+
</body>
108+
</html>

0 commit comments

Comments
 (0)