jquery Mall activity seconds Kill Countdown Plugin

Mall or activity seconds kill Countdown plug-in, can be divided into three states seconds before killing, seconds kill, seconds kill end. The text written in each state can be customized.

Let's look at how specifically to call

<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 ":" Seconds Kill Countdown: "," endtips ":" Distance End: "," stoptips ":" Seconds kill end! " "} ' ></div>

The above call is a single call, which means that there is only one place on the page to use the countdown; let's see if there are multiple countdown on the page how to call.

The method is simple, just add the following code to the page

<script type= "Text/javascript" >
$ ('. Nowtime '). each (function () {
var $this = $ (this),
data = $this. attr (' Data-config ');
$this. Countdown (eval (' + Data + '));
});
</script>

JS plug-in code, we can save the following file into a JS

/**
* Author:merlin
* Date:2012-9-8
* TIME:PM 6:20
* CONTACT:QQ 77642304
*/

/*


* This plugin supports 1 or more countdown


* StartTime Introduction: milliseconds (number of milliseconds after countdown start) (format: 1347206408) or date format time (format 1:2012-9-07 01:01:01) (Format 2:2012/9/07 01:01:01)


* Endtime Introduction: Milliseconds (the number of milliseconds after the countdown to end) (format: 1347206408) or date format time (format 1:2012-9-07 01:01:01) (Format 2:2012/9/07 01:01:01)


* Nowtime Introduction: Get the time the server is currently refreshed or the time of the local computer


* Interval Introduction: Unit: milliseconds, the value range (&gt;=100 milliseconds), the default is 1000 milliseconds, the countdown refresh interval (in milliseconds/times) that is, every number of milliseconds to refresh, for example: Interval = 2000, then the screen time each change will be less than two seconds


* Mindigit Introduction: The minimum number of digits per time unit value, meaning more than no truncation, less than the previous 0 display, the parameter is: TRUE or false default True


* Showday Introduction: Show days, parameters are: TRUE or false default True


* TIMEUNITCLS Introduction: Time unit combination value, each time unit class name customization, set the time Unit B label class


* For example: {


' d ': ' m-d ',//day


' H ': ' m-h ',//hour


' m ': ' m-m ',//min


' s ': ' m-s ',//sec


}


* Starttips Introduction: Not at the beginning of the prompt, you can not fill


* Endtips Introduction: Countdown in the prompt, you can not fill


* Stoptips Introduction: End of the prompt, the default 0 days 0:0 0 seconds or 0:0 0 seconds


* TimeStamp Introduction: Whether to display days, hours, minutes, seconds of these words


* */

Countdown Plugin

!function ($) {


$.fn.countdown = function (options) {


Set default Properties


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 = $ (' &lt;span&gt;&lt;/span&gt; '),


Nowtime,


Match time


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

Determine the current time
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);

Supplement 0 method
function Addzero (Isadd, time) {
if (!isadd) return time;
else return time < 10? Time = ' 0 ' + time:time;
}

Days, hours, minutes, seconds
var timeStamp = {"Day": ', ' hour ': ', ' min ': ', ' sec ': '};
if (opts.timestamp) TimeStamp = {"Day": ' Days ', ' hour ': ' When ', ' min ': ' Minutes ', ' sec ': ' sec '};

(function Remaintime () {
var time = {},
Seconds
Word = ';

Gets the number of milliseconds that need to be timed
seconds = Nowtime < StartTime? Starttime-nowtime:endtime-nowtime;
$this. HTML (');

Whether to show days


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

Countdown to activity Start


if (Nowtime &lt; StartTime) {


if (opts.starttips) word = opts.starttips;


} else {


Event End Countdown


if (Endtime &gt; Nowtime) {


if (opts.endtips) word = opts.endtips;


}//Countdown Stop.


else {


if (opts.stoptips) {


Word = opts.stoptips;


$this. HTML (Word);


} else {

for (Var i in time) {


if (i = = ' Day ' &amp;&amp;!opts.showday) continue;


Time[i] = 0; Time 0


$block. Clone (). addclass (Opts.timeunitcls[i]). Text (Time[i] + timestamp[i]). Appendto ($this);


}


}


Cleartimeout ($timer);


return false;


}


}

               //write
                 $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);
               }

Cumulative time
Nowtime = Nowtime + opts.interval/1000;

Loop call
$timer = settimeout (function () {
Remaintime ();
}, Opts.interval);
})();
});
}
} (JQuery);

/**
* Author:merlin
* Date:2012-9-8
* TIME:PM 6:20
* CONTACT:QQ 77642304
*/

/*
* The object that is invoked is closed by default
* Time Introduction: Countdown times
* Tag Introduction: Storage time for the countdown container
* Closed Introduction: Close the method, now has two kinds: hide or remove or refresh
* Hide form hidden, remove delete form, refresh page or page jump with URL
* URL Description: Jump address
* */

Countdown shutdown


!function ($) {


$.fn.timing = function (options) {


Set Countdown Default Properties


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

The invocation effect is as follows:

Note that you must remember to add the jquery plugin, because it is based on jquery.