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;
}