JavaScriptのストップウォッチについて

締切済

質問者：Limer
質問日時：2014/05/11 16:10
回答数：3件

以下のコードでストップウォッチを作りました
ここまではできるのですがここに新たな仕様として

・画面を開いてから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件)

最新から表示
回答順に表示

No.3

回答者： Ogre7077
回答日時：2014/05/12 11:20

ストップウォッチなので、小数部は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形式

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2014/05/12 10:25

回答ではありませんが、一緒に調整したほうがよさそうなこと

・ご提示のままだと、startを2回押したあとはstopを押しても止まらなくなります。

・ゼロパディングで表示しようとしているみたいですが、そうはなっていません。
　（切が良い時は2.1などになる）

・手元のIE8だとご提示のままでは動作しません。
　（startが予約語かなにからしく、start0などとすれば動作します）

・No1様がご指摘のように、setInterval( ,10)で時間を計測してsec+=0.01と
　するのは誤差が増幅される恐れがあります。

- 0
- 件

通報する

No.1

回答者： babu_baboo
回答日時：2014/05/12 06:24

おはようございます。

> 画面を開いてから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;"のぶぶんは、すたいるしーとに。