1, Effect and function description
The time control is used to tell the user how much time is left in an activity, accurate to seconds.
2. Principle of realization
First defines the time of the activity, the year is accurate to the millisecond, in the current year to the second, in the end time, minus the current time, the rest of the time to give the remaining time to show out how far away from the cut-off date.
Main code
Copy Code code as follows:
var starttime = new Date ();
Get the current time
Starttime.setfullyear (2016, 5, 27);
Call set Year
Starttime.sethours (23);
Call the hour field of the specified time setting
Starttime.setminutes (59);
Call Setting the minute field for the specified time
Starttime.setseconds (59);
Invokes the second field that sets the specified time
Starttime.setmilliseconds (999);
Call the millisecond field for the specified time
var endtime=starttime.gettime ();
To get the time ended
var NMS = Endtime-nowtime.gettime ();
Time minus current time to get remaining time
var ND = Math.floor (nms/(1000 * 60 * 60 * 24));
Define parameters to get the number of days
var NH = Math.floor (nms/(1000*60*60))% 24;
Define parameter Get Hour
var NM = Math.floor (nms/(1000*60))% 60;
Define parameter Get minutes
var NS = Math.floor (nms/1000)% 60;
Define parameters Get seconds These are the current time
3. Operating Environment
IE6 IE7 IE8 and above Firefox and Google
Can be implemented under the Chrome Viewer
4, all pictures of the compression package to create a new file after the package decompression into the folder picture of the compression package in the bottom of the page can be seen and download the download without modifying the folder name because itself has been written and HTML5 within the path is consistent
5, will create the HTML file to save when the encoding type (UTF-8 has a signature) so that some Chinese normal display, the save type (T) replaced (All Files (*.*)), the HTML5 and then put the picture folder in the same folder effect
6, Code
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.9.1.js "></script>
<style type= "Text/css" >
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
Body{font:12px/180%;background: #fff;}
. Timerbg{background:url (images/bg.png) no-repeat;height:60px;width:980px;margin:20px auto;
. TIMERBG div{float:right;font-size:16px;margin:24px 0 0 0;font-weight:800;text-align:left;width:335px;font-family: "Microsoft Ya Hei", "Song Body";}
. TIMERBG Div strong{font-size:28px;margin:0 13px;color: #D6000F; font-family:arial;}
#daoend {margin:24px 0 0 0;width:324px;color: #D6000F; font-size:22px;}
</style>
<body>
<div class= "TIMERBG" >
<div id= "Daoend" style= "Display:none;" > This event is over. </div>
<div id= "DAO" ><strong id= "Remaind" ></strong> day <strong id= "Remainh" ></strong> time < Strong id= "REMAINM" ></strong> <strong id= "remains" ></strong> sec </div>
</div>
<script type= "Text/javascript" >
var starttime = new Date ();
Define parameters to return the date and time of the day
Starttime.setfullyear (2016, 5, 27);
Call set Year
Starttime.sethours (23);
Call the hour field of the specified time setting
Starttime.setminutes (59);
Call Setting the minute field for the specified time
Starttime.setseconds (59);
Invokes the second field that sets the specified time
Starttime.setmilliseconds (999);
Call the millisecond field for the specified time
var endtime=starttime.gettime ();
Define parameters to return the number of milliseconds from January 1, 1970
function Getrtime () {
Defining methods
var nowtime = new Date ();
Define parameters to return the date and time of the day
var NMS = Endtime-nowtime.gettime ();
Define parameter Endtime minus nowtime parameter to get the number of milliseconds to return from January 1, 1970
var ND = Math.floor (nms/(1000 * 60 * 60 * 24));
Define parameters to get the number of days
var NH = Math.floor (nms/(1000*60*60))% 24;
Define parameter Get Hour
var NM = Math.floor (nms/(1000*60))% 60;
Define parameter Get minutes
var NS = Math.floor (nms/1000)% 60;
Define parameters get seconds
if (NMS < 0) {
If the second is greater than 0
$ ("#dao"). Hide ();
Get days hidden
$ ("#daoend"). Show ();
Get activity cutoff time to expand
}else{
Otherwise
$ ("#dao"). Show ();
Days expand
$ ("#daoend"). Hide ();
Activity cutoff time Hidden
$ ("#RemainD"). Text (ND);
Show Days
$ ("#RemainH"). Text (NH);
Show hours
$ ("#RemainM"). Text (NM);
Show minutes
$ ("#RemainS"). Text (NS);
Show seconds
}
}
$ (document). Ready (function () {
Defining methods
var timer_rt = Window.setinterval ("Getrtime ()", 1000);
The definition parameter shows the Getrtime () method starts after 1000 milliseconds
});
</script>
</body>
7, after the countdown is complete, set the button's hidden property is false, simple it ~
This code is from my project interception out, small partners can be assured to use, if there is doubt, please leave a message.
