以下のコードでストップウォッチを作りました
ここまではできるのですがここに新たな仕様として
・画面を開いてから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;
}
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
ストップウォッチなので、小数部は0埋めしたほうが見やすいでしょう
修正前) Math.round(sec*100)/100
修正後) sec.toFixed(2)
https://developer.mozilla.org/ja/docs/Web/JavaSc …
「スタート」を連続して押すと挙動が怪しくなるので、
処理前に現在の状態を確認すべきです
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形式
No.2
- 回答日時:
回答ではありませんが、一緒に調整したほうがよさそうなこと
・ご提示のままだと、startを2回押したあとはstopを押しても止まらなくなります。
・ゼロパディングで表示しようとしているみたいですが、そうはなっていません。
(切が良い時は2.1などになる)
・手元のIE8だとご提示のままでは動作しません。
(startが予約語かなにからしく、start0などとすれば動作します)
・No1様がご指摘のように、setInterval( ,10)で時間を計測してsec+=0.01と
するのは誤差が増幅される恐れがあります。
No.1
- 回答日時:
おはようございます。
> 画面を開いてから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;"のぶぶんは、すたいるしーとに。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ActiveXobjectが作成できない
-
【Tabキー】特定の範囲内だけで...
-
<a>タグのテキストを取得
-
Click回数を数え、規定された回...
-
RadioButtonListの表示制御
-
画像の一部を表示
-
問題はbind の付いたリスナーを...
-
javascriptであるボタンを押す...
-
idを使わずにonclickで自身の要...
-
二次元配列を使って順位をだす...
-
関数でy=g(x)のgとは何の略です...
-
乗換案内 VBAで操作したい
-
javascriptの基本的なことだと...
-
window.openでタイトル名の指定
-
Boolean型配列中のTrueの有無を...
-
JavaScriptで、現在日時から100...
-
同じIDで定義した要素の配列を...
-
Googleスプレッドシートとスク...
-
DOM要素を削除しても、イベント...
-
Javascriptで定期的にF5を押す...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
任意の座標をクリックさせるには
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
Click回数を数え、規定された回...
-
HTML:Tableタグに対し、JavaScr...
-
JavaScriptでオブジェクトを取...
-
onchangeイベントを使ってspan...
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
重複しないくじの作り方がわか...
-
javascript 特定のタグのidの存...
-
配列の大括弧と丸括弧はどう違う?
-
javascriptであるボタンを押す...
-
「nullまたはオブジェクトでは...
-
div要素内の全input要素をdisable
-
onclickを使わずにイベント処理...
-
画像上のクリックした場所が分...
-
RadioButtonListの表示制御
-
javascriptで自動計算フォーム...
おすすめ情報