Home > Developer > Web Develop
1.1 Help Documents Keywords
Countdown seconds Kill Timer
1.2. Usage Scenarios
Such a countdown in the shopping site will often use, such as the second kill, time-limited snapping, confirm receipt countdown.
This function is not difficult to achieve, is the use of JS timing execution, search the online code, a variety of, are a method, did not do encapsulation, easy to use, so write a plug-in, easy to use in the project.
1.4. Instructions for use
Start using
1. Introduction of Oao.timer.js
2, to display the countdown time Div
<div id= "timer1" end-date= "2016-1-1" ></div>
<div id= "Timer2" end-date= "2015/10/1 12:5:2" ></div>Code:
3. Initialize Countdown
$ (function () {//Document loaded initialization countdown
$ ("#timer1"). Oaotime ();
$ ("#timer2"). Oaotime ();
})
This can be used, very simple, so easy to use in the development of the project unified, unified modification.
1.5. on the code
// Countdown Plug- in $.fn.extend ({ oaotime:function() { this}each (function () {var datestr = $ (this). attr ("End-date");
var endDate = new Date (Datestr.replace (/-/g, "/"));//The total number of milliseconds to get the specified time
Now is the time to get the server in the dynamic page, if no client time is defined
if (now==undefined) {
now = new Date (). GetTime ();
}
var TMS = enddate-now;//Get time difference
if (tms<0) {alert ("Time expired"); return;}
$.oaotime.timers.push ({tms:c,content:$ ( This)}); $.oaotime.start (); }); }}); //Countdown Plug- in$.oaotime={ //countdown container, all need to countdown time to register to this container, in the container is a object,object describes the countdown end time, and display the time of the jquery object (such as Div)timers:[],//a global Countdown state, INIT represents the initialization state, start indicates a running state, stop indicates a stop stateStatus: ' Init ', //The core code of this plugin is the method of calculating time and timing refresh timeTakecount:function(){ //If the timer does not start and does not execute if( This. status! = ' Start ')return; SetTimeout ("$.oaotime.takecount ()", 1000 ); varTimers = This. Timers; for(vari = 0, j = timers.length; I < J; i++) { //Count minus oneTimers[i].tms-= 1000; //Console.info (TIMERS[I].TMS); //Calculate time Division seconds varDays = Math.floor (Timers[i].tms/(1000 * 60 * 60 * 24)); varHours = Math.floor (TIMERS[I].TMS/(1000 * 60 * 60))% 24; varminutes = Math.floor (Timers[i].tms/(1000 * 60))% 60; varseconds = Math.floor (timers[i].tms/1000)% 60; if(Days < 0) Days= 0; if(Hours < 0) Hours= 0; if(Minutes < 0) Minutes= 0; if(Seconds < 0) Seconds= 0; varNewtimetext = days+ "Days" +hours+ "hours" +minutes+ "minutes" +seconds+ "seconds"; Timers[i].content.text (Newtimetext); //Console.info (newtimetext); } }, //Start CountdownStartfunction(){ if( This. status== ' init '){ This. Status = ' Start '; This. Takecount (); } }, //Stop the Countdown .Stopfunction(){ This. Status = ' Stop '; }};
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" /><title>Untitled Document</title><Scripttype= "Text/javascript"src= "Js/jquery-1.9.1.min.js"></Script><Scripttype= "Text/javascript"src= "Js/oao.timer.js"></Script></Head><Body><ul> <DivID= "Stop">Stop it</Div> <DivID= "Timer1"end-date= "2016-1-1"></Div> <DivID= "Timer2"end-date= "2015/10/1 12:5:2"></Div></ul></Body></HTML><Script> $(function(){ $("#stop"). Click (function() {$.oaotime.stop (); }); $("#timer1"). Oaotime (); $("#timer2"). Oaotime (); }) </Script>
Write a relatively hasty, I hope we point out that the bad place, there is a better plan to be able to share, feel desirable, take to use.
jquery Plugin countdown-Buy seconds Kill
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
