JS Detailed date Application + Timer principle + Timer case

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.