어떻게 html로 카운트 다운 타이머를 할 수 있습니까?

Question

나는 나의 I.T를 돕고있다. 어떤 일을 위해서 부활절 달걀을 만드는 교사이고, html로 카운트 다운 타이머를 만들고 싶다. 설명 : 웹 사이트에 로그인 할 때마다 카운트 다운 타이머가 시작됩니다. 예 : 30 분 카운트 다운 타이머가있는 html 코드가 있습니다. 웹 사이트에 들어가면 카운트 다운 타이머가 내려 가기 시작하지만 웹 사이트를 새로 고침하면 재설정됩니다. 감사합니다. 감사합니다.

Answer 1

JavaScript 만 사용하려는 경우 서버 측 언어없이 localStorage 변수에 남아있는 시간을 저장할 수 있습니다. 웹 사이트/브라우저를 종료 한 후에도 동일하게 유지되기 때문에;

예 : 그것이 자기를 호출 매번 요소를 변경하거나 뭔가를 할 것이다, 그래서 시간이 0에 도달하면 초과 기능을 편집 : 분 : 당신은에 초를 설정하는 기능을 추가 할 수 있습니다

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

타이머가 실행되지 않는 한 한 번만 호출하는 것을 잊지 마십시오. 행운을 빕니다!

나는 당신을 위해 펜을했다 : 그것은 당신이 필요한 모든 것을해야 http://codepen.io/DaCurse0/pen/kkxVYP

.

P .: 타이머가 설정되지 않은 경우 표시되므로 타이머가 손상되었는지 확인하려면 경고를 제거해야합니다.

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

:

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

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

: 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); 

는, 새로운 파일을 포함

희망 하시 ...