가벼운 jQuery 카운트 다운

Question

나는 일, 시간, 분 및 초의 수를 세는 데 정말로 멋진 jQuery 플러그인을 보았다. 그들은 이미지를 사용하여 멋지게 보입니다. 하지만 남은 시간 (초)을 div로 채우는 간단한 카운트 다운을 찾고 있습니다. 내가와 관련하여 사용하는거야 :

function submitform() { 
    document.forms[0].submit(); 
} 

jQuery(function($) { 
    setInterval("submitform()",20000); 
}); 

난 그냥 어딘가에 페이지는 그 자체로 모든 갱신 예정임을 알려 구석에 진짜 눈에 거슬리지 무언가를 원한다.

Answer 1

첫째는, setInterval를 사용하는 예를 들어, 20 초마다 한 번. 일회성 이벤트의 경우 setTimeout을 사용하십시오.

다음은 countdown의 ID로 사업부가 가정, 당신을위한 경량의 솔루션입니다 :

와우 브라이언

$(function() { 
    var seconds = 20; 
    setTimeout(updateCountdown, 1000); 

    function updateCountdown() { 
     seconds--; 
     if (seconds > 0) { 
     $("#countdown").text("You have " + seconds + " seconds remaining"); 
     setTimeout(updateCountdown, 1000); 
     } else { 
     submitForm(); 
     } 
    } 
}); 

function submitForm() { 
    document.forms[0].submit(); 
} 

Answer 2

이번 주에 프로젝트에 대한 카운트 다운을 작성했습니다. 그것은 단지 자바 스크립트이며 jQuery는 필요하지 않습니다.

countDown을 배치 할 div의 ID와 밀리 초 단위의 종료 및 시작 시간을 전달하십시오. (또는 당신은 Date 매개 변수의 작동 방식을 변경할 수 있습니다. 이미 페이지에 ms로 된 날짜가 있습니다. 나는 함수로 전달,하지만 당신은) 다른 생각을 할 수있는 :

<div id="countDownDiv"></div> 
<script type="text/javascript"> 
    countDown("countDownDiv",1281239850163, new Date().getTime()); 
</script> 

을 그리고 여기에 기능 : 당신이 설정 한 간격으로 함수를 해고하고자 할 때

function countDown(id, end, cur){ 
     this.container = document.getElementById(id); 
     this.endDate = new Date(end); 
     this.curDate = new Date(cur); 


var context = this; 

var formatResults = function(day, hour, minute, second){ 
    var displayString = [ 
       '<div class="stat statBig"><h3>',day,'</h3><p>days</p></div>', 
       '<div class="stat statBig"><h3>',hour,'</h3><p>hours</p></div>', 
       '<div class="stat statBig"><h3>',minute,'</h3><p>minutes</p></div>', 
       '<div class="stat statBig"><h3>',second,'</h3><p>seconds</p></div>' 
    ]; 
    return displayString.join(""); 
} 

var update = function(){ 
    context.curDate.setSeconds(context.curDate.getSeconds()+1); 

    var timediff = (context.endDate-context.curDate)/1000; 

    // Check if timer expired: 
    if (timediff<0){ 
     return context.container.innerHTML = formatResults(0,0,0,0); 
    } 

    var oneMinute=60; //minute unit in seconds 
    var oneHour=60*60; //hour unit in seconds 
    var oneDay=60*60*24; //day unit in seconds 

    var dayfield=Math.floor(timediff/oneDay); 
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour); 
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute); 
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute)); 

    context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield); 

    // Call recursively 
    setTimeout(update, 1000); 
}; 

// Call the recursive loop 
update(); 
}