Created
May 17, 2021 06:58
-
-
Save blockworks/b447f9534e3068dc1157fb93d6282ef9 to your computer and use it in GitHub Desktop.
情報と時間表示2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>時報と時間表示</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <p id="date"></p> | |
| <audio src="silence.mp3" controls id="silence"></audio> | |
| <audio id="0000" src="mp3/0000.mp3" preload="auto"></audio> | |
| <audio id="0030" src="mp3/0030.mp3" preload="auto"></audio> | |
| <audio id="0100" src="mp3/0100.mp3" preload="auto"></audio> | |
| <audio id="0130" src="mp3/0130.mp3" preload="auto"></audio> | |
| <audio id="0200" src="mp3/0200.mp3" preload="auto"></audio> | |
| <audio id="0230" src="mp3/0230.mp3" preload="auto"></audio> | |
| <audio id="0300" src="mp3/0300.mp3" preload="auto"></audio> | |
| <audio id="0330" src="mp3/0330.mp3" preload="auto"></audio> | |
| <audio id="0400" src="mp3/0400.mp3" preload="auto"></audio> | |
| <audio id="0430" src="mp3/0430.mp3" preload="auto"></audio> | |
| <audio id="0500" src="mp3/0500.mp3" preload="auto"></audio> | |
| <audio id="0530" src="mp3/0530.mp3" preload="auto"></audio> | |
| <audio id="0600" src="mp3/0600.mp3" preload="auto"></audio> | |
| <audio id="0630" src="mp3/0630.mp3" preload="auto"></audio> | |
| <audio id="0700" src="mp3/0700.mp3" preload="auto"></audio> | |
| <audio id="0730" src="mp3/0730.mp3" preload="auto"></audio> | |
| <audio id="0800" src="mp3/0800.mp3" preload="auto"></audio> | |
| <audio id="0830" src="mp3/0830.mp3" preload="auto"></audio> | |
| <audio id="0900" src="mp3/0900.mp3" preload="auto"></audio> | |
| <audio id="0930" src="mp3/0930.mp3" preload="auto"></audio> | |
| <audio id="1000" src="mp3/1000.mp3" preload="auto"></audio> | |
| <audio id="1030" src="mp3/1030.mp3" preload="auto"></audio> | |
| <audio id="1100" src="mp3/1100.mp3" preload="auto"></audio> | |
| <audio id="1130" src="mp3/1130.mp3" preload="auto"></audio> | |
| <audio id="1200" src="mp3/1200.mp3" preload="auto"></audio> | |
| <audio id="1230" src="mp3/1230.mp3" preload="auto"></audio> | |
| <audio id="1300" src="mp3/1300.mp3" preload="auto"></audio> | |
| <audio id="1330" src="mp3/1330.mp3" preload="auto"></audio> | |
| <audio id="1400" src="mp3/1400.mp3" preload="auto"></audio> | |
| <audio id="1430" src="mp3/1430.mp3" preload="auto"></audio> | |
| <audio id="1500" src="mp3/1500.mp3" preload="auto"></audio> | |
| <audio id="1530" src="mp3/1530.mp3" preload="auto"></audio> | |
| <audio id="1600" src="mp3/1600.mp3" preload="auto"></audio> | |
| <audio id="1630" src="mp3/1630.mp3" preload="auto"></audio> | |
| <audio id="1700" src="mp3/1700.mp3" preload="auto"></audio> | |
| <audio id="1730" src="mp3/1730.mp3" preload="auto"></audio> | |
| <audio id="1800" src="mp3/1800.mp3" preload="auto"></audio> | |
| <audio id="1830" src="mp3/1830.mp3" preload="auto"></audio> | |
| <audio id="1900" src="mp3/1900.mp3" preload="auto"></audio> | |
| <audio id="1930" src="mp3/1930.mp3" preload="auto"></audio> | |
| <audio id="2000" src="mp3/2000.mp3" preload="auto"></audio> | |
| <audio id="2030" src="mp3/2030.mp3" preload="auto"></audio> | |
| <audio id="2100" src="mp3/2100.mp3" preload="auto"></audio> | |
| <audio id="2130" src="mp3/2130.mp3" preload="auto"></audio> | |
| <audio id="2200" src="mp3/2200.mp3" preload="auto"></audio> | |
| <audio id="2230" src="mp3/2230.mp3" preload="auto"></audio> | |
| <audio id="2300" src="mp3/2300.mp3" preload="auto"></audio> | |
| <audio id="2330" src="mp3/2330.mp3" preload="auto"></audio> | |
| <script language="JavaScript"> | |
| // クリック用のオーディオUIを非表示させるトグル | |
| const target = document.getElementById('date'); | |
| target.addEventListener('click', function(){ | |
| document.getElementById('silence').classList.toggle('toggle'); | |
| }); | |
| const nextTiming = () => 1000 - Date.now() % 1000; | |
| setTimeout(function main(){ | |
| date = new Date(); | |
| gettime = date.getTime(); | |
| const yyyy = date.getFullYear(); | |
| const mm = toDoubleDigits(date.getMonth() + 1); | |
| const dd = toDoubleDigits(date.getDate()); | |
| const ss = toDoubleDigits( Math.floor(gettime/1000)%60 ); | |
| const mi = toDoubleDigits( Math.floor(gettime/1000/60)%60 ); | |
| const hh = toDoubleDigits( Math.floor(gettime/1000/60/60)%24+9 ); | |
| var element = document.getElementById("date"); | |
| element.innerHTML = '🇯🇵' + yyyy + '.' + mm + '.' + dd + ' ' + hh + ':' + mi + ':' + ss; | |
| ana(hh,mi,ss); | |
| setTimeout( main, nextTiming() ); | |
| }, nextTiming() ); | |
| //時間をゼロ埋め | |
| function toDoubleDigits (num) { | |
| num += ""; | |
| if (num.length === 1) { | |
| num = "0" + num; | |
| } | |
| return num; | |
| }; | |
| //30分ごとにアナウンス | |
| function ana(hh,mi,ss){ | |
| if(hh == 23 && mi == 59 && ss == 57){ | |
| document.getElementById("0000").play(); | |
| } | |
| if(hh == 00 && mi == 29 && ss == 27){ | |
| document.getElementById("0030").play(); | |
| } | |
| if(hh == 00 && mi == 59 && ss == 57){ | |
| document.getElementById("0100").play(); | |
| } | |
| if(hh == 01 && mi == 29 && ss == 27){ | |
| document.getElementById("0130").play(); | |
| } | |
| if(hh == 01 && mi == 59 && ss == 57){ | |
| document.getElementById("0200").play(); | |
| } | |
| if(hh == 02 && mi == 29 && ss == 27){ | |
| document.getElementById("0230").play(); | |
| } | |
| if(hh == 02 && mi == 59 && ss == 57){ | |
| document.getElementById("0300").play(); | |
| } | |
| if(hh == 03 && mi == 29 && ss == 27){ | |
| document.getElementById("0330").play(); | |
| } | |
| if(hh == 03 && mi == 59 && ss == 57){ | |
| document.getElementById("0400").play(); | |
| } | |
| if(hh == 04 && mi == 29 && ss == 27){ | |
| document.getElementById("0430").play(); | |
| } | |
| if(hh == 04 && mi == 59 && ss == 57){ | |
| document.getElementById("0500").play(); | |
| } | |
| if(hh == 05 && mi == 29 && ss == 27){ | |
| document.getElementById("0530").play(); | |
| } | |
| if(hh == 05 && mi == 59 && ss == 57){ | |
| document.getElementById("0600").play(); | |
| } | |
| if(hh == 06 && mi == 29 && ss == 27){ | |
| document.getElementById("0630").play(); | |
| } | |
| if(hh == 06 && mi == 59 && ss == 57){ | |
| document.getElementById("0700").play(); | |
| } | |
| if(hh == 07 && mi == 29 && ss == 27){ | |
| document.getElementById("0730").play(); | |
| } | |
| if(hh == 07 && mi == 59 && ss == 57){ | |
| document.getElementById("0800").play(); | |
| } | |
| if(hh == 08 && mi == 29 && ss == 27){ | |
| document.getElementById("0830").play(); | |
| } | |
| if(hh == 08 && mi == 59 && ss == 57){ | |
| document.getElementById("0900").play(); | |
| } | |
| if(hh == 09 && mi == 29 && ss == 27){ | |
| document.getElementById("0930").play(); | |
| } | |
| if(hh == 09 && mi == 59 && ss == 57){ | |
| document.getElementById("1000").play(); | |
| } | |
| if(hh == 10 && mi == 29 && ss == 27){ | |
| document.getElementById("1030").play(); | |
| } | |
| if(hh == 10 && mi == 59 && ss == 57){ | |
| document.getElementById("1100").play(); | |
| } | |
| if(hh == 11 && mi == 29 && ss == 27){ | |
| document.getElementById("1130").play(); | |
| } | |
| if(hh == 11 && mi == 59 && ss == 57){ | |
| document.getElementById("1200").play(); | |
| } | |
| if(hh == 12 && mi == 29 && ss == 27){ | |
| document.getElementById("1230").play(); | |
| } | |
| if(hh == 12 && mi == 59 && ss == 57){ | |
| document.getElementById("1300").play(); | |
| } | |
| if(hh == 13 && mi == 29 && ss == 27){ | |
| document.getElementById("1330").play(); | |
| } | |
| if(hh == 13 && mi == 59 && ss == 57){ | |
| document.getElementById("1400").play(); | |
| } | |
| if(hh == 14 && mi == 29 && ss == 27){ | |
| document.getElementById("1430").play(); | |
| } | |
| if(hh == 14 && mi == 59 && ss == 57){ | |
| document.getElementById("1500").play(); | |
| } | |
| if(hh == 15 && mi == 29 && ss == 27){ | |
| document.getElementById("1530").play(); | |
| } | |
| if(hh == 15 && mi == 59 && ss == 57){ | |
| document.getElementById("1600").play(); | |
| } | |
| if(hh == 16 && mi == 29 && ss == 27){ | |
| document.getElementById("1630").play(); | |
| } | |
| if(hh == 16 && mi == 59 && ss == 57){ | |
| document.getElementById("1700").play(); | |
| } | |
| if(hh == 17 && mi == 29 && ss == 27){ | |
| document.getElementById("1730").play(); | |
| } | |
| if(hh == 17 && mi == 59 && ss == 57){ | |
| document.getElementById("1800").play(); | |
| } | |
| if(hh == 18 && mi == 29 && ss == 27){ | |
| document.getElementById("1830").play(); | |
| } | |
| if(hh == 18 && mi == 59 && ss == 57){ | |
| document.getElementById("1900").play(); | |
| } | |
| if(hh == 19 && mi == 29 && ss == 27){ | |
| document.getElementById("1930").play(); | |
| } | |
| if(hh == 19 && mi == 59 && ss == 57){ | |
| document.getElementById("2000").play(); | |
| } | |
| if(hh == 20 && mi == 29 && ss == 27){ | |
| document.getElementById("2030").play(); | |
| } | |
| if(hh == 20 && mi == 59 && ss == 57){ | |
| document.getElementById("2100").play(); | |
| } | |
| if(hh == 21 && mi == 29 && ss == 27){ | |
| document.getElementById("2130").play(); | |
| } | |
| if(hh == 21 && mi == 59 && ss == 57){ | |
| document.getElementById("2200").play(); | |
| } | |
| if(hh == 22 && mi == 29 && ss == 27){ | |
| document.getElementById("2230").play(); | |
| } | |
| if(hh == 22 && mi == 59 && ss == 57){ | |
| document.getElementById("2300").play(); | |
| } | |
| if(hh == 23 && mi == 29 && ss == 27){ | |
| document.getElementById("2330").play(); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment