カウントダウンタイマーにスタートとリセットを追加するには？

Question

インターネット上でコードが見つかりました。開始ボタンとリセットボタンを追加したいと思います。誰かが私を助けてくれることを願っています。

function getTimeRemaining(endtime) { 
 
    var t = Date.parse(endtime) - Date.parse(new Date()); 
 
    var seconds = Math.floor((t/1000) % 60); 
 
    var minutes = Math.floor((t/1000/60) % 25); 
 
    return { 
 
    'total': t, 
 
    'minutes': minutes, 
 
    'seconds': seconds 
 
    }; 
 
} 
 

 
function initializeClock(id, endtime) { 
 
    var clock = document.getElementById(id); 
 
    var minutesSpan = clock.querySelector('.minutes'); 
 
    var secondsSpan = clock.querySelector('.seconds'); 
 

 
    function updateClock() { 
 
    var t = getTimeRemaining(endtime); 
 
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
 
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 
 

 
    if (t.total <= 0) { 
 
     clearInterval(timeinterval); 
 
    } 
 
    } 
 

 
    updateClock(); 
 
    var timeinterval = setInterval(updateClock, 1000); 
 
} 
 

 
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); 
 
initializeClock('clockdiv', deadline);

<div id="clockdiv"> 
 
    <div> 
 
    <span class="minutes"></span> 
 
    <div class="smalltext">Minutes</div> 
 
    </div> 
 
    <div> 
 
    <span class="seconds"></span> 
 
    <div class="smalltext">Seconds</div> 
 
    </div> 
 
</div>

Answer 1

私は彼女がボタンがスクリプトと対話する方法を求めていたと思います。ボタンはスクリプトからメソッドにアクセスできます。だから、このボタンをクリックすると、ここからスタート

http://codepen.io/jdeyrup/pen/ObGPdB
スクリプトで
を開始関数を呼び出しますあなたのタイマーでこれを行う方法の一例です。

<div id="clockdiv"> 
    <div id="days">Days</div> 
    <div id="hours">Hours</div> 
    <div id="minutes">Minutes</div> 
    <div id="seconds">Seconds</div> 
</div> 
<button type="button" onclick="start()">Start</button> 
<button type="button" onclick="stop()">Stop</button> 
<script> 
function getTimeRemaining(endtime) { 
    var t = Date.parse(endtime) - Date.parse(new Date()); 
    var seconds = Math.floor((t/1000) % 60); 
    var minutes = Math.floor((t/1000/60) % 60); 
    var hours = Math.floor((t/1000/60/60) % 24); 
    var days = Math.floor(t/1000/60/60/24); 
    return { days, hours, minutes, seconds, totalTime: t }; 
} 

function updateClock(endtime) { 
    var seconds = document.getElementById('seconds'); 
    var minutes = document.getElementById("minutes"); 
    var hours = document.getElementById("hours"); 
    var days = document.getElementById('days'); 
    var t = getTimeRemaining(endtime); 
    if(t.totalTime <= 0) stop(); 
    seconds.innerHTML = ('0' + t.seconds).slice(-2) + ' Seconds'; 
    minutes.innerHTML = ('0' + t.minutes).slice(-2) + ' Minutes '; 
    hours.innerHTML = ('0' + t.hours).slice(-2) + ' Hours'; 
    days.innerHTML = ('0' + t.days).slice(-2) + ' Days'; 
} 

function start() { 
    var deadline = new Date(Date.parse(new Date()) + 15 * 1000); 
    updateClock(deadline); 
    clockTimer = setInterval(function() { 
    updateClock(deadline); 
    }, 1000); 
} 

function stop() { 
    clearInterval(clockTimer); 
} 

var clockTimer; 
</script>