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 (>=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 = $ (' <span></span> '),
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 < StartTime) {
if (opts.starttips) word = opts.starttips;
} else {
Event End Countdown
if (Endtime > 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 ' &&!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 > 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.