网站首页 >服务器正文

jquerycountdown服务器时间的简单介绍

admin 2022-12-19 10:00:09 服务器 15 ℃

广告位后台主题配置管理

今天给各位分享jquerycountdown服务器时间的知识，其中也会对进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、jquery实现倒计时效果
2、JS/JQ实现倒计时
3、jquery写 60s倒计时
4、jquery jcountdown怎么加
5、jQuery Countdown 获取的是服务器时间还是本地时间

jquery实现倒计时效果

设计一个答题的小游戏，每道题可以有20秒时间作答，超过时间就要给出相应的提醒，由于20秒时间太长，不适合做GIF动态图，下面来看一下我写的5秒倒计时的测试程序结果：

一、主体程序

!DOCTYPE

html

head

JS/JQ实现倒计时

不知道该怎么给你描述这个概念，这样说吧。

js中，时间有两种表示的：

1.Mon Feb 13 2012 02:58:41 GMT+0800

2.时间戳 1329073121000

这两者是等价的，可以互相转化的。

var t=new Date("Mon Feb 13 2012 02:58:41 GMT+0800");

alert(t-0); //把它当成一个时间戳，就是整型，可以做算术运算，结果为1329073121000

alert(t.toString()); //与alert(t)等价，结果为Mon Feb 13 2012 02:58:41 GMT+0800

我假设从服务器中得到的是时间戳

ASP代码部分:

dim conn,sql

set conn = server.createobject("adodb.connection")

conn.connectionstring="Provider = Microsoft.Jet.OLEDB.4.0;Data Source="server.mapPath("Database.mdb")

conn.open

sql="SELECT option FROM table WHERE type=time"

set rs = server.createobject("adodb.recordset")

rs.open sql,conn,1,1

HTML部分：

html

head

titlecountdown/title

/head

body

div id="show"/div

/body

/html

script type="text/javascript"

(function(){

// var t=%=rs("option")%;

var t=1331582321000;

var show=document.getElementById('show');

setInterval(function(){

var d=count(t);

show.innerHTML=d.day+'日'+d.hour+'小时'+d.min+'分钟'+d.sec+'秒';

},1000);

//传入要倒计时的日期的时间戳，返回还剩多少日小时分钟秒

function count(t){

var c=Math.floor((t-(new Date()))/1000);

var d,h,m,s;

d=Math.floor(c/24/3600);

h=Math.floor((c-d*24*3600)/3600);

m=Math.floor((c-d*24*3600-h*3600)/60);

s=Math.floor(c-d*24*3600-h*3600-m*60);

return {

day:d,

hour:h,

min:m,

sec:s

}

})();

/script

jquery写 60s倒计时

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleTitle/title

//换成你的jquery库

script type="text/javascript" src="jquery.js"/script

script type="text/javascript"

var setTime;

$(document).ready(function(){

var time=parseInt($("#time").text());

setTime=setInterval(function(){

if(time=0){

clearInterval(setTime);

return;

}

time--;

$("#time").text(time);

},1000);

});

/script

/head

body

span id="time"60/span

/body

/html

jquery jcountdown怎么加

1.使用：

$('#clock').countdown(finalData[, callback(或options)]);

finalData - 必选

options - 可选

2.参数：

1finalData - 设置倒计时的终止时间

3种格式：

1)原生的 'Date' 对象

2)毫秒格式的 '时间戳'(javascript的时间戳，单位是 '毫秒'，切记！)

matchers.push(/^[0-9]*$/.source);

源码中的正则：

matchers.push(/^[0-9]*$/.source);

3)字符串格式的时间

YYYY/MM/DD

MM/DD/YYYY

YYYY/MM/DD hh:mm:ss

MM/DD/YYYY hh:mm:ss

源码中的正则：

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

2callback(或options) - 回调函数或者 options 对象

1)callback - 倒计时，有3个事件类型，都绑定上回调方法！

function(event) {}

源码分析：

this.$el.on("update.countdown", options);

this.$el.on("stoped.countdown", options);

this.$el.on("finish.countdown", options);

2)options - 传递一个对象，覆盖 'countdown' 的默认配置，默认配置有3个：

defaultOptions = {

precision: 100, // int - 更新速率(毫秒为单位)

elapse: false, // bool - 倒计时结束后，是否继续

defer: false // bool - 延迟初始化模式

}

1.precision - 倒计时的精度

源码分析：

this.interval = setInterval(function() {

self.update.call(self);

}, this.options.precision); // setInterval()的第二个参数

2.elapse - 过期模式

false - 一旦到达设定的最终时间，停止计时。(默认)

true - 到达最终时间，继续执行倒计时。

源码分析：

if (!this.options.elapse this.totalSecsLeft === 0) { // 到达最终事件

this.stop(); // 停止计时

this.dispatchEvent("finish"); // 分发 'finish' 事件

} else {

this.dispatchEvent("update"); // 分发 'update' 事件

}

--------

一旦到达终止时间，会传递给事件对象，一个属性：

event.elapsed - 是否已经过期

this.elapsed = now = this.finalDate;

3.defer - 是否延迟启动

false - 表示初始化了 '倒计时对象'，会自动开始计时。(默认)

true - 在实例化对象后，需要我们来手动启动计时。

源码分析：

if (this.options.defer === false) {

this.start();

}

3.事件：

3个事件方法：

update.countdown

finish.countdown

stoped.countdown // 这个得说明下，文档中，应该是错误的！源码中是：'stoped'，文档中写的是 'stop'

3个事件，都有一个 'namespace-命名空间'，'.countdown'

每个事件对象，具备额外的公共属性：

event.finalDate = this.finalDate; // 设定的终止时间

event.elapsed = this.elapsed; // 是否已经过期

