jquery商城活动秒杀倒计时插件

商城或者是活动秒杀倒计时插件，可以分为三种状态秒杀前,秒杀中,秒杀结束。每种状态所写的文字可以自定义。

下面我们来看看具体怎样调用

 <div data-config='{"startTime":"2014/03/27 11:24:34","endTime":"2014/03/28 11:24:34","nowTime":"2014/03/29 18:07:32","startTips":"秒杀倒计时：","endTips":"距离结束：","stopTips":"秒杀结束！"}'></div>

上面这种调用时单一的调用，就是说页面上只有一个地方用到了这个倒计时；我们再看看如果页面上有多个倒计时怎么调用。

方法很简单只要把下面代码加入页面即可

<script type="text/javascript">
$('.nowtime').each(function () {
var $this = $(this),
data = $this.attr('data-config');
$this.countDown(eval('(' + data + ')'));
});
</script>

js插件代码，我们可以把下面文件保存成一个js

/**
 * Author: Merlin
 * Date: 2012-9-8
 * Time: PM 6:20
 * contact：QQ 77642304
 */

/*
 * 本插件 支持 1个或多个倒计时
 * startTime    介绍：毫秒数（多少毫秒后倒计时开始）（格式：1347206408）或者日期格式时间（格式1：2012-9-07 01:01:01）（格式2：2012/9/07 01:01:01）
 * endTime      介绍：毫秒数（多少毫秒后倒计时结束）（格式：1347206408）或者日期格式时间（格式1：2012-9-07 01:01:01）（格式2：2012/9/07 01:01:01）
 * nowTime      介绍：获取服务器当前刷新的时间或者本地电脑的时间
 * interval     介绍：单位：毫秒，取值范围（>=100毫秒），默认值为1000毫秒，倒计时刷新间隔（单位为毫秒/次）即每隔多少毫秒刷新一次，例如：interval = 2000, 那么屏幕上的时间每次变化时会少两秒
 * minDigit     介绍：每个时间单位值显示的最小位数，意思是超过不截断，少则前面补0显示，参数为：true 或 false  默认 true
 * showDay      介绍：是否显示天数，参数为：true 或 false 默认 true
 * timeUnitCls  介绍：时间单位的组合值,每个时间单位的class名自定义，设定时间单位b标签的class
 *              例如: {
                     'd': 'm-d', //天
                     'h': 'm-h', //小时
                     'm': 'm-m', //分
                     's': 'm-s', //秒
                 }
 * startTips    介绍：未开始时候的提示语，可以不填
 * endTips      介绍：倒计时中的提示语，可以不填
 * stopTips     介绍：结束后的提示语，默认 0天0时0分0秒 or 0时0分0秒
 * timeStamp    介绍：是否显示 天、时、分、秒 这几个字
 * */

// 倒计时插件

!function ($) {
    $.fn.countDown = function (options) {
        // 设置默认属性
        var settings = {
                "startTime":0,
                "endTime":this.attr('data-end') || 0,
                "nowTime":'',
                "interval":1000,
                "minDigit":true,
                "showDay":false,
                "timeUnitCls":{
                    "day":'m-d',
                    "hour":'m-h',
                    "min":'m-m',
                    "sec":'m-s'
                },
                "startTips":'',
                "endTips":'',
                "stopTips":'',
                "timeStamp":true
            },
            opts = $.extend({}, settings, options);

        return this.each(function () {
            var $timer = null,
                $this = $(this),
                $block = $('<span></span>'),
                nowTime,
            // 匹配时间
                startTime = isNaN(opts.startTime) ? (Date.parse(opts.startTime.replace(/-/g, '/')) / 1000) : Math.round(opts.startTime),
                endTime = isNaN(opts.endTime) ? (Date.parse(opts.endTime.replace(/-/g, '/')) / 1000) : Math.round(opts.endTime);

            // 判断当前时间
            //nowTime = opts.nowTime === 0 ? Math.round(new Date().getTime() / 1000) : Math.round(opts.nowTime);
   nowTime = isNaN(opts.nowTime) ? (Date.parse(opts.nowTime.replace(/-/g, '/')) / 1000) : Math.round(opts.nowTime);

            // 补零方法
            function addZero(isAdd, time) {
                if (!isAdd) return time;
                else return time < 10 ? time = '0' + time : time;
            }

            // 天、时、分、秒
            var timeStamp = {"day":'', "hour":'', "min":'', "sec":''};
            if (opts.timeStamp) timeStamp = {"day":'天', "hour":'时', "min":'分', "sec":'秒'};

            (function remainTime() {
                var time = {},
                    seconds,
                    word = '';

                // 获取需要计时的毫秒数
                seconds = nowTime < startTime ? startTime - nowTime : endTime - nowTime;
                $this.html('');

                // 是否显示天数
                if (opts.showDay) {
                    time.day = addZero(opts.minDigit, Math.floor(seconds / 3600 / 24));
                    time.hour = addZero(opts.minDigit, Math.floor(seconds / 3600 % 24));
                } else {
                    time.hour = addZero(opts.minDigit, Math.floor(seconds / 3600));
                }
                time.min = addZero(opts.minDigit, Math.floor(seconds / 60 % 60));
                time.sec = addZero(opts.minDigit, Math.floor(seconds % 60));

                // 活动开始倒计时
                if (nowTime < startTime) {
                    if (opts.startTips) word = opts.startTips;
                } else {
                    // 活动结束倒计时
                    if (endTime > nowTime) {
                        if (opts.endTips) word = opts.endTips;
                    }// 倒计时停止
                    else {
                        if (opts.stopTips) {
                            word = opts.stopTips;
                            $this.html(word);
                        } else {

                            for (var i in time) {
                                if (i == 'day' && !opts.showDay) continue;
                                time[i] = 0;  // 时间置0
                                $block.clone().addClass(opts.timeUnitCls[i]).text(time[i] + timeStamp[i]).appendTo($this);
                            }
                        }
                        clearTimeout($timer);
                        return false;
                    }
                }

                // 写入
                $this.html(word);
                for (var i in time) {
                    if (i == 'day' && !opts.showDay) continue;
                    $block.clone().addClass(opts.timeUnitCls[i]).text(time[i] + timeStamp[i]).appendTo($this);
                }

                // 累加时间
                nowTime = nowTime + opts.interval / 1000;

                // 循环调用
                $timer = setTimeout(function () {
                    remainTime();
                }, opts.interval);
            })();
        });
    }
}(jQuery);

