首頁猿問正在學JS的渣渣哪位大神能做出這樣...

正在學JS的渣渣哪位大神能做出這樣的計時器呀求救^o^

JavaScript

慕粉0931027254 2017-08-28 00:03:14

查看完整描述

1 回答

千秋此意

TA貢獻158條經(jīng)驗獲得超188個贊

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>計時器</title>
</head>
<body>
????<div?id="timer-container">
????????<h2>計時器</h2>
????????<input?type="text"?id="timer-view"?readonly?value="00:00:00:00">
????????<button?onclick="start()">開始計時</button>
????????<button?onclick="pause()">結(jié)束計時</button>
????????<button?onclick="reset()">復位</button>
????</div>

????<script>
????????var?timer?=?null;
????????var?msDef?=?0;
????????var?timerData?=?[];
????????var?timerView?=?document.getElementById('timer-view');

????????function?start()?{
????????????clearInterval(timer);
????????????timer?=?setInterval(function()?{
????????????????update((msDef?+=?10,?msDef));
????????????},?10);
????????}

????????function?pause()?{
????????????clearInterval(timer);
????????}

????????function?reset()?{
????????????clearInterval(timer);
????????????update((msDef?=?0,?msDef));
????????}

????????function?update(ms)?{
????????????timerData[0]?=?Math.floor(ms?/?3600000);
????????????timerData[1]?=?Math.floor(ms?/?60000?%?60);
????????????timerData[2]?=?Math.floor(ms?/?1000?%?60)
????????????timerData[3]?=?Math.floor(ms?/?10?%?100);

????????????timerView.value?=?formatTime(timerData);
????????}

????????function?formatTime(arr)?{
????????????for?(var?i?=?0;?i?<?arr.length;?i++)?{
????????????????arr[i]?=?(arr[i]?<?10???'0'?:?'')?+?arr[i];
????????????}
????????????return?arr.join(':');
????????}
????</script>
</body>
</html>

（只寫了js，樣式簡單樓主自己寫下吧~，望采納~）

2 反對回復 2017-08-28