//html

<div class="countdown">  

<span class="days">00</span>

<span class="hours">00</span>:
<span class="minutes">00</span>:
<span class="seconds">00</span>
</div>
<script src="js/jquery.downCount.js"></script>
<script type="text/javascript">
// 倒计时
openCountdown: function() {
var that = this;
var timestamp = Date.parse(new Date())/1000;//js获取当前时间转换成时间戳
var time = timestamp +0+ that.allow_time;//that.allow_time为计时时间戳
var newtime = that.formatDateTime(time*1000);//通过方法把时间戳转换为所需格式:'月/日/年 时:分:秒'
$('.countdown').downCount({
date: newtime, //'12/27/2025 00:00:00'
offset:8//时区东8区
}, function() {
alert('倒计时结束!');
}); },
// 将时间戳转换为指定格式的时间
formatDateTime: function(inputTime) {
var date = new Date(inputTime);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
// console.log(m + '/' + d + '/' + y + ' ' + h + ':' + minute + ':' + second)
return m + '/' + d + '/' + y + ' ' + h + ':' + minute + ':' + second;//所需要的格式可自由拼接
},
</script>
//jquery.downCount.js

(function($){$.fn.downCount=function(options,callback){var settings=$.extend({date:null,offset:null},options);if(!settings.date){$.error('Date is not defined.');}
if(!Date.parse(settings.date)){$.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');}
var container=this;var currentDate=function(){var date=new Date();var utc=date.getTime()+(date.getTimezoneOffset()*60000);var new_date=new Date(utc+(3600000*settings.offset))
return new_date;};function countdown(){var target_date=new Date(settings.date),current_date=currentDate();var difference=target_date-current_date;if(difference<0){clearInterval(interval);if(callback&&typeof callback==='function')callback();return;}
var _second=1000,_minute=_second*60,_hour=_minute*60,_day=_hour*24;var days=Math.floor(difference/_day),hours=Math.floor((difference%_day)/_hour),minutes=Math.floor((difference%_hour)/_minute),seconds=Math.floor((difference%_minute)/_second);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;var ref_days=(days===1)?'day':'days',ref_hours=(hours===1)?'hour':'hours',ref_minutes=(minutes===1)?'minute':'minutes',ref_seconds=(seconds===1)?'second':'seconds';container.find('.days').text(days);container.find('.hours').text(hours);container.find('.minutes').text(minutes);container.find('.seconds').text(seconds);container.find('.days_ref').text(ref_days);container.find('.hours_ref').text(ref_hours);container.find('.minutes_ref').text(ref_minutes);container.find('.seconds_ref').text(ref_seconds);};var interval=setInterval(countdown,1000);};})(jQuery);

jQuery倒计时组件(jquery.downCount.js)的更多相关文章

  1. 页面动态数据的滚动效果——jquery滚动组件(vticker.js)

    <script language="javascript" src="lirms/Test/jquery-1.4.2.js"></script ...

  2. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  3. 扩展 jquery miniui 组件实现自动查询数据

    主题 之前写过一篇文章分享了公司basecode查找数据后台是怎么实现的(http://www.cnblogs.com/abcwt112/p/6085335.html).今天想分享一下公司前台是怎么扩 ...

  4. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  5. Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  6. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. Web jquery表格组件 JQGrid 的使用 - 全部代码

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. 【ASP.Net MVC】在AspNet Mvc使用JQuery AutoComplete组件

    在AspNet Mvc使用JQuery AutoComplete组件 官方文档: http://api.jqueryui.com/autocomplete/#entry-examples 要使用JQu ...

  9. jquery倒计时(仿团购)转至 http://justcoding.iteye.com/blog/2210962

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery实现一个简单的倒计时功能.

随机推荐

  1. php跨域问题记录

    记录跨域问题 一.问题 在控制层加了如下代码: header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN'] ); header('Ac ...

  2. 机器学习基石7-The VC Dimension

    注: 文章中所有的图片均来自台湾大学林轩田<机器学习基石>课程. 笔记原作者:红色石头 微信公众号:AI有道 前几节课着重介绍了机器能够学习的条件并做了详细的推导和解释.机器能够学习必须满 ...

  3. java 新手必看大全

    背景:c#开发人员 学习java 新手一枚.只适合新手 1:配置java环境 (win10环境参考本目录java环境配置) 2:IDEA 熟悉开发工具 (当初没学java 很大的一个原因就是工具e文 ...

  4. babel-polyfill的几种使用方式

    前言 preset与plugin的关系: preset中已经包含了一组用来转换ES6+的语法的插件,如果只使用少数新特性而非大多数新特性,可以不使用preset而只使用对应的转换插件 babel默认只 ...

  5. WPF UserControl响应窗体的PreviewKeyDown事件

    目的 在UserControl页面实现通过快捷键打开新建窗口 实现过程 监听Window窗体的PreviewKeyDown 其实,使用KeyDown事件也是可以的 页面代码 <Window x: ...

  6. Matlab imshow, image, imagesc 三者详细分析

    1.显示RGB图像 相同点:这三个函数都是把m*n*3的矩阵中的数值当做RGB值来显示的. 区别:imshow将图像以原始尺寸显示,image和imagesc则会对图像进行适当的缩放(显示出来的尺寸大 ...

  7. react 常见api 使用(长期更新)

    1.父子通信 1.1 父-子 props 父组件: class myPage extends React.Component { render() { return ( <div> {/* ...

  8. GIt -- fatal: refusing to merge unrelated histories 问题处理

    今晚碰到这个问题-- fatal: refusing to merge unrelated histories 想了一下,为什么就这样了? 因为我是先本地创建了仓库,并添加了文件,然后再到github ...

  9. SQLAlchemy 使用(二)表关联

    前言 在上一章中我们介绍了 SQLAlchemy 建立基本表,但是一般情况下,表之间是有关联的,比如 一对一/一对多/多对多,当然 SQLAlchemy 是支持建立model时指定关系的 正文 多对一 ...

  10. Django models文件模型变更注意事项(表结构的修改)

    表结构的修改 1.表结构修改后,原来表中已存在的数据,就会出现结构混乱,makemigrations更新表的时候就会出错 比如第一次建模型,漏了一个字段,后来补上了.(经常遇到模型字段修改) 重新ma ...