JS Countdown 不移秒
Posted
技术标签:
【中文标题】JS Countdown 不移秒【英文标题】：JS Countdown does not move seconds 【发布时间】：2020-02-23 01:58:32 【问题描述】：我正在尝试将时间（以微秒为单位）从我的 php 服务器传递到这个 Hilios 倒计时代码。好吧，它通过并正确计算，但倒计时是静态的，我需要它不断更新，直到它重置： 01 天 00:00:10 (09, 08, ..., 00:00:00)
知道我可以做些什么来更新倒计时，我尝试了 setTimeout 和 interval，但无济于事。谢谢！！！
<html>
<head>
<script src="//code.jquery.com/jquery.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment-with-locales.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.4.0/moment-timezone-with-data-2010-2020.min.js"></script>
<!-- Include MomentJS library -->
<?php
setlocale(LC_TIME, 'pt_BR', 'pt_BR.utf-8', 'pt_BR.utf-8', 'portuguese');
date_default_timezone_set('America/Sao_Paulo');
echo '<b>ServerTime</b> = '.date('D M d Y H:i:s').' GMT-0300 (Horário Padrão de Brasília)';
?>
<br><br>
<script>
function horaServer()
return '<?php echo round(microtime(true) * 1000);?>';
(function(factory)
"use strict";
if (typeof define === "function" && define.amd)
define([ "jquery" ], factory);
else
factory(jQuery);
)(function($)
"use strict";
var PRECISION = 100;
var instances = [], matchers = [];
matchers.push(/^[0-9]*$/.source);
matchers.push(/([0-9]1,2\/)2[0-9]4( [0-9]1,2(:[0-9]2)2)?/.source);
matchers.push(/[0-9]4([\/\-][0-9]1,2)2( [0-9]1,2(:[0-9]2)2)?/.source);
matchers = new RegExp(matchers.join("|"));
function parseDateString(dateString)
if (dateString instanceof Date)
return dateString;
if (String(dateString).match(matchers))
if (String(dateString).match(/^[0-9]*$/))
dateString = Number(dateString);
if (String(dateString).match(/\-/))
dateString = String(dateString).replace(/\-/g, "/");
return new Date(dateString);
else
throw new Error("Couldn't cast `" + dateString + "` to a date object.");
var DIRECTIVE_KEY_MAP =
Y: "years",
m: "months",
w: "weeks",
d: "days",
D: "totalDays",
H: "hours",
M: "minutes",
S: "seconds"
;
function strftime(offsetObject)
return function(format)
var directives = format.match(/%(-|!)?[A-Z]1(:[^;]+;)?/gi);
if (directives)
for (var i = 0, len = directives.length; i < len; ++i)
var directive = directives[i].match(/%(-|!)?([a-zA-Z]1)(:[^;]+;)?/), regexp = new RegExp(directive[0]), modifier = directive[1] || "", plural = directive[3] || "", value = null;
directive = directive[2];
if (DIRECTIVE_KEY_MAP.hasOwnProperty(directive))
value = DIRECTIVE_KEY_MAP[directive];
value = Number(offsetObject[value]);
if (value !== null)
if (modifier === "!")
value = pluralize(plural, value);
if (modifier === "")
if (value < 10)
value = "0" + value.toString();
format = format.replace(regexp, value.toString());
format = format.replace(/%%/, "%");
return format;
;
function pluralize(format, count)
var plural = "s", singular = "";
if (format)
format = format.replace(/(:|;|\s)/gi, "").split(/\,/);
if (format.length === 1)
plural = format[0];
else
singular = format[0];
plural = format[1];
if (Math.abs(count) === 1)
return singular;
else
return plural;
// importante
var Countdown = function(el, finalDate, callback)
this.el = el;
this.$el = $(el);
this.interval = null;
this.offset = ;
this.instanceNumber = instances.length;
instances.push(this);
this.$el.data("countdown-instance", this.instanceNumber);
if (callback)
this.$el.on("update.countdown", callback);
this.$el.on("stoped.countdown", callback);
this.$el.on("finish.countdown", callback);
this.setFinalDate(finalDate);
this.start();
;
$.extend(Countdown.prototype,
start: function()
if (this.interval !== null)
clearInterval(this.interval);
var self = this;
this.update();
this.interval = setInterval(function()
self.update.call(self);
, PRECISION);
,
stop: function()
clearInterval(this.interval);
this.interval = null;
this.dispatchEvent("stoped");
,
pause: function()
this.stop.call(this);
,
resume: function()
this.start.call(this);
,
remove: function()
this.stop();
instances[this.instanceNumber] = null;
delete this.$el.data().countdownInstance;
,
setFinalDate: function(value) // pega o valor de data-countdown
//alert(value);
this.finalDate = parseDateString(value);
,
update: function()
if (this.$el.closest("html").length === 0)
this.remove();
return;
//this.totalSecsLeft = this.finalDate.getTime() - new Date().getTime();
/* setar hora do servidor */
/*
function horaServidor()
//var qq = new Date("<?php echo date('D M d Y H:i:s').' GMT-0300 (Horário Padrão de Brasília)'; ?>").getTime();
//alert(''+qq);
//return new Date("<?php echo date('D M d Y H:i:s').' GMT-0300 (Horário Padrão de Brasília)'; ?>").getTime();
return new Date("<?php echo date('D M d Y H:i:s').' GMT-0300 (Horário Padrão de Brasília)'; ?>");
//setInterval(horaServidor(), 1000);
*/
this.totalSecsLeft = this.finalDate.getTime() - horaServer();
//this.totalSecsLeft = this.finalDate.getTime() - horaServidor().getTime();
//this.totalSecsLeft = this.finalDate.getTime() - new Date('Sat Oct 26 2019 18:37:04 GMT-0300 (Horário Padrão de Brasília)').getTime();
// this.totalSecsLeft = this.finalDate.getTime() - new Date().getTime(); LINHA ORIGINAL
this.totalSecsLeft = Math.ceil(this.totalSecsLeft / 1e3);
this.totalSecsLeft = this.totalSecsLeft < 0 ? 0 : this.totalSecsLeft;
this.offset =
seconds: this.totalSecsLeft % 60,
minutes: Math.floor(this.totalSecsLeft / 60) % 60,
hours: Math.floor(this.totalSecsLeft / 60 / 60) % 24,
days: Math.floor(this.totalSecsLeft / 60 / 60 / 24) % 7,
totalDays: Math.floor(this.totalSecsLeft / 60 / 60 / 24),
weeks: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 7),
months: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 30),
years: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 365)
;
if (this.totalSecsLeft === 0)
this.stop();
this.dispatchEvent("finish");
else
this.dispatchEvent("update");
,
dispatchEvent: function(eventName)
var event = $.Event(eventName + ".countdown");
event.finalDate = this.finalDate;
event.offset = $.extend(, this.offset);
event.strftime = strftime(this.offset);
this.$el.trigger(event);
);
$.fn.countdown = function()
var argumentsArray = Array.prototype.slice.call(arguments, 0);
return this.each(function()
var instanceNumber = $(this).data("countdown-instance");
if (instanceNumber !== undefined)
var instance = instances[instanceNumber], method = argumentsArray[0];
if (Countdown.prototype.hasOwnProperty(method))
instance[method].apply(instance, argumentsArray.slice(1));
else if (String(method).match(/^[$A-Z_][0-9A-Z_$]*$/i) === null)
instance.setFinalDate.call(instance, method);
instance.start();
else
$.error("Method %s does not exist on jQuery.countdown".replace(/\%s/gi, method));
else
new Countdown(this, argumentsArray[0], argumentsArray[1]);
);
;
);
</script>
</head>
<body>
<b>Countdown</b>
<div data-countdown="2019/10/26 20:30:31"></div>
<div data-countdown="2019/10/27 14:35:18"></div>
<div data-countdown="2019/10/26 12:30:35"></div>
<div data-countdown="2019/10/29 10:57:04"></div>
<script>
$('[data-countdown]').each(function()
var $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event)
$this.html(event.strftime('%D dias %H:%M:%S'));
);
);
</script>【问题讨论】：
Simplest way to profile a PHP script的可能重复 我看过这篇文章，但对我来说还没有意义。不过谢谢你的关注！！！ :) 看看更新计时器***.com/questions/20618355/…我没有阅读你所有的代码，但我怀疑它太多了。 【参考方案1】：我知道你的代码有什么问题，但我可以帮助你处理我使用的另一个代码（你可以调整它）：
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900');
.timer
color: #F6F4F3;
text-align: center;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
.days,
.hours,
.minutes,
.seconds
display: inline-block;
padding: 5px;
min-width: 20%;
margin: 1px;
height: 70px;
border-radius: 5px;
text-align: center;
font-size: 12px;
.days
background-color: #EF2F3C;
.hours
background: #F6F4F3;
color: #183059;
.minutes
background: #276FBF;
.seconds
background: #F0A202;
.numbers
font-family: 'Montserrat', sans-serif;
color: #183059;
font-size: 18px;
</style>
<?php
foreach ($events as $index => $event) ?>
<div id="timer<?php echo $index; ?>" class="card-deck timer-wrap" data-event-date="<?php echo $formatted; ?>"></div>
<?php ?>
<script>
initTimers('.timer-wrap');
function initTimers(selector)
var timers = document.querySelectorAll(selector);
if (timers.length > 0)
for (var i = 0; i < timers.length; i++)
countdown(timers[i]);
function countdown(timerElem)
const year = new Date().getFullYear();
const dat = new Date(timerElem.dataset.eventDate);
let timer = setInterval(function()
const today = new Date().getTime();
const diff = dat - today;
let days = Math.floor(diff / (1000 * 60 * 60 * 24));
let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((diff % (1000 * 60)) / 1000);
timerElem.innerHTML =
"<div class=\"card days\"> \<div class=\"numbers\">" + days + "</div>days</div> \<div class=\"card hours\"> \
<div class=\"numbers\">" + hours + "</div>hours</div> \<div class=\"card minutes\"> \
<div class=\"numbers\">" + minutes + "</div>minutes</div> \<div class=\"card seconds\"> \
<div class=\"numbers\">" + seconds + "</div>seconds</div> \</div>";
, 1000);
</script>
【讨论】：
你好 Pepescu Ion，我相信你的例子会帮助我，是的，只是一个问题。在数组中，您使用了什么日期格式？ 'YYYY-MM-d HH: mm: ss'？ Olá Pepescu Ion, acredito que seu exemplo irá me ajudar sim, so uma dúvida por gentileza。 Dentro do array, qual formato de data você utilizou ? 'YYYY-MM-d HH:mm:ss' ? 'October 28, 2019 22:37:00' 太棒了，它在这里工作。非常感谢以上是关于JS Countdown 不移秒的主要内容，如果未能解决你的问题，请参考以下文章