Question

我已经看到了一些看起来很漂亮的jQuery插件来倒数天，小时，分钟和秒。他们使用图像，看起来很棒。但我正在寻找一个简单的小倒计时，用剩余的秒数填充div。我将结合使用它：

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

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

我只是想在某个角落里真正不引人注目的东西让他们知道页面本身就要自动刷新。

Answer 1

首先，当您想要以设定的间隔触发功能时使用setInterval，例如每20秒一次。对于一次性事件，请使用setTimeout。

这是一个轻量级的解决方案，假设你有一个id为countdown的div：

$(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

本周我刚为一个项目写了一个倒计时。它只是javascript，不需要jQuery。

只需传递你想要放入countDown的div的id，以及以毫秒为单位的结束和开始时间（或者你可以改变Date params的工作方式，我已经在页面上有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();
}

轻量级jQuery倒计时

2 个答案: