カウントダウン（Cookies）

Question

このカウントダウンを更新するとカウントダウンをリセットできないようにするにはどうすればよいですか？リフレッシュをクリックすると、「14d、22h、23m、32s」（リフレッシュ）から「14d、22、59m、59s」にカウントダウンを再設定する代わりに、カウントダウンを続行する必要があります。

いくつかの調査で、私はクッキーを使用すべきであることを知っていましたが、作成方法はわかりません。

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 { 
 
    '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);

@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans'; 
 

 
@font-face { 
 
    font-family: 'ps'; 
 
    src: url("../fonts/personalservice.ttf"); 
 
} 
 

 
@font-face { 
 
    font-family: 'afb'; 
 
    src: url("../fonts/Agency_FB.ttf"); 
 
} 
 

 
@font-face { 
 
    font-family: 'blob'; 
 
    src: url("../fonts/Blobtastics.ttf"); 
 
} 
 

 
@font-face { 
 
    font-family: 'rv'; 
 
    src: url("../fonts/roundedvale.ttf"); 
 
} 
 

 
/*start loading*/ 
 

 
.spinner{ 
 
    width: 80px; 
 
    height: 80px; 
 
    
 
    border: 2px solid #f3f3f3; 
 
    border-top:3px solid #f25a41; 
 
    border-radius: 100%; 
 
    
 
    position: absolute; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right: 0; 
 
    margin: auto; 
 
    
 
    animation: spin 1s infinite linear; 
 
} 
 

 
@keyframes spin { 
 
    from{ 
 
     transform: rotate(0deg); 
 
    }to{ 
 
     transform: rotate(360deg); 
 
    } 
 
} 
 

 
#overlay{ 
 
    height:100%; 
 
    width:100%; 
 
    background: #e1e1e1; 
 
    opacity: .5; 
 
    position:fixed; 
 
    left:0; 
 
    top:0; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 

 
body { 
 
    background: #e1e1e1; 
 
    color: #67727A; 
 
    font-family: 'Alegreya', Sans-serif; 
 
} 
 

 

 
#banner{ 
 
    height: 592px; 
 
    vertical-align: center; 
 
} 
 

 
#branding{ 
 
    padding-top: 150px; 
 
    width: 752px; 
 
    height: 100px; 
 
    padding-left: 400px; 
 
} 
 

 
#text{ 
 
    padding-top: 30px; 
 
    font-family: 'ps'; 
 
    font-size: 40px; 
 
    width: 500px; 
 
    float: right; 
 
} 
 

 
#logo { 
 
    float: left; 
 
    width: 251px; 
 
    height: 90px; 
 
    background: url(../img/RH5.png) no-repeat center; 
 
} 
 

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

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

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

 

 
footer{ 
 
    background-color: #87ceeb; 
 
    height: 70px; 
 
} 
 

 
#ig img{ 
 
    width: 49px; 
 
    height: 49px; 
 
    float: right; 
 
    margin-right: 25px; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
} 
 

 
#fb img{ 
 
    width: 49px; 
 
    height: 49px; 
 
    margin-top: 10px; 
 
    margin-right: 625px; 
 
    float: right; 
 
    text-align: center; 
 
    border-radius: 10px 10px 10px 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <meta name="description" content="FSX Repaints"> 
 
    <meta name="keywords" content="fsx, repaints, project airbus, just flight, pmdg, captainsim, premier airraft design, pad, airlines, project opensky, posky, tom's ruth"> 
 
    <meta name="author" content="Raven Lescano"> 
 
    <title>Coming Soon | Raven's Hangar</title> 
 
    <link rel="stylesheet" href="css/countdown.css" type="text/css"> 
 
    <link href="css/font-awesome.min.css" rel="stylesheet"> 
 

 
    <body> 
 
     <section id="banner"> 
 
      <div id="branding"> 
 
       <div id="logo"> 
 
        <img src="img/RH5.png" alt=""> 
 
       </div> 
 
       <aside id="text"> 
 
        <p>coming soon</p> 
 
       </aside> 
 
      </div> 
 

 
      <div id="clockdiv"> 
 
       <div> 
 
        <span class="days"></span> 
 
       <div class="smalltext">Days</div> 
 
       </div> 
 
       <div> 
 
        <span class="hours"></span> 
 
       <div class="smalltext">Hours</div> 
 
       </div> 
 
       <div> 
 
        <span class="minutes"></span> 
 
       <div class="smalltext">Minutes</div> 
 
       </div> 
 
       <div> 
 
        <span class="seconds"></span> 
 
       <div class="smalltext">Seconds</div> 
 
       </div> 
 
      </div> 
 

 
     </section> 
 
     <!--End Banner--> 
 
     <footer> 
 
      <div id="fb"> 
 
       <a href="https://www.facebook.com/ravenshangar"><img src="img/fb.png" alt=""></a> 
 
      </div> 
 
      <div id="ig"> 
 
       <a href="https://www.instagram.com/ravens_hangar/"><img src="img/ig.png" alt=""></a> 
 
      </div> 
 
     </footer> 
 
     <!--End of Footer--> 
 
    </body> 
 
</head> 
 
<script type="text/javascript" src="js/countdown.js"></script> 
 

 
</html>

Answer 1

をあなたがそうあなたのコードが更新

window.localstorage使用することができます。

：

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

へ：

var deadline; 
if(window.localStorage.hasOwnProperty('deadline')){ 
deadline = window.localStorage.getItem('deadline'); 
} else { 
    deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); 
    window.localStorage.setItem('deadline',deadline); 
} 
initializeClock('clockdiv', deadline); 

代わりに、私はそれとして、ローカルストレージにデータを保存するだろうクッキーを使用する:)

Answer 2

JavaScriptでクッキーを作成する方法を確認するには、このリンクを使用してください：Javaスクリプトの中 https://www.w3schools.com/js/js_cookies.asp