◀︎ K ▶︎

<html lang="ja">
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<style>
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
*:focus{outline:none;}
select{width:250px;}
svg{margin-top:0;
margin-left:230px}
path{fill:#cdefff;}
.コンポーネント{psition:relative;
width:500px;
height:424px;
background-color:#123456;
margin:100px auto;
display:block;
text-align:center;
border:1px solid #cdefff;
border-radius:20px;}
.年月日{font-size:30px;
margin-top:50px;
margin-bottom:-50px;}
.時間{font-size:80px;}
.タイム{font-family:"Share Tech Mono",monospace;
color:#cdefff;
text-shadow:0 0 40px #abcdef;}
path{fill:#cdefff;}
a:hover path{fill:#00ff00;}
body{background-color:#123456;}
.タイマー_セット{text-align:center;
margin-top:-40px;
margin-bottom:20px;}
#手動_演奏停止{margin-top:15px;
margin-left:120px;
height:50px;
width:150px;
</style>

<div class="コンポーネント">
<div class="タイム">
<p class="年月日"></p>
<p class="時間"></p>
<div class="タイマー_セット">
<form name="たいまー">
<input type="text"value=""size="4"class="タイマー_セット"><span>分</span>
<input type="text"value=""size="4"class="タイマー_セット"><span>秒</span>
<input type="button"value="スタート"onclick="始まり()">
<input type="button"value="ストップ"onclick="location.reload()">
</form>
<form name="曲_りすと">
<select name="素材_曲"class="音源_選択">
<option>Bach_Invention</option>
<option>Beethoven_Sonata_No.8_2</option>
<option>Chopin_Nocturne</option>
<option>Debussy_Arabesque</option>
<option>Mozart_Sonata</option>
</select>
</form></div></div>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 200 200">
<a xlink:href="Sample_Coding_136-J.html"><path d="M12,4c-4.9,0-9,4.1-9,9s4.1,9,9,9s9-4.1,9-9S16.9,4,12,4z M12,20c-3.8,0-7-3.2-7-7s3.2-7,7-7s7,3.2,7,7S15.8,20,12,20z"/>
<path d="M13,8h-2v4H7v2h4v4h2v-4h4v-2h-4V8z M20.3,6.7l-3-3l1.4-1.4l3,3L20.3,6.7z M5.3,2.3l1.4,1.4l-3,3L2.3,5.3L5.3,2.3z"/></a>
</svg></div>

<script>
!function(井){let 天={};function 栄(有){if(天[有])return 天[有].exports;let 王=天[有]={愛:有,得:!1,exports:{}};return 井[有].call(王.exports,王,王.exports,栄),王.得=!0,王.exports}栄.夢=井,栄.市=天,栄.出=function(井,天,有){栄.王(井,天)||Object.defineProperty(井,天,{enumerable:!0,get:有})},栄.有=function(井){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(井,Symbol.toStringTag,{value:"文字類"}),Object.defineProperty(井,"mp3_音源",{value:!0})},栄.天=function(井,天){if(1&天&&(井=栄(井)),8&天)return 井;if(4&天&&"object"==typeof井&&井&&井.mp3_音源)return 井;let 有=Object.create(null);if(栄.有(有),Object.defineProperty(有,"default",{enumerable:!0,value:井}),2&天&&"string"!=typeof 井)for(let 王 in 井)栄.出(有,王,function(天){return e[天]}.bind(null,王));return 有},栄.栄=function(井){let 天=井&&井.mp3_音源?function(){return 井.default}:function(){return 井};return 栄.出(天,"亜",天),天},栄.王=function(井,天){return Object.prototype.hasOwnProperty.call(井,天)},栄.p="",栄(栄.s=0)}([function(井,天){setInterval((function(){let 井=new Date,天=井.getFullYear(),栄=井.getMonth()+1,有=井.getDate(),王=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][井.getDay()],市=井.getHours(),行=井.getMinutes(),亜=井.getSeconds();栄=栄<10?"0"+栄:栄,有=有<10?"0"+有:有,市=市<10?"0"+市:市,行=行<10?"0"+行:行,亜=亜<10?"0"+亜:亜;let 愛="".concat(天,".").concat(栄,".").concat(有,"(").concat(王+")"),得="".concat(市,":").concat(行,":").concat(亜);document.querySelector(".年月日").innerText=愛,document.querySelector(".時間").innerText=得}))}]);
let 設定時間;
let 音源=new Audio();
function 始まり(){切替(true);
設定時間=setInterval("待つ()",1000);}
function 停止()
{切替(false);
clearInterval(設定時間);}
function 切替(buttonSwitch)
{let 手動_開始=document.たいまー.elements[2]
let 手動_停止=document.たいまー.elements[3]
let 時間差=buttonSwitch
手動_開始.disabled=時間差
手動_停止.disabled=!時間差}
function 待つ()
{let せっと_分=document.たいまー.elements[0].value;
let せっと_秒=document.たいまー.elements[1].value;
if((せっと_分=="")&&(せっと_秒=="0"))
{alert("0 以外の数字");
初期化();}
else
{if(せっと_分=="")せっと_分=0;
せっと_分=parseInt(せっと_分);
if(せっと_秒=="")せっと_秒=0;
せっと_秒=parseInt(せっと_秒);
かうんと(せっと_分*60+せっと_秒-1);}}
function 素材_順番()
{let 素材_選択=document.曲_りすと.素材_曲;
let 素材_番号=素材_選択.selectedIndex;
let 素材_0="piano_mp3/Bach_Invention.mp3";
let 素材_1="piano_mp3/Beethoven_Sonata_No.8_2.mp3";
let 素材_2="piano_mp3/Chopin_Nocturne.mp3";
let 素材_3="piano_mp3/Debussy_Arabesque.mp3";
let 素材_4="piano_mp3/Mozart_Sonata.mp3";
let 素材_列=[素材_0,素材_1,素材_2,素材_3,素材_4]
return 素材_列[素材_番号]}
function かうんと(飛){飛=parseInt(飛);
if(飛<=0){初期化();
音(true)
入力項目()}
else
{document.たいまー.elements[0].value=Math.floor(飛/60);
document.たいまー.elements[1].value=飛 % 60;}}
function 音(時間差){let 音源_発音=素材_順番()
音源.src=音源_発音;
if(時間差){音源.play()}
else
{音源.pause()
音源.currentTime=0;
document.getElementById("手動_演奏停止").remove();}}
function 初期化(){document.たいまー.elements[0].value="0";
document.たいまー.elements[1].value="0";
document.たいまー.elements[2].disabled=false;
clearInterval(設定時間);}
</script>

</html>