JavaScriptを使った10秒ちょうどで止めるやつを作った

　プログラミング初心者なので、とりあえずフロントエンドからやろうということで、本を参考にしながら何か作ってみました。
最初はネットにある情報だけでなんとかしようとしたけど全然ダメで、やっぱり本は買うべきだなーと感じました。

参考文献

これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん

　まだ最後らへんはやってないですけど、めちゃくちゃ良書だと感じました。他の本をやっていないため比較することはできませんが、気になっていたBootstrapやjQuery、Vue.jsまで入っているのでお得感あります。

開発環境

Windows 10 Home
Visual Studio Code 1.44.2
Google Chrome

コード

HTML

index.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width"><title>10秒ピッタリで止めるやつ</title><linktype="text/css"rel="stylesheet"href="style.css"><script type="text/javascript"src="10seconds.js"></script></head><body><divclass="container"><pid="timer">00:00</p><buttonid="button"class="start"onclick="clicked(this)">START</button><pid="comment"></p></div></body></html>

　HTMLに関しては、どういう機能があるかとかはだいたい理解できた気がします。ただ、一般的にどう使うかみたいなのはまだ全然分からないので、どんどん作っていくしかないかなと思います。

CSS

style.css

.container{text-align:center;max-width:600px;margin:50pxauto;}#timer{background-color:black;color:rgb(16,245,46);font-size:128px;margin:0auto;width:600px;}#button{margin-top:30px;font-size:64px;width:600px;color:white;text-align:center;border:solidwhite;}#comment{font-size:64px;color:black;text-align:center;}.start{background-color:rgba(0,119,255,0.651);}.stop{background-color:rgba(255,0,0,0.87);}.reset{background-color:rgba(0,255,21,0.87);}

　これも一応ルールとかについては理解できましたが、まだまだ知らないことが多すぎるので、これは知識を増やすことが必要かなって感じですね。

JavaScript

10seconds.js

//グローバル変数の宣言varstart;vardisplay;vartimer_id;varmilli;//keta関数//桁合わせをする関数functionketa(value){//値が10より小さい場合if(value<10){//桁合わせをするために0を追加value='0'+value;}returnvalue;}//check関数//タイマー表示のための関数functioncheck(){//Dateオブジェクトの生成varcount=newDate();//1970年1月1日からの経過時間をミり秒単位で取得milli=count.getTime();//時間差を計算milli-=start;//1/1000を整数で表示するため、10で割り、1/100秒単位をmilliに入れるmilli=Math.floor(milli/10);//milliを100で割り、1秒単位を計算し、secondに入れるvarsecond=Math.floor(milli/100);//milliが0~99以外の値を取らないようにする//表示する文字列を作るdisplaydisplay=keta(second)+':'+keta(milli-second*100);//タイマーに表示するdocument.getElementById('timer').innerHTML=display;}//clicked関数//クリックされたときに実行されるfunctionclicked(ele){//ボタンの文字がSTARTのときif(ele.innerHTML==='START'){//Dateオブジェクトの生成varnow=newDate();//1970年1月1日からの経過時間をミり秒単位で取得start=now.getTime();//0.01(10/1000)秒ごとにcheck()関数を実行timer_id=setInterval(check,10);//ボタンの文字をSTOPにするele.innerHTML='STOP';//classからstartを外すele.classList.remove('start');//classにstopを加えるele.classList.add('stop');}//ボタンの文字をSTOPのときelseif(ele.innerHTML==='STOP'){//タイマーを止めるclearInterval(timer_id);document.getElementById('timer').innerHTML=display;//符号用の変数varsign;//差を計算vardiff=milli-1000;//符号を調べるif(diff>0)sign='+';elsesign='-'//時間差を計算するdocument.getElementById('comment').innerHTML=sign+keta(Math.floor(Math.abs(diff)/100))+':'+keta(Math.floor(Math.abs(diff)%100));//ボタンの文字をRESETにするele.innerHTML='RESET';//classからstopを外すele.classList.remove('stop');//classにresetを加えるele.classList.add('reset');}else{//タイマーをリセットdocument.getElementById('timer').innerHTML='00:00';//時間差の表示を消すdocument.getElementById('comment').innerHTML=null;//ボタンの文字をSTARTにするele.innerHTML='START';//classからresetを外すele.classList.remove('reset');//classにstartを加えるele.classList.add('start');}}