Let's talk about the timer first:
//Timer: Set a timer, then set a waiting time, after reaching the specified time, the corresponding operation is performed
//Two kinds of timers: Use the same, the difference after one execution does not stop, one only executes once
//window.setinterval ([Function],[interval]);
/ * Set a timer to reach the specified time [interval] to perform our operation [function], and then the timer does not stop,
every so long thereafter, we re-execute our function*/.
//window.settimeout ([Function],[interval]);
/ * Set a timer to reach the specified time [interval], perform our operation [function], and stop the timer. */
//Timer queue: The timer has a return value, which returns a number that represents the current timer.
//See an example
var count=0;
// set a interval to perform function every 1000 milliseconds
var timer=window.setinterval (function () {
count++;
Console.log (count);
},1000);
Next I'm going to put the timer in the following timer case
CSS Styles
<style type= "Text/css" >
body,div{
margin:0;padding:0;font-family: "Microsoft Jas Black"; font-size:28px;
}
#div1 {
margin:10px Auto 0;
padding:0 10px;
width:700px;
height:50px;
line-height:50px;
Text-align:center;
border:1px solid #ddd;
box-shadow:inset 0px 0px 1px 5px #000;
border-radius:5px;
background:-webkit-linear-gradient (top Left,chartreuse,coral,cyan);
}
</style>
<body>
<div id= "Div1" > Beijing time:</div>
<script type= "Text/javascript" >
Get the current time of your own computer (time data Format: Object data type)
/* var time = new Date ();
Console.log (time); * //Try it now?
//Can be seen in the console output is: Sat Dec 21:43:25 gmt+0800 (China Standard Time), next we want to turn this format into the following format (do not care about the time, note the format)
//"May 24, 2015 Sunday 15:31 27 Seconds" becomes our string of this time format
var Odiv=document.getelementbyid ("Div1");
var timestr=formattime ();
Odiv.innerhtml+=timestr;
var timer=window.setinterval (function () { //Add timer, every second (1000 milliseconds = 1 seconds), perform a method on the page
var timestr=formattime ();
odiv.innerhtml= "Beijing Time:" +TIMESTR;
},1000)
//method Start, Standardized month day, week, time division seconds
function Formattime () {
var time=new date ();//Time Format data, or local current time
var year=time.getfullyear (); //Get year
var month=time.getmonth () +1; //0-11 on behalf of our January-December, so to +1 to represent our China's month
var day=time.getdate (); //Acquisition date
var w=time.getday (); //Get week; Get results 0-6 for Sunday-Saturday
//w Get results will be 0-6, but output week 0, Week 6, is wrong, so we're going to convert
//Since it is 0-6, then there is an index. Now that we can represent the index, we can find the character if we have a string.
var wstr= "Day 123456",/* This index is also 0-6*/ Week=wstr.charat (w); //Use the Charat (index) method to get the index
var hours=time.gethours (); //When acquired
var minutes=time.getminutes (); //Get minutes
var seconds=time.getseconds (); //Get seconds
var mlseconds=time.getmilliseconds (); //MS
return year+ "year" +zero (month) + "monthly" +zero (day) + "Days Week" //To get the month day of the week and seconds to splice together, remember to fill 0
+week+ "" +zero (Hours) + "Time" +zero (minutes) + "min" +zero (seconds)
+ "seconds";
}
//Because there will be a single digit for the month and day, you need to fill 0
function Zero (value) {
return value<10? " 0 "+value:value;
}
</javascript>
</body>
JS Detailed date Application + Timer principle + Timer case