jQuery Countdown 获取的是服务器时间还是本地时间

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery Countdown 获取的是服务器时间还是本地时间相关的知识，希望对你有一定的参考价值。

jQuery Countdown 获取的是服务器时间还是本地时间
有没有哪位大侠对这个插件研究的比较多啊？这个插件所进行的时间比较是相对于浏览页面的电脑上面的时间还是将页面所设置的时间跟服务器上面的时间进行比较啊？
因为使用这个插件所实现的倒计时功能出现了在不同的倒计时时间，所以想问下各位大侠，谁能帮忙解释一下呢？谢谢！

是本地页面时间，前端一般获取的都是本地时间。
JQuery CountDown里面都是通过new Date的方式和setInterval定时方式进行的。
一般countdown的初始时间最好是从服务器给定，然后倒计时。 参考技术A jQuery Countdown 默认是 客户端电脑时间！

如果你想用服务器，那么修改参数即可，你仔细看说明文档，里面有的。

我很久不用，不大记得了。追问

修改哪一个参数啊？我没有找到对应的说明文档哦！麻烦你了哈！

本回答被提问者采纳 参考技术B 是本地页面时间，前端一般获取的都是本地时间。
JQuery CountDown里面都是通过new Date的方式和setInterval定时方式进行的。
一般countdown的初始时间最好是从服务器给定，然后倒计时。 参考技术C 开始时间取服务器 参考技术D 你把分给 1 楼吧，他想给你发网址，结果被屏蔽了，他让我帮你回答一下，我直接给你例子，
你想要设置初试时间，注意看参数：
since: null,
// new Date(year, mth - 1, day, hr, min, sec) - date/time to count up from
// or numeric for seconds offset, or string for unit offset(s):
// 'Y' years, 'O' months, 'W' weeks, 'D' days, 'H' hours, 'M' minutes, 'S' seconds
// 计时开始时间

实例开始：
----------------------------------------------------

$(selector).countdown(
labels: ['Years', 'Months', 'Weeks', 'Days', 'Hours', 'Minutes', 'Seconds'],
// The expanded texts for the counters
labels1: ['Year', 'Month', 'Week', 'Day', 'Hour', 'Minute', 'Second'],
// The display texts for the counters if only one
compactLabels: ['y', 'm', 'w', 'd'],
// The compact texts for the counters
whichLabels: null,
// Function to determine which labels to use
timeSeparator: ':',
// Separator for time periods
isRTL: false,
// True for right-to-left languages, false for left-to-right

until: null,
// new Date(year, mth - 1, day, hr, min, sec) - date/time to count down to
// or numeric for seconds offset, or string for unit offset(s):
// 'Y' years, 'O' months, 'W' weeks, 'D' days, 'H' hours, 'M' minutes, 'S' seconds
// 计时器结束时间
since: null,
// new Date(year, mth - 1, day, hr, min, sec) - date/time to count up from
// or numeric for seconds offset, or string for unit offset(s):
// 'Y' years, 'O' months, 'W' weeks, 'D' days, 'H' hours, 'M' minutes, 'S' seconds
// 计时开始时间
timezone: null,
// The timezone (hours or minutes from GMT) for the target times,
// or null for client local
// 时区 当值为空指的就是本机当地时间
serverSync: null,
// A function to retrieve the current server time for synchronisation
// 同步服务器时间的函数
format: 'dHMS',
// Format for display - upper case for always, lower case only if non-zero,
// 'Y' years, 'O' months, 'W' weeks, 'D' days, 'H' hours, 'M' minutes, 'S' seconds
// 格式化日期 年(y)-月(o)-周(w)-日(d)-时(h)-分(m)-秒(s)
layout: '',
// Build your own layout for the countdown
compact: false,
// True to display in a compact format, false for an expanded one
// 紧凑模式显示时间 如：0y 8m 0w 0d 18:10:51
significant: 0,
// The number of periods with values to show, zero for all
// 仅显示那些有意义的时间
description: '',
// The description displayed for the countdown
// 定义倒计时的语言 调用时候得附加官网的语言包
expiryUrl: null,
// A URL to load upon expiry, replacing the current page
// 当计时到期自动跳转到新的页面并替换当前页
alwaysExpire: false,
// True to trigger onExpiry even if never counted down
// 无论是否计时到期都执行回调函数
onExpiry: null,
// Callback when the countdown expires -
// receives no parameters and 'this' is the containing division
// 倒计时到期执行回调函数
onTick: null,
// Callback when the countdown is updated -
// receives int[7] being the breakdown by period (based on format)
// and 'this' is the containing division
tickInterval: 1
// Interval (seconds) between onTick callbacks
// 间隔多少秒执行一次onTick
);追问

