【JavaScript】カウントダウンタイマーを作ってみました【Webアプリ】

分秒

※STARTボタンを押すとカウントダウン後に音が鳴ります

　どうも！LSSです！！

JavaScriptで「カウントダウンタイマー」を作ってみました。

分・秒を設定して、「START」を押すとカウント開始し、指定時間経過後に音が鳴ります。

「STOP」ボタンでカウントダウンや音を停止できます。

コード

<p><input id="nt01" max="59" min="0" type="number" value="3" />分<input id="nt02" max="59" min="0" type="number" value="0" />秒</p>
<p><input id="btnstrt" type="button" value="START" />　<input id="btnstp" type="button" value="STOP" /></p>
<div id="tmg01" style="width: 300px; height: 100px; font-size: 60px; border: 1px solid black; border-radius: 15px; text-align: center;"> </div>
<p><span style="color: #ff0000;"><strong>※STARTボタンを押すとカウントダウン後に音が鳴ります</strong></span></p>
<script>// <![CDATA[
AudioContext = window.AudioContext || window.webkitAudioContext;
ctxa=new AudioContext();
fstp=true;
tcnt=0;
tms=0;
btnstrt.addEventListener('click',tstrt,false);
btnstp.addEventListener('click',tstp,false);
function tstrt(){
oc0p(0,0);
if(fstp){
fstp=false;
tms=Date.now();
tcnt=parseInt(nt01.value)*60+parseInt(nt02.value);
tm01=setTimeout('tk()',1000);
}
}
function tstp(){
fstp=true;
}
function tk(){
a=tcnt-Math.floor((Date.now()-tms)/1000);
if(a<=0){a=0;ocring();}
if(!fstp){
tmg01.innerHTML=(a>59?Math.floor(a/60)+'分':'')+(a%60)+'秒';
if(a>0){tm01=setTimeout('tk()',1000);}
}
}
function ocring(){
if(!fstp){oc0p(56,0.25);tmoc=setTimeout('ocring()',300);}
}
function oc0p(a,b) {
oc0=ctxa.createOscillator();
oc0g=ctxa.createGain();
oc0t=ctxa.currentTime;
oc0.type='triangle';
oc0.frequency.value=442*Math.pow(2,(a-9)/12-4);
oc0g.gain.setValueAtTime(0.01, oc0t);
oc0g.gain.linearRampToValueAtTime(0.3, oc0t+b/5 );
oc0g.gain.linearRampToValueAtTime(0.01, oc0t+b );
oc0.connect(oc0g);
oc0g.connect(ctxa.destination);
oc0.start();
oc0.stop(oc0t + b);
}
// ]]></script>