/**
 * Author: Merlin
 * Date: 2012-9-8
 * Time: PM 6:20
 * contact：QQ 77642304
 */

/*
 * 默认关闭的是调用的对象本身
 * time   介绍：倒计时时间
 * tag    介绍：存放倒计时时间的容器
 * closed 介绍：关闭的方法，现在有两种：hide or remove or refresh
 *             hide 窗体隐藏，remove将 窗体删除，refresh 刷新页面 或者 配合 url 进行页面跳转
 * url    介绍：跳转地址
 * */

// 倒计时关闭
!function ($) {
    $.fn.timing = function (options) {
        // 设置倒计时默认属性
        var settings = {
                "time":3,
                "tag":'',
                "closed":'hide',
                "url":''
            },
            opts = $.extend({}, settings, options),
            $timer = null,
            $this = $(this);

        if (opts.tag != '') {
            var $tag = $this.find(opts.tag);
            $tag.text(opts.time);
        }

        $timer = setInterval(function () {
            if (opts.time > 1) {
                if (opts.tag != '') {
                    $tag.text(--opts.time);
                } else {
                    --opts.time;
                }
            } else {
                clearInterval($timer);
                switch (opts.closed) {
                    case "hide" : {
                        $this.hide();
                    }
                        break;
                    case "remove" : {
                        $this.remove();
                    }
                        break;
                    case "refresh" : {
                        window.location.href = opts.url ? opts.url : window.location.href;
                    }
                        break;
                }
            }
        }, 1000);
    }
}(jQuery);

 

调用效果如下：

 

 

 

 

 

注意，一定要记得加jquery插件哦，因为上面是基于jquery实现的．

时间： 2024-09-20 09:44:32

jquery商城活动秒杀倒计时插件的相关文章

javascript时间排序算法实现活动秒杀倒计时效果_javascript技巧

制做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的php同学 他写了个算法给我看了下 ,刚开始看的时候觉得这就是个纯算法,不能转化成页面的dom效果,可是再看了两遍发现可以, 于是我就改了改,实现了,先分享给大家. 页面需求是:从11点到20点 每隔一个小时一场秒杀 如果是当前时间就显示正在秒杀 之前的商品就往最后排 以此类推 类似最开始的11点顺序是 11,12,13,14,15,16,17,18,19,20(点): 到12点的顺序

基于jQuery倒计时插件实现团购秒杀效果_jquery

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

基于jQuery的倒计时插件代码_jquery

剩余时间:1小时:40分:30秒 复制代码 代码如下: 1 /* * 倒计时插件,主要用来限时购买 * By wayshan 版本1.0 * 使用方法: * $(function(){ * $("#ElementId").countdown({ * Edate:"2012-12-21 15:14:23" * }); * }) */ ;(function($){ $.fn.countdown = function(options){ if (this.length =

整理8个很棒的 jQuery 倒计时插件和教程_jquery

jQuery 倒计时插件和教程. jQuery Countdown spriteTimer php ajax/jquery countdown Add a Countdown Timer on Your Website jQuery Flipclock Fancy Countdown Cool jQuery Countdown Joomla jQuery Countdown

利用jQuery实现漂亮的圆形进度条倒计时插件_jquery

jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件.该倒计时插件可以显示倒计时的秒.分钟.小时和天数.它采用圆形进度条来作为倒计时的动画,非常的时尚大方. 在线预览    源码下载  使用方法 该倒计时插件依赖于jQuery和KineticJS-一个HTML5 Canvas库.使用是要将它们引入. <script type="text/javascript" src="js/jquery.min.js"><

10 款精致的 jQuery 倒计时插件推荐

倒计时功能在很多项目中都会使用到,比如网站维护.团购网站和限时下载网站等等.通过使用jQuery倒计时插件,你可以简化你的工作量,却同样创造出超酷的jQuery倒计时功能.  本文整理了10款jQuery倒计时插件,希望为你的工作提供一些帮助.  1.5sec Maintenance Mode  此插件用于网站维护时,平息用户因无法访问网站而带来的愤怒.它有6个模板可供你选择.  源码/演示  2.Premium Coming Soon  新奇.现代.用户界面友好的倒计时页面能让你的用户清楚的记

8个很棒的 jQuery 倒计时插件和教程

jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互.下面向大家分享8个优秀的 jQuery倒计时插件和教程. jQuery Countdown spriteTimer php ajax/jquery countdown Add a Countdown Timer on Your Website jQuery Flipclock Fancy Countdown Cool jQuery Countdown Jooml

PHP+JS实现的商品秒杀倒计时用法示例_php技巧

本文实例讲述了PHP+JS实现的商品秒杀倒计时用法.分享给大家供大家参考,具体如下: <?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set('PRC'); //date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动时间段 $starttimestr = "2016-3-29 8:10:00"; $endtimestr = "2016-

jQuery短信验证倒计时功能实现方法详解_jquery

本文实例讲述了jQuery短信验证倒计时功能实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > &l