[Jquery 插件]活动倒计时,可同步服务器时间,倒计时格式随意设置
活动倒计时,可同步服务器时间,倒计时格式随意设置
使用说明
/*
#活动倒计时,可同步服务器时间
startTime:起始时间
endTime:结束时间
format_str:字符模板
speed:倒计时执行速度
callback:倒计时结束回调
$('.xxx').countDown_str({
startTime:'2018-09-28 11:09:00',
endTime: '2018-09-29 11:09:00',
format_str: '<span class="dd">{d}</span><span class="hh">{h}</span><span class="mm">{m}</span><span class="ss">{s}</span><span class="hs">{hs}</span>'
});
//字符模板详细说明
{d}天数
{h}小时
{m}分钟
{s}秒
{hs}毫秒
*/
插件代码
$.fn.countDown_str = function (options) {
var defaults = {
startTime: '2018-09-28 11:09:00',
endTime: '2018-09-29 11:09:00',
speed: 1000,
format_str: '<span class="dd">{d}</span><span class="hh">{h}</span><span class="mm">{m}</span><span class="ss">{s}</span><span class="hs">{hs}</span>',
callback: function () { }
}
var opt = $.extend({}, defaults, options); return this.each(function () {
var that = this,
timer = ''; function init() {
var nowTimeStamp = new Date().getTime();//服务器的开始时间
var nowTimeStamp_server = new Date(opt.startTime).getTime();
this.totalTime = nowTimeStamp - nowTimeStamp_server;//服务器与本地时间差
} init.prototype.format = function (str, args) {
var result = str;
if (arguments.length > 0) {
if (arguments.length == 2 && typeof (args) == "object") {
for (var key in args) {
if (args[key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
}
}
return result;
}; init.prototype.outputTime = function () {
var date = this.date,
endTime = opt.endTime,
format_str = opt.format_str;
var nowTimeStamp = new Date().getTime();
var endTimeStamp = new Date(endTime).getTime();
var surplusTime = endTimeStamp - nowTimeStamp + this.totalTime;
var d = parseInt((surplusTime / (1000 * 60 * 60 * 24)));
var _d = d < 10 ? '0' + d : d;
var h = parseInt((surplusTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); //时
var _h = h < 10 ? '0' + h : h;
var m = parseInt((surplusTime % (1000 * 60 * 60)) / (1000 * 60)); //分
var _m = m < 10 ? '0' + m : m;
var s = ((surplusTime % (1000 * 60)) / 1000).toString(); //秒
var s1 = s.toString().split('.')[0]; //秒
var _s1 = s1 < 10 ? '0' + s1 : s1;
var _s3 = (s - s1).toFixed(3).toString().substring(2);
if (surplusTime > 0) {
format_str = init.format(format_str, {
d: _d,
h: _h,
m: _m,
s: _s1,
hs: _s3
});
} else {
format_str = init.format(format_str, {
d: '00',
h: '00',
m: '00',
s: '00',
hs: '000'
});
clearInterval(timer);
//定时器结束灰调
if (typeof opt.callback == 'function') {
opt.callback();
}
}
$(that).html(format_str); }
var init = new init();
init.outputTime();
timer = setInterval(function () {
init.outputTime();
}, opt.speed); });
}
[Jquery 插件]活动倒计时,可同步服务器时间,倒计时格式随意设置的更多相关文章
- javascript小技巧:同步服务器时间、同步倒计时
之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个 ...
- 【原创】jQuery插件 - Booklet翻书特效教程(一) 一般设置
jQuery插件 - Booklet翻书特效教程(一) 一般设置 本文由五月雨恋提供,转载请注明出处. 一.宽高(width/height) 1.自定义大小 $(function(){ // 自定义页 ...
- JS根据服务器时间倒计时
原文链接:http://caibaojian.com/daojishi-2.html //获取服务器时间 function getSevertime(){ var xmlHttp = new XMLH ...
- Linux 自动同步服务器时间
200 ? "200px" : this.width)!important;} --> 介绍 Linux服务器运行久时,系统时间就会存在一定的误差,本篇文章就来介绍怎样使服务 ...
- linux设置自动同步服务器时间
最近遇到一个问题,由于两台服务器时间的问题,经常导致用户登录由于时间差问题而报错,再三百度,最后整理了一下修改linux定时同步的操作(本方法适用于有自己时间服务器,没有的只限于借鉴) 首先确认,我们 ...
- centos自动同步服务器时间
原文:https://my.oschina.net/yysue/blog/1628733 1.安装ntpdate yum install ntpdate -y 2.测试是否正常 ntpdate cn. ...
- linux通过ntpd同步服务器时间,
ntpd得rpm包下载地址:https://pkgs.org/download/ntp 比如我得服务器版本是centos7 x86的,那选择我点击的这一个: 下拉到最下面就有安装包下载了,我选择的是二 ...
- html+js 在页面同步服务器时间
将以下的代码 放置html页面中! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 超炫的时间轴jquery插件Timeline Portfolio
Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...
随机推荐
- CodeForces 156B Suspects(枚举)
B. Suspects time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...
- Spring Boot Dubbo Dubbok spring cloud
比较spring cloud和dubbo,各自的优缺点是什么 - 趁年轻再疯狂一次吧 - CSDN博客 https://blog.csdn.net/u010664947/article/details ...
- Properties 集合
Map Hashtable Properties 特点: 该集合中的键和值都是字符串类型 集合中的数据可以保存到流中, 或者从流中获取 应用: 通常该集合用于操作以键值对形式存在的配置文件 常用方法: ...
- [转载]javascript+ajax+jquery教程11--正则表达式
原文地址:javascript+ajax+jquery教程11--正则表达式作者:morflame 正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个 ...
- Linux 使用crontab定时备份Mysql数据库
项目中数据库的数据是至关重要的!在实际项目中,遇到有客户机房断电导致数据库数据丢失的问题,又因为备份容灾不及时,导致部分数据恢复不了,而刚好这部分丢失的数据对于客户来说又是至关重要的,那么怎么办呢?盲 ...
- 解读tensorflow之rnn 的示例 ptb_word_lm.py
这两天想搞清楚用tensorflow来实现rnn/lstm如何做,但是google了半天,发现tf在rnn方面的实现代码或者教程都太少了,仅有的几个教程讲的又过于简单.没办法,只能亲自动手一步步研究官 ...
- Deep learning Reading List
本文来自:http://jmozah.github.io/links/ Following is a growing list of some of the materials i found on ...
- Kattis - fence2【二分法】
Kattis - fence2[二分法] 题意 有一个农夫需要建造一个 N - 1 米长的篱笆,需要 N 根柱子,然后有 K 根 柱子 需要将这 K 根柱子 切成 N 段 然后 要尽量保证这 N 段柱 ...
- Set,List,Map的区别
最近在学习struct2中OGNL表达式的过程中,发现自己对set,list,map存在只是欠缺,在百度的过程中发现了此文觉得讲的不错,放到自己博客以便再次查阅,也希望更多地菜鸟看到. java集合的 ...
- kafka--producer配置解析
producer解析 主要是解析一下producer的相关配置以及一些使用场景 相关解析 名称 说明 类型 默认值 有效值 重要性 bootstrap.servers 用于建立与kafka集群连接 ...