- 締切済み
HTML5,CSSでストップウォッチを作りたいです
こんにちは 最近HTMLを始めた初心者です まだ簡単なホームページを作れるレベルです、、、。 HTMLとCSSでストップウォッチを作れると聞きました すごく単純なものでいいです 分、秒、コンマを表示したいのです わかる方がいればコードを教えてくださるとすごくうれしいです
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- -q7P2izb__
- ベストアンサー率47% (27/57)
こんにちは。 サンプルを実行した時はまさか初心者の人が作ったとは。。 と思いました。さて、HTML部分(JS)だけ1行追加しましたところ、 数秒後（今回は3秒後）に自動で実行されました。 ストップボタンも押すと、ストップされます。 また、CSSのリンクの書き方を少し変更しました。 こちらはCSSファイルを含めて実行していないため、あくまでアドバイスです。 以下、HTML(JavaScript含む)部分の変更後のソースコードになります。 -- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- <link href="css/aaa.css" rel="Stylesheet" />■変更前 --> <link rel = "stylesheet" href = "css/aaa.css" type = "text/css"><!--■変更後（自己流）--> </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; setTimeout('start()', 3000); //■追加(3秒後にstart()を実行) //スタートボタン 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> 以上です。 ご確認宜しくお願い致します。
- 参考URL：
- http://codaholic.org/?p=896
- UC_M
- ベストアンサー率63% (7/11)
Googleで"HTML ストップウォッチ"で検索するだけでお望みのソースコードがたくさん得られました。 検索するとやり方が異なるものがたくさん出てくると思いますが、どの方法で実装するか悩むよりもまずはひとつ実装してみてください。 もしかするとそれはベストな実装方法でないかもしれません。 しかし、良い実装を覚えるためには悪い実装をたくさん知らなければなりません。 時間に余裕があればいくつかのサイトのソースを実装してみて、同じところ、違うところを見つけてください。 なお、必要なのはHTMLとJavaScriptの知識です。 CSSはHTMLの見た目（デザイン）を変えるものなのでストップウォッチの機能には関係がありません。 また、ストップウォッチを作るだけならHTMLの新しい仕様「HTML5」の機能を使う事はないと思います。 参考：Step.84 - ストップウォッチ http://www.red.oit-net.jp/tatsuya/java/stopw.htm
- muuming2001
- ベストアンサー率23% (202/847)
私の知識は古いのでHTMLとjavascriptでの実現方法しか知りません。 もしかしたら、HTMLだけで実現可能な世界になったのかもしれませんが、 一昔前のままでしたら、javascriptが必要になると思います。 javascript ストップウォッチ で検索されてみてはいかがでしょうか？
補足
早速のご回答ありがとうございます 見よう見まねで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; }
補足
ご回答ありがとうございます 調べてすごく簡単なものですが作ってみました ですが少し仕様を変更したいです 以下のコードでストップウォッチを作りました ここまではできるのですがここに新たな仕様として ・画面を開いてから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; }