event.offset = $.extend({}, this.offset); // 当前时间，在各个时间刻度上的计算

源码分析：

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,

daysToWeek: Math.floor(this.totalSecsLeft / 60 / 60 / 24) % 7,

daysToMonth: Math.floor(this.totalSecsLeft / 60 / 60 / 24 % 30.4368),

weeks: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 7),

weeksToMonth: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 7) % 4,

months: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 30.4368),

years: Math.abs(this.finalDate.getFullYear() - now.getFullYear()),

totalDays: Math.floor(this.totalSecsLeft / 60 / 60 / 24),

totalHours: Math.floor(this.totalSecsLeft / 60 / 60),

totalMinutes: Math.floor(this.totalSecsLeft / 60),

totalSeconds: this.totalSecsLeft

};

event.strftime = strftime(this.offset); // 格式化时间函数

源码分析：

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 = escapedRegExp(directive[0]), // 正则

modifier = directive[1] || "", // 模式：- | ! | ""

plural = directive[3] || "", // :其他字符; ------ 和 '!' 模式一起使用

value = null;

directive = directive[2]; // 表示时间刻度的字母(Y,m,n,d,w...)

// 匹配到了该字母对应的时间值，进行字符替换

if (DIRECTIVE_KEY_MAP.hasOwnProperty(directive)) {

value = DIRECTIVE_KEY_MAP[directive];

value = Number(offsetObject[value]);

}

if (value !== null) {

// '!'模式，执行 'pluralize'，会需要 '(:[^;]+;)' 匹配到的值

if (modifier === "!") {

value = pluralize(plural, value);

}

// ""模式，小于10，填充 '0'

if (modifier === "") {

if (value 10) {

value = "0" + value.toString();

}

format = format.replace(regexp, value.toString());

}

format = format.replace(/%%/, "%");

return format;

};

}

// '!' 模式时，提供对复数的多元化支持，默认复数会添加 's'，我们可使用自定义的后缀 '...'

function pluralize(format, count) {

var plural = "s", singular = "";

if (format) {

// 去除:, ; , '空白'。使用 ',' 分隔单数和复数的2种格式

format = format.replace(/(:|;|\s)/gi, "").split(/\,/);

if (format.length === 1) {

plural = format[0];

} else {

singular = format[0];

plural = format[1];

}

// 当时间刻度 1，返回复数格式，否则为单数

if (Math.abs(count) 1) {

return plural;

} else {

return singular;

}

4.event.strftime - 格式化函数，是一个简单的格式化程序，有助于保持代码更加语义，并且避免重复的工作。

它根据给定格式字符串中的指令来格式化偏移日期。该指令由百分比（％）组成。未列为指令的任何文本将被传递到输出字符串。

event.strftime(%W weeks %-d days %-H h %M min %S sec');

Y: "years",

m: "months",

n: "daysToMonth",

d: "daysToWeek",

w: "weeks",

W: "weeksToMonth",

H: "hours",

M: "minutes",

S: "seconds",

D: "totalDays",

I: "totalHours",

N: "totalMinutes",

T: "totalSeconds"

所有的指令，包含0填充(01,02,03)和空白填充'1,2,3'版本，默认是0填充，不需要0填充，使用-%D。

模式：

- // 空白填充

! // 多元化复数模式

默认：复数添加 's'，单数不变

%!H // 当 hour1，结尾添加 's'

%!H:hours // 当 hour1，结尾添加 'hours'

%!H:hour,hours; // 当 hour1，结尾添加 'hours'，hour1，为单数，添加 'hour'。',' 分隔的，前为单数添加的字符，后为复数添加的字符

5.控制：

resume - 恢复

pause - 暂停

------------

start - 开始

stop - 停止

pause/resume，本质就是 start/stop 的别名

源码分析：

pause: function() {

this.stop();

resume: function() {

this.start();

6.countdown插件，本身只做时间的处理，并没做任何时间的默认展示，需要我们自己来做。

我们需要做的就是：

1.调用countdown()，传递一个 '终止时间'

2.绑定countdown相关事件，在事件内，进行我们的展示处理：

上面讲了事件的相关内容：

13个事件方法：

update.countdown

finish.countdown

stoped.countdown

2每个事件的额外属性：

event.finalDate = this.finalDate; // 设定的终止时间

event.elapsed = this.elapsed; // 是否已经过期

event.offset = $.extend({}, this.offset); // 当前时间，在各个时间刻度上的计算

event.strftime = strftime(this.offset); // 格式化时间函数

示例：

$('#countdown').countdown("2017/5/1")

.on('update.countdown', function(){

format = "还剩%D天, %H时, %M分, %S秒开始抽奖"; // 指定格式字符串

$(this).html(event.strftime(format)); // 将格式字符串，传递给 'event.strftime()' 解析

})

.on('finish.countdown', function(){

$(this).html('开始抽奖');

});

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

是本地页面时间，前端一般获取的都是本地时间。

JQuery CountDown里面都是通过new Date的方式和setInterval定时方式进行的。

一般countdown的初始时间最好是从服务器给定，然后倒计时。

关于jquerycountdown服务器时间和的介绍到此就结束了，不知道你从中找到你需要的信息了吗？如果你还想了解更多这方面的信息，记得收藏关注本站。

上一篇： zblog企业主题（zblog资源网主题）
下一篇：万网服务器故障（万网云服务器）

广告位后台主题配置管理

网站首页 >服务器 正文

jquerycountdown服务器时间的简单介绍

本文目录一览：

jquery实现倒计时效果

JS/JQ实现倒计时

jquery写 60s倒计时

jquery jcountdown怎么加

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

猜你喜欢

网站首页 >服务器正文