Home > Developer > JavaScript
Compile the countdown timer and jquerycountdown Based on the jquery plugin
If you don't talk much about it, go directly to the Code:
The following describes how the plug-in is called:
1. You need to load the css file corresponding to the countdown plug-in first, just a few lines of code. You don't need to introduce it, just like writing it yourself.
<Head> <meta charset = "UTF-8"> <meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1 "/> <title> jquery countdown plug-in </title> <link rel =" stylesheet "type =" text/css "href =" css/jquery.countdown-1.0.0.css "/>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. Load the js file again. Before that, 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. Define an element to display the time. After initializing the configuration, you can see the timing.<Body> <div id = "countdown"> </div> <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> <script >$ ('# countdown '). countdown ({// Activity start time (the time stamp or standard date and time format can be used "yyyy/MM/dd HH: mm: ss ") // prioritize the data-stime value of the element (this value can only be in the timestamp format) startTime: '2017/11 17:54:00 ', // activity end time (the time stamp or standard Date and Time Format "yyyy/MM/dd HH: mm: ss" can be used) // prioritize the da of the element Ta-etime value (this value can only be in the timestamp format) endTime: '2017/11 17:55:00 ', // modification of the countdown before the activity starts // customizable element, for example, "<span> countdown to the start of the activity and </span>" beforeStart: 'countdown to the start of the activity and :', // modify the countdown of an activity. // customizable elements. For example, "<span> before the activity ends, </span>" beforeEnd: 'before the activity ends :', // modifier after the activity ends // customizable element, for example, "<span> activity ended </span>" afterEnd: ', activity ended, please stay tuned! ', // Time format ("ddd: hh: mm: ss, dd: hh: mm: ss, hh: mm: ss, mm: ss", etc. can be used) format: 'dd: hh: mm: ss', // callback function callback: function () {console. log ('dear, the activity is over. Please stay tuned! ') ;}}); </Script> </body>Then, the source code of the countdown plug-in is attached. Don't laugh when you read it...
/*** Simple jquery shopping mall seckill countdown plug-in * @ 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 ;} // The default var defaults = {// Activity start time (the time stamp or standard Date and Time Format "yyyy/MM/dd HH: mm: ss" can be used ") // prioritize the data-stime value of the element (this value can only be in the timestamp format) startTime: '2017/11 21:00:00 ', // activity end time (the time stamp or standard Date and Time Format "yyyy/MM/dd HH: mm: ss" can be used ") // take the data-etime value of the element first (the value can only be in the timestamp format) endTime: '2017/11 24:00:00 ', // modification of the countdown before the activity starts // customizable elements, such as "<span> countdown from the activity start: </span>" beforeStart: 'There are also: ', // modification of the Countdown during the activity // customizable elements, such as "<spa N> the distance from the activity deadline is: </span> "beforeEnd: '. The distance from the activity deadline is also:', // modifier after the activity ends // customizable element, for example, "<span> activity ended </span>" afterEnd: 'activity ended ', // time format ("ddd: hh: mm: ss, dd: hh: mm: ss, hh: mm: ss, mm: ss, ss) format: 'dd: hh: mm: ss ', // callback function callback: function () {return false ;}}; // renders the corresponding structure var strategies = {"4 ": function ($ this, timeArr, desc) {return response this.html (desc + '<span class = "countdown-day">' + timeArr [0] + '</span> Day' + '<Span class = "countdown-hour">' + timeArr [1] + '</span>' + '<span class = "countdown-minute">' + timeArr [2] + '</span> points' + '<span class = "countdown-second">' + timeArr [3] + '</span> second '); }, "3": function ($ this, timeArr, desc) {return comment this.html (desc + '<span class = "countdown-hour">' + timeArr [0] + '</span>' + '<span class = "countdown- minute "> '+ timeArr [1] +' </span> points '+' <span class =" countdown-se Cond "> '+ timeArr [2] +' </span> second ');}," 2 ": function ($ this, timeArr, desc) {return comment this.html (desc + '<span class = "countdown-minute">' + timeArr [0] + '</span> points' + '<span class = "countdown- second "> '+ timeArr [1] +' </span> second ');}, "1": function ($ this, timeArr, desc) {return effecthis.html (desc + '<span class = "countdown-second">' + timeArr [0] + '</span> sec ');}}; /*** [convert and format the time difference of killTime] * @ param {[Object]} _ this _ [jquery Object] * @ param {[Number]} sTime [current time] * @ param {[Number]} eTime [End Time] * @ param {[String]} desc [time modifier] * @ param {[String]} format [time format] * @ return {[Function]} strategies [rendering the corresponding structure based on the format] * /var killTime = function (_ this _, sTime, eTime, desc, format) {var diffSec = (eTime-sTime)/1000; var map = {h: Math. floor (diffSec/(60*60) % 24, m: Math. floor (diffSec/60) % 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 = '00' + map [subExp]; return d. substr (d. length-match. length) ;}} return match ;}); // grouping the time format using the ":" symbol var timeArr = String. prototype. split. call (format ,':'); /*** [render renders the corresponding structure by grouping] * @ param {[Object]} _ this _ [jquery Object] * @ param {[Number]} timeArrLen [time group array length] * @ param {[Array]} timeArr [Array after time grouping] * @ param {[String]} desc [time modifier] * @ return {[Function ]} strategies [rendering the corresponding structure based on the array length] */var render = function (_ this _, timeArrLen, timeArr, desc) {return strategies [timeArrLen] (_ this _, timeArr, desc) ;}; render (_ This _, timeArr. length, timeArr, desc);} // overwrite the default var opts =$. extend ({}, defaults, options); return this. each (function () {var $ this = $ (this); var _ timer = null; // prioritize the data-stime value of the element (this value can only be in the timestamp format) var sTime = $ this. data ('stime ')? ParseInt ($ this. data ('stime'), 10): (new Date (opts. startTime )). getTime (); // take the data-etime value of the element first (the value can only be in the timestamp format) var eTime = $ this. data ('etime ')? ParseInt ($ this. data ('etime'), 10): (new Date (opts. endTime )). getTime (); if (_ timer) {clearInterval (_ timer);} _ timer = setInterval (function () {var nowTime = (new Date ()). getTime (); if (nowTime <sTime) {// The activity has not started killTime ($ this, nowTime, sTime, opts. beforeStart, opts. format);} else if (nowTime >=stime & nowTime <= eTime) {// killTime ($ this, nowTime, eTime, opts in the activity. beforeEnd, opts. format);} else {// The activity has ended clearInterval (_ timer); then this.html (opts. afterEnd); if (opts. callback & $. isFunction (opts. callback) {opts. callback. call ($ this) ;}}, 1000 );});}});});Let's try again:
Highlights: Summary of Countdown functions implemented by js
The above is all the content of this article. I hope it will help you learn jQuery.
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
