Skip to content

Instantly share code, notes, and snippets.

@blockworks

blockworks/nowtime3.html

Created May 17, 2021 06:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save blockworks/b447f9534e3068dc1157fb93d6282ef9 to your computer and use it in GitHub Desktop.
Save blockworks/b447f9534e3068dc1157fb93d6282ef9 to your computer and use it in GitHub Desktop.
Download ZIP
情報と時間表示2
Raw
nowtime3.html
<!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