- 締切済み
JavaScriptのストップウォッチについて
以下のコードでストップウォッチを作りました ここまではできるのですがここに新たな仕様として ・画面を開いてから3秒後に自動でカウントする というコードを入れたいです ですからスタートボタンをなくしてストップとリセットだけにしたいです 初心者なので変なコードになっているかもしれません その時はこうした方がいい！みたいなことを言っていただけるとすごく助かります どなたかご教授お願いします HTMLコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="css/aaa.css" rel="Stylesheet" /> </head> <body> <h1>ストップウォッチ</h1> <div id="sec" style="font-size:100px;">0.00</div> <input id="btn_start" type="button" value="Start" onclick="start();"> <input id="btn_stop" type="button" value="Stop" onclick="stop();"> <input id="btn_reset" type="button" value="Reset" onclick="reset();"> <script> var sec = 0.00; var timerId; //スタートボタン function start() { timerId = setInterval(function() { sec += 0.01; document.getElementById('sec').innerHTML = Math.round(sec*100)/100; //もしも0.0で表示したければ10にすること },10); //この数字はカウントの速さ0.00表示の時は10！ } //ストップボタン function stop(){ clearInterval(timerId); } //リセットボタン function reset(){ document.getElementById('sec').innerHTML = '0.00'; sec = 0.00; } </script> </body> </html> CSSコード body { background-color:#B2B2B2; } h1 { background-color:#00EFFF; } #sec { background-color:#00EFFF; } #btn_start ,#btn_stop ,#btn_reset { margin-top:25px; background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C); background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C)); border: 1px solid #DDD; color: #FFF; width: 60px; padding: 10px 0; }
- Limer
- お礼率0% (0/6)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- Ogre7077
- ベストアンサー率65% (170/258)
ストップウォッチなので、小数部は0埋めしたほうが見やすいでしょう 修正前) Math.round(sec*100)/100 修正後) sec.toFixed(2) https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed 「スタート」を連続して押すと挙動が怪しくなるので、 処理前に現在の状態を確認すべきです var timerId = 0; function start() { if (timerId) return; // 動作中ならなにもしない timerId = 開始処理(); } function stop(){ if (!timerId) return; // 停止中ならなにもしない 停止処理(); timerId = 0; } 変数と関数が増えると、変数名の競合が不明確なバグがおきがちですので、 JavaScript らしくオブジェクトに纏めては如何でしょうか <input type="button" onclick="stopwatch.start()"> <input type="button" onclick="stopwatch.stop()"> <script> var stopwatch = { sec: 0, timerId: 0, start: function() { this.timerId = setInterval(...); }, stop: function() { clearInterval(this.timerId); }, } <script> ボタンを装飾するのは良いのですが、 background: -moz-linear-gradient( ... ); background: -webkit-gradient( ... ); color: #FFF; では、mozでもwebkitでもないブラウザでは見づらくなると推測します。 なので、最低でもこれを併せて指定してください background: #09C; // どんな環境でも最低限には表示 background: linear-gradient( ... ); // CSS3形式
- fujillin
- ベストアンサー率61% (1594/2576)
回答ではありませんが、一緒に調整したほうがよさそうなこと ・ご提示のままだと、startを2回押したあとはstopを押しても止まらなくなります。 ・ゼロパディングで表示しようとしているみたいですが、そうはなっていません。 （切が良い時は2.1などになる） ・手元のIE8だとご提示のままでは動作しません。 （startが予約語かなにからしく、start0などとすれば動作します） ・No1様がご指摘のように、setInterval( ,10)で時間を計測してsec+=0.01と するのは誤差が増幅される恐れがあります。
- babu_baboo
- ベストアンサー率51% (268/525)
おはようございます。 > 画面を開いてから3秒後に自動でカウントする スクリプトのさいごにでも、いかをくわえます。 setTimeout (start, 3000); -- > その時はこうした方がいい Javascript の、setInterval, setTimeout のよびだしは、かなりいいかげんです。 sec += 0.01; これではせいかくなじかんをきざめません。 start () がよばれたときに、dateObj.getTime () などのあたいをきおくしておき、 その「差」をけいかじかんとします -- > document.getElementById('sec').innerHTML = たとえば、 socument.getElementById(xxx).firstChild.style.color = 'red'; のように、「ドット」がつづくとそのたびにもくてきのものをさがします。 なので var target = socument.getElementById(xxx).firstChild.style; とし、ひつようなときに target.color = 'red'; のようにします。 innerHTML は、「解析器」がはいりものすごくじかんがかかります。 <div id="sec" style="font-size:100px;">0.00</div> の、「0.00」のぶぶんは、てきすとのーどになります。 していするには、 var tn = document.getElementById('sec').firstChild; もじをへんこうするには、 tn.nodeValue = '0.00'; のようにします -- おなじようなきのうは、まとめます。 var sec = 0.00; は、にかしょあります。 var sec; reset (); -- document.getElementById('sec').innerHTML もにかいしゅつげんします。 function view () { tn.nodeValue = (new Date).getTime() - (スタートしたときのじかん) / 100; } として、ひつようなときに view() します。 -- かんすうのよびだしは、じかんがかかります。 「高速」をいしきしないかぎりは、へたなチューニングしなくてもよいのかも。 -- 初心者なので変なコード そうはおもいませんよ。 ただ「グローバル変数」をあまりつかわずにかければ・・・。 <title>ここにたいとる</title> が、ぬけています。 これは、ひっすです。（わたしもわすれますが） inputようそは、いんらいんようそです。 html(5)ならゆるされますが、なにかのぶろっくようそでかこむことをおすすめします。 style="font-size:100px;"のぶぶんは、すたいるしーとに。
