jquery Mall activity seconds Kill Countdown Plugin

Source: Internet
Author: User
Tags current time extend time 0

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.