Nonsense not much to say, directly on the code:
Let's show you how the plug-in is invoked:
1. Need to load countdown plugin corresponding CSS file, but also a few lines of code, you can not introduce, your handwriting is the same
CSS code content:
* {margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
Box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
} html, body {font:24px/1.5 ' Microsoft Yahei ', Arial, Tahoma, ' \5b8b\4f53 ', Sans-serif;
font-weight:700;
Background: #efefef;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
} #countdown {width:60%;
margin:20% Auto;
Color: #ff4d4d;
}. Countdown-day, Countdown-hour,. Countdown-minute,. countdown-second {display:inline-block;
Margin:0 5rem;
Background: #ff3f0f;
Font-size:2rem;
font-weight:700;
Color: #fff; }
2. Then load the JS file before you have to introduce jquery
<script type= "Text/javascript" src= js/ Jquery-2.2.4.min.js "></script>
<script type=" Text/javascript "src=" js/ Jquery.countdown-1.0.0.min.js "></script>
3. Then define an element that displays the time, and you can see the timing when you initialize the configuration
<body> <div id= "Countdown" ></div> <script type= "Text/javascript" src= "Js/jquery-2.2.4.min.js" &
gt;</script> <script type= "Text/javascript" src= "Js/jquery.countdown-1.0.0.min.js" ></script> <script> $ (' #countdown '). Countdown ({//Activity start time (either timestamp or standard date-time format "YYYY/MM/DD HH:mm:ss")///take precedence of the data-stime value of the element (the value only timestamp format) StartTime: ' 2016/6/11 17:54:00 ',//Activity end time (can be in timestamp or standard date-time format "YYYY/MM/DD HH:mm:ss")///take precedence of the data-etime value of the element (this value can only be Timestamp format) Endtime: ' 2016/6/11 17:55:00 ',///customizable elements for countdown before activity starts, such as "<span> distance activity Countdown and:</span>" Beforest Art: ' The countdown to the event begins: ',///customizable elements, such as "<span> distance activity cut-off and:</span>" BeforeEnd: ' The end of the event: ',/////////////////can be customized for the countdown to the event Ornaments//Customizable elements, such as "<span> activities closed </span>" Afterend: ' Pro, the event is over, please continue to pay attention to Oh! ',//Time format (can be used "ddd:hh:mm:ss, Dd:hh:mm:ss, H H:MM:SS, MM:SS, SS ", etc.) format: ' Dd:hh:mm:ss ',//callback function after activity callback:function () {console.log (' Pro, the activity is over, please keep your eye on it.
Oh! ');
}
}); </script> </bOdy>
Then attach the source code of the countdown plug-in, the great God did not see the laugh ha ...
/** * Simple jquery shopping mall seconds kill Countdown Plugin * @date 2016-06-11 * @author Tangshiwei * @email 591468061@qq.com/;(function (Factory)
{"Use strict";
AMD Requirejs if (typeof define = = "function" && define.amd) {define (["jquery"], factory);
else {factory (jQuery);
}) (function ($) {"Use strict";
$.fn.extend ({countdown:function (options) {if (Options && typeof (Options)!== ' object ') {return false;
///default configuration var defaults = {//Activity start time (can be in timestamp or standard date-time format "YYYY/MM/DD HH:mm:ss")///take precedence of element's Data-stime value (this value can only be timestamp format)
StartTime: ' 2016/6/11 21:00:00 ',//Activity end time (time stamp or standard date-time format "YYYY/MM/DD HH:mm:ss")//////take precedence of element's Data-etime value (this value can only be timestamp format) Endtime: ' 2016/6/11 24:00:00 ',//Pre-countdown to the event start up//customizable elements such as "<span> distance activity Countdown and:</span>" Beforestart: ' The countdown to the event begins: ',///customizable elements, such as "<span> distance activity cutoff and:</span>" BeforeEnd: ' The end of the event and the repair after Accessories//Customizable elements such as "<span> activity closed </span>" Afterend: ' Activity ended ',//Format (can be "ddd:hh:mm:ss, Dd:hh:mm:ss, Hh:mm:ss, MM:SS, SS", and so on) format: ' Dd:hh:mm:ss ',//callback function at end of activity callback:f
Unction () {return false;
}
}; Render corresponding structure according to time format var strategies = {"4": Function ($this, Timearr, desc) {return $this. HTML (desc + ' <span class= "co Untdown-day "> ' + timearr[0] + ' </span> day ' + ' <span class=" countdown-hour "> ' + timearr[1] + ' </span> time ' + ' <span class= ' countdown-minute ' > ' + timearr[2] + ' </span> min ' + ' <span class= ' countdown-second ' > ' + Tim
EARR[3] + ' </span> sec '); }, "3": Function ($this, Timearr, desc) {return $this. HTML (desc + ' <span class= "countdown-hour" > ' + timearr[0] + ' </span> ' + ' <span class= ' countdown-minute ' > ' + timearr[1] + ' </span> min ' + ' <span class= ' countdown-
Second "> ' + timearr[2] + ' </span> sec '); }, "2": Function ($this, Timearr, desc) {return $this. HTML (desc + ' <span class= "Countdown-minute" > ' + timearr[0] + ' </span> ' + '<span class= "Countdown-second" > ' + timearr[1] + ' </span> sec '); }, "1": Function ($this, Timearr, desc) {return $this. HTML (desc + ' <span class= "Countdown-second" > ' + timearr[0]
+ ' </span> sec ');
}
}; /** * [killtime time difference conversion and formatting operation] * @param {[Object]} _this_ [jquery Object] * @param {[number]} stime [current times] * @param {[N Umber]} ETime [end time] * @param {[string]} DESC [Time modified] * @param {[String]} format [time format] * @return {[Function]} strate Gies [render corresponding structure according to format]/var killtime = function (_this_, stime, etime, desc, format) {var diffsec = (etime-stime)/1
000;
var map = {H:math.floor (diffsec)%, M:math.floor (diffsec/60)%, S:math.floor (diffsec% 60)
};
var format = Format.replace ([dhms]) +/g, function (match, subexp) {var subexpval = Map[subexp];
if (subexpval!== undefined) {if (Match.length > 1) {subexpval = ' 0 ' + subexpval;
Subexpval = Subexpval.substr (subexpval.length-match.length); Return Subexpval; ' Else if (subexp = = ' d ') {if (match.length >= 1 && match.length < 4) {Map[subexp] = Math.floor
(Diffsec/(60 * 60 * 24));
var d = ' + Map[subexp];
Return D.substr (d.length-match.length);
} return match;
});
Group the time format with the symbol ":" var Timearr = String.prototype.split.call (format, ': '); /** * [render render corresponding structure by grouping] * @param {[Object]} _this_ [jquery Object] * @param {[number]} Timearrlen [array length after time grouping] * @p Aram {[Array]} Timearr [arrays after time grouping] * @param {[String]} DESC [Time modified] * @return {[Function]} strategies [render corresponding structure based on array length] *
/var render = function (_this_, Timearrlen, Timearr, desc) {return Strategies[timearrlen] (_this_, Timearr, DESC);
};
Render (_this_, timearr.length, Timearr, DESC);
//overwrite default configuration var opts = $.extend ({}, defaults, options);
Return This.each (function () {var $this = $ (this);
var _timer = null; takes precedence over the data-stime value of the element (this value can only be timestamp format) var stime = $this. Data (' Stime ')? parseint ($this. Data (' sTime '): (New Date (Opts.starttime)). GetTime (); takes precedence over the data-etime value of the element (this value can only be timestamp format) var etime = $this. Data (' ETime ')?
parseint ($this. Data (' ETime '): (New Date (Opts.endtime)). GetTime ();
if (_timer) {clearinterval (_timer);
_timer = setinterval (function () {var nowtime = (new Date ()). GetTime ();
if (Nowtime < stime) {//activity is temporarily not started Killtime ($this, Nowtime, Stime, Opts.beforestart, Opts.format); else if (nowtime >= stime && nowtime <= etime) {//active in Killtime ($this, Nowtime, ETime, Opts.before
End, Opts.format);
else {//activity closed clearinterval (_timer);
$this. HTML (opts.afterend);
if (Opts.callback && $.isfunction (opts.callback)) {Opts.callback.call ($this);
}}, 1000);
});
}
});
});
And then a couple of effect charts:
Wonderful topic Sharing:JS Implementation Countdown Function Summary
The above is the entire content of this article, I hope to learn jquery help you
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
