jQuery倒计时组件(jquery.downCount.js)

//html
<span class="days">00</span>
<span class="hours">00</span>:
<span class="minutes">00</span>:
<span class="seconds">00</span>
<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);

原文地址:https://www.cnblogs.com/shark1100913/p/9650266.html

时间: 2024-10-10 20:13:42

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

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

官方文档: http://api.jqueryui.com/autocomplete/#entry-examples 要使用JQuery AutoComplete组件,需要引用: [1].jquery.js [2].jquery-ui.js [3].jquery.ui.autocomplete.css 然后这样使用即可: var submitAutoCompleted = function(event, ui) { var $input = $(this); $input.val(ui.item

jquery 倒计时代码分享一例

一个简单的jquery 倒计时代码,分享记录下. html部分: <span class="time_wrap" value="1397145180" style="line-height:200%;"></span> js部分: <script type="text/javascript"> $(document).ready(function(){ setInterval(functio

使用jQuery进行组件开发(完整例子)

使用jQuery进行组件开发和使用纯JavaScript脚本(不使用框架)原理基本类似,特别是公共方法的组织是一样的. 不同点是,jQuery使用了插件机制,通过$()直接进行操作对象(DOM元素)绑定,然后对DOM元素或HTML代码进行绑定事件等的操作. 另一个不同点则是把jQuery当做工具来使用,用来创建DOM对象,快速查找指定DOM对象等. 例子测试通过. 初级简单示例,只实现了增加页和选择页功能. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

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

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据

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

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据

jQuery翻页yunm.pager.js,涉及div局部刷新

前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是: 如何封装一个翻页插件,如题中的yunm.pager.js. 涉及到的div局部刷新该如何做. 翻页的总体流程涉及到的知识点很多,这篇文章我们也主要来关注以上两点,其余的内容,请自悟. 一.如何定义局部刷新的div 翻页时,我们一般只会刷新页面中涉及到翻页的父级div,那么该如何定义呢? <form rel="support_deal_page" ta

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

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据

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

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery实现一个简单的倒计时功能. 本文以团购网站的倒计时为背景,我们知道,网站会给每个优惠活动(商品)定一个结束时间,也就是到期时间,但系统时间到达了结束时间,就意味着活动结束.因此,我们在HTML中就要定义活动的结束时间. <ul class="prolist"> <li><img src=&quo

jquery自定义组件开发

jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件. 第一步要知道封装jquery组件的基本语法 (function ($) { $.fn.ziDinYiZuJian = function () { //ziDinYiZuJian 组件 要实现的功能代码 } })(jQuery) 第二步调用自定义的组件 调用组件必须要引入在组件中用到的js包,然后调用 <div id="dom"></div> $('#