在时间框架中的计数

时间:2016-03-29 20:13:44

标签: jquery html

我想在现在和明天之间(3月30日美国东部时间下午21:12)计算(某种类型的计时器)数字 2112 !我用谷歌搜索,但我不知道如何去做。我见过的插件/代码只是倒计时插件,有秒,分,小时等。

(function($) {
$.fn.countdown = function(options, callback) {
//custom 'this' selector
thisEl = $(this); 

// array of custom settings
var settings = { 
'date': null,
'format': null
};

// append the settings array to options
if(options) {
$.extend(settings, options);
}

//create the countdown processing function
function countdown_proc() {
var eventDate = Date.parse(settings.date) / 1000;
var currentDate = Math.floor($.now() / 1000);

if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}

var seconds = eventDate - currentDate;

var days = Math.floor(seconds / (60 * 60 * 24)); 
//calculate the number of days

seconds -= days * 60 * 60 * 24; 
//update the seconds variable with number of days removed

var hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; 
//update the seconds variable with number of hours removed

var minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; 
//update the seconds variable with number of minutes removed

//conditional statements
if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }

//logic for the two_digits ON setting
if(settings.format == "on") {
days = (String(days).length >= 2) ? days : "0" + days;
hours = (String(hours).length >= 2) ? hours : "0" + hours;
minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
}

//update the countdown's html values.
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds);
}

//run the function
countdown_proc();

//loop the function
interval = setInterval(countdown_proc, 1000);
};

}) (jQuery);



//Provide the plugin settings
$("#countdown").countdown({
//The countdown end date
date: "30 March 2016 21:12:00",

// on (03:07:52) | off (3:7:52) - two_digits set to ON maintains layout consistency
format: "on"
}, 

function() {
// This will run when the countdown ends
$( ".flash" ).addClass( "show" );
$( "ul#countdown" ).addClass( "hide" );
$( ".black" ).addClass( "new" );


});

这将返回01天,30小时,10分钟5秒。

我真的只想要4个数字,2112。如何才能完成,航海时间?

1 个答案:

答案 0 :(得分:1)

基本的计数脚本如下所示:jsfiddle

var second = 1000; // ms
var i = 0;
var timer = setInterval(function() {
   if (i < 2112) {
      i++;
      console.log(i);
   } else {
      clearInterval(timer);
   }
}, second); // <- You'd change this second to some other value.

然后你必须明天的日期:

var maxTime = Date.parse('Wed Mar 30 2016 21:12:00 EDT'); 

今天的日期:

var timeNow = Date.now();

并减去差异:

var timeDiff = maxTime - timeNow;

通过将其格式化回新日期,您可以使用JS Date Object的方法来根据您的特定需求调整计时器(AKA“航海时间”)

var dateDiff = new Date(timeDiff);
console.log(dateDiff.getMinutes());

请参阅:http://www.w3schools.com/jsref/jsref_obj_date.asphttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

上的JS Date Object API文档

然后更改该代码底部的second值。它将根据传递给它的任何时间量而增加。所以,如果你想要2112相等的时间段,那么现在和明天,然后你会划分timeDiff / 2112&amp;将这些结果提供给该值。

重要说明:如果你这样做,那么你的时间增量会比其他人的时间增量更长,当他们在你写完代码后加载代码时测试它。因此,您必须使用日期对象,以确定您的时间增量应该是多少。我建议让它们静止和放大没有动力。 (避免使用timeDiff / 2112作为间隔)。