Javascript 轻量级jQuery倒计时

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

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

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

---

我只想在角落里找个真正不显眼的地方，让他们知道页面即将自行刷新。

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

只需传递要进行倒计时的div的id，以及以毫秒为单位的结束和开始时间（或者您可以更改日期参数的工作方式，我在页面上已经有了以毫秒为单位的日期，因此我将它们传递到函数中，但您可以采用不同的方式）：

倒计时（“倒计时div”，1281239850163，newdate（）.getTime（））；

下面是函数：

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

函数倒计时（id、end、cur）{
this.container=document.getElementById（id）；
this.endDate=新日期（结束）；
this.curDate=新日期（cur）；
var context=this；
var formatResults=函数（天、小时、分钟、秒）{
变量显示字符串=[
“天，天，天
”，
“，”小时“，”小时“，”，
''，分钟，'分钟
'，
''，秒，秒
];
返回displayString.join（“”）；
}
var update=函数（）{
context.curDate.setSeconds（context.curDate.getSeconds（）+1）；
var timediff=（context.endDate context.curDate）/1000；
//检查计时器是否过期：
如果（timediffFirst off，
setInterval
用于按设定的间隔启动函数，例如每二十秒启动一次。对于一次性事件，使用setTimeout

这里有一个轻量级的解决方案，假设您有一个id为倒计时的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();
}

哇，布莱恩，你真是太慷慨了！谢谢框9！这正是我想要的。我移动了一些东西。我不明白你为什么使用setTimeout而不是setInterval。这是因为JavaScript的某些行为吗？在这种情况下，你也可以使用setInterval，因为你需要updateCountdown（）我只是认为在这种情况下setTimeout会更简单。如果使用setInterval，则必须用三种方式更改上述代码：1.将第一个setTimeout替换为timeout=setInterval（…）.2.删除updateCountdown中的setTimeout，因为setInterval每秒都会触发一次。3.在提交表单之前，请调用clearTimeout（timeout）。如果通过页面刷新提交，则第3点无关紧要，但如果通过ajax提交，它将保持每秒提交一次。
$(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();
}