$('#countdown_dashboard').CountDown(
targetDate:
'serverSync': null,
'day': 15,
'month': 1,
'year': 2011,
'hour': 12,
'min': 0,
'sec': 0

);
请问是否这样就会将设置的时间值跟服务器端的时间进行比较啊？

追答

是

since: null,
// new Date(year, mth - 1, day, hr, min, sec) - date/time to count up from
// or numeric for seconds offset, or string for unit offset(s):
// 'Y' years, 'O' months, 'W' weeks, 'D' days, 'H' hours, 'M' minutes, 'S' seconds
// 计时开始时间

追问

那么这个since：null是否也要加上啊？
我用的是jquery.lwtCountdown-1.0.js里面没有这个参数，不过我用另外的方法完成了获取服务器时间进行比较，但是却碰到另外的一个问题，在不同的浏览器中出现的倒计时时间差了3秒！不知道是什么原因哦！

 第5个回答  2011-07-24 <SCRIPT LANGUAGE="javascript">
<!--
var maxtime = 60*63 //一个小时一分钟，按秒计算，自己调整!
function CountDown()
if(maxtime>=0)
hours= Math.floor(maxtime/3600);
minutes = Math.floor((maxtime%3600)/60);
seconds = Math.floor(maxtime%60);
msg = "还有"+hours+"时"+minutes+"分"+seconds+"秒";
document.all["span_date_time"].innerhtml=msg;
--maxtime;

else
clearInterval(timer);
msg = "活动已经开始";
document.all["span_date_time"].innerHTML=msg;

timer = setInterval("CountDown()",1000);
//-->
</SCRIPT>
<span id="span_date_time">计时</span>
 第6个回答  2017-07-25

服务器传个时间参数就可以使用服务器时间了，也就是设置startTime和endTime

 $('#countdown').countdown(
 //活动开始时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
 //优先采取元素的data-stime值(该值只能为时间戳格式)
 startTime: '2016/6/11 17:54:00',//活动结束时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
 //优先采取元素的data-etime值(该值只能为时间戳格式)   
 endTime: '2016/6/11 17:55:00',
 //活动开始前倒计时的修饰
 //可自定义元素,例如"<span>距离活动开始倒计时还有:</span>"   
 beforeStart: '距离活动开始倒计时还有:',
 //活动进行中倒计时的修饰 
 //可自定义元素,例如"<span>距离活动截止还有:</span>" 
 beforeEnd: '距离活动截止还有:',
 //活动结束后的修饰
 //可自定义元素,例如"<span>活动已结束</span>"    
 afterEnd: '亲，活动结束啦，请继续关注哦!',
 //时间格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等)     
 format: 'dd:hh:mm:ss',
 //活动结束后的回调函数     
 callback: function() 
  console.log('亲，活动结束啦，请继续关注哦!');
 
 );

html 倒计时器与jQuery.countdown和JS在倒计时结束时改变HTML aftter

jQuery(function( $ ){
$(".webinar-countdown").countdown("2017/01/20 18:41:20", function(event) {
   $(this).text(event.strftime('%D days %H:%M:%S'));})
   .on('finish.countdown', function(event) {
    $(this).html('The webinar is over!').parent().addClass('disabled');
    $(".webinar-timer").html('The webinar is over!').addClass('disabled');
  });    
});

var webinarDate = {
  month: 0,
  date: 20,
  hour: 18,
  minute: 41
}

function isItWebinarDay() {
  var now = new Date();
  return (now.getMonth() == webinarDate.month && now.getDate() == webinarDate.date && now.getHours() == webinarDate.hour && now.getMinutes() == webinarDate.minute );
}

if(isItWebinarDay()){
  console.log("HURRAY!");
} else {
  console.log("PATIENCE...");
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="webinar-timer">
  <span class="webinar-countdown"></span>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
  </body>
</html>

以上是关于jQuery Countdown 获取的是服务器时间还是本地时间的主要内容，如果未能解决你的问题，请参考以下文章

html 倒计时器与jQuery.countdown和JS在倒计时结束时改变HTML aftter

第一次写jquery插件，来个countdown计时器吧

jquery 扩展插件方法

Timer TimerTask CountDown 计时器 API

持久的 jQuery 倒计时

CountdownLatch 结合 await(maxTime) 和 countdown()