2017-11-08 4 views
0

私はタイマーを作ったので、ユーザーがページをリフレッシュした場合は実行しておきたい。 私はsessionStorageに情報(秒と分)を保存しましたが、ユーザーがページを更新している間にタイマーを実行する方法はわかりません。リフレッシュ後にsessionStorageで情報を表示し続ける

var COUNT_START = 10 * 20 * 60; 
var count = COUNT_START; 
var playing = false; 
var play = document.getElementById('Reservation'); 
var reset = document.getElementById('annuler'); 

play.addEventListener('click', function() { 
    if (empty > 5) { 
     $('#count-timer').fadeIn(1000); 
     playing = true 
    } else { 
     $('#title-reservation').text('Signez votre réservation') 
    } 
}); 

reset.addEventListener('click', function() { 
    playing = false; 
    sessionStorage.removeItem('nom_station'); 
    $('#title-reservation').html('Votre réservation a bien été annulée'); 
    count = COUNT_START; 
}); 

function countdown() {var COUNT_START = 10 * 20 * 60; 
    var count = COUNT_START; 
    var playing = false; 
    var play = document.getElementById('Reservation'); 
    var reset = document.getElementById('annuler'); 

    play.addEventListener('click', function() { 
     if (empty > 5) { 
      $('#count-timer').fadeIn(1000); 
      playing = true 
     } else { 
      $('#title-reservation').text('Signez votre réservation') 
     } 
    }); 

    reset.addEventListener('click', function() { 
     playing = false; 
     sessionStorage.removeItem('nom_station'); 
     $('#title-reservation').html('Votre réservation a bien été annulée'); 
     count = COUNT_START; 
    }); 

    function countdown() { 
     displayTime(); 
     if (count === 0) { 
      playing = false; 
      sessionStorage.removeItem('nom_station'); 
      $('#title-reservation').text('Votre réservation a expirée'); 
     } else if (playing) { 
      setTimeout(countdown, 100); 
      count--; 
     } else { 
      setTimeout(countdown, 100); 
     } 
    } 

    countdown(); 

    function displayTime() { 
     this.mill = count; 
     this.sec = Math.floor(this.mill/10); 
     this.mins = Math.floor(this.sec/60); 
     this.sec -= this.mins * (60); 
     this.sec_storage = sessionStorage.setItem('sec_storage', this.sec); 
     this.min_storage = sessionStorage.setItem('min_storage', this.mins); 
     this.get_sec_storage = sessionStorage.getItem('sec_storage'); 
     this.get_min_storage = sessionStorage.getItem('min_storage'); 

     $('#count-timer').text('Votre réservation expire dans : ' + this.get_min_storage + ' minute(s) ' + this.get_sec_storage + ' seconde(s) ') 

    } 
    displayTime(); 
    if (count === 0) { 
     playing = false; 
     sessionStorage.removeItem('nom_station'); 
     $('#title-reservation').text('Votre réservation a expirée'); 
    } else if (playing) { 
     setTimeout(countdown, 100); 
     count--; 
    } else { 
     setTimeout(countdown, 100); 
    } 
} 

countdown(); 

function displayTime() { 
    this.mill = count; 
    this.sec = Math.floor(this.mill/10); 
    this.mins = Math.floor(this.sec/60); 
    this.sec -= this.mins * (60); 
    this.sec_storage = sessionStorage.setItem('sec_storage', this.sec); 
    this.min_storage = sessionStorage.setItem('min_storage', this.mins); 
    this.get_sec_storage = sessionStorage.getItem('sec_storage'); 
    this.get_min_storage = sessionStorage.getItem('min_storage'); 

    $('#count-timer').text('Votre réservation expire dans : ' + this.get_min_storage + ' minute(s) ' + this.get_sec_storage + ' seconde(s) ') 
} 

誰かが私にそのことを示すことができれば、私はたくさんのことに感謝します! はありがとう:) は私の英語

+0

ページがリフレッシュされると、宣言されたタイムアウトがクリアされます。これをサーバー側で行う必要があります。 –

答えて

0

のため申し訳ありませんが、私はページを更新した後、タイマー実行を継続するかどうかはわかりませんが、あなただけのリフレッシュ前にタイムスタンプを保存しようとすると、ページが更新および再ロードされた後、新しいタイムスタンプを比較することができます。ページをリフレッシュするまでにどれくらい時間がかかります。最後に保存されたタイマー値の差を加えてタイマーを開始することもできます。

関連する問題