htmlでカウントダウンタイマーを実行するにはどうすればよいですか？

Question

私は自分のI.Tを支援しています。いくつかのタスクのためにイースターエッグを作成する教師です.HTMLでカウントダウンタイマーを作成したいと思います。 説明： ウェブサイトに入るたびに、カウントダウンタイマーが開始されます。 例： 私は30分でカウントダウンタイマー付きのHTMLコードを持っています。ウェブサイトに行くと、カウントダウンタイマーがダウンし始めますが、ウェブサイトをリフレッシュするとリセットされます。 私はあなたが理解していただければ幸いです！

Answer 1

ウェブサイト/ブラウザを終了しても同じままになるので、サーバ側の言語を使用せずにjavascriptだけを使用したい場合は、localStorage変数に残っている時間を保存することができます。

例：

function countdown() { 
    time = parseInt(localStorage.time); //All variables in localstorage are strings 
    //Resets timer if cannot parse the localStorage.time variable or if the time is greater than 30 mins 
    if(isNaN(time) || time > (30*60)) { 
     alert("An error occured: time left variable is corrupted, resetting timer"); 
     localStorage.time = 30*60; //30 mins in seconds 
     countdown(); 
     return null;  
    } 
    //Decrementing time and recalling the function in 1 second 
    time--; 
    localStorage.time = time; 
    setTimeout('countdown()', 1000); 
} 

あなたに秒を回す機能を追加することができます：分：秒をし、それは毎回、それは自己それを呼び出す要素を変更、または時間が0に達したときに何かを行いますので、機能を編集（タイマーが動作しない限り、一度呼び出すことを忘れないでください）。がんばろう！

私はあなたのためのペンを作った： http://codepen.io/DaCurse0/pen/kkxVYP

それはあなたが必要なすべてを持っている必要があります。

P.S：タイマーが設定されていないときに表示されるため、タイマーが破損しているかどうかを確認する際に、おそらくアラートを削除する必要があります。

Answer 2

htmlコード：

<h1>Countdown Clock</h1> 
<div id="clockdiv"> 
    <div> 
    <span class="days"></span> 
    <div class="text">Days</div> 
    </div> 
    <div> 
    <span class="hours"></span> 
    <div class="text">Hours</div> 
    </div> 
    <div> 
    <span class="minutes"></span> 
    <div class="text">Minutes</div> 
    </div> 
    <div> 
    <span class="seconds"></span> 
    <div class="text">Seconds</div> 
    </div> 
</div> 

CSSコード：

#clockdiv{ 
    font-family: sans-serif; 
    color: #fff; 
    display: inline-block; 
    font-weight: 100; 
    text-align: center; 
    font-size: 30px; 
} 

#clockdiv > div{ 
    padding: 10px; 
    border-radius: 3px; 
    background: #00BF96; 
    display: inline-block; 
} 

#clockdiv div > span{ 
    padding: 15px; 
    border-radius: 3px; 
    background: #00816A; 
    display: inline-block; 
} 

.text{ 
    padding-top: 5px; 
    font-size: 16px; 
} 

JavaScriptコード：HTMLのdocumnetで

function getTimeRemaining(endtime) { 
    var t = Date.parse("June 31,2017") - 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 { 
    'total': t, 
    'days': days, 
    'hours': hours, 
    'minutes': minutes, 
    'seconds': seconds 
    }; 
} 

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

    function updateClock() { 
    var t = getTimeRemaining(endtime); 

    daysSpan.innerHTML = t.days; 
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
    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); 

、新しいファイルが含ま：

<script type="text/javascript" src="assets/js/count.js"></script> 

<link rel="stylesheet" type="text/css" href="assets/css/flipclock.css"> 

を

希望しています...