How do I make clocks using IFRAME tags and javascript?

Source: Internet
Author: User
Tags time in milliseconds

How do I make clocks using IFRAME tags and javascript?

How do you make a clock? The effect is as Follows:

The clock here will go on and on, but the page below is not going to be, so we can achieve the desired effect. Below I will be divided into the following aspects:

    1. The date reference type in JavaScript
    2. Several examples of poor performance
    3. <iframe> tags
    4. The final good example of the effect

If you want to look directly at the final good example of the effect, you can click here directly.

First Part: Date Reference type

1. Date objects can be constructed directly using the new operator and the date Constructor. The code is as Follows:

var date=new date ();

  

2. The time of the date object directly obtained through the constructor is the current Time. Because the date type uses the number of milliseconds since UTC (coordinated Universal time, International coordination Hour) from midnight January 1, 1970 to the date of the Change. So if the output is direct, there will be a big number for the Reason. however, because the date reference type inherits the object reference type, it inherits the ToString () method of Object. As a direct output, it will use the ToString () method by Default.

var date=new date;console.log (date);//  Mon Oct 23:29:07 gmt+0800 (china Standard Time)
Console.log (date.tostring ());//mon Oct 23:29:07 gmt+0800 (china Standard Time)

3. If we use the valueof () method (also inherited from the object () reference type), We can get the number of MILLISECONDS.

var date=new date ();
Console.log (date.valueof ());//1477927747916
1477927747916 milliseconds is exactly 46 Years.

4. At the same time, date has a tolocalestring () method that converts the time in milliseconds to the local string representation, as Follows:

var date=new date (); console.log (date.tolocalestring ());//2016/10/31 11:29:07

5. But what if we don't want to use the current time and want to use a custom time? The date type gives us two methods, each with a different initialization style.

var time=new Date (date.parse ("october 31,2016")); console.log Oct//mon 00:00:00 (china standard time) var gmt+0800 New Date ("october 31,2016"), console.log (time),//mon Oct 00:00:00 gmt+0800 (china standard times) var datetime=new Date (DATE.UTC (2016,9,31,23,26,50)); Console.log (dateTime);//this is a bug  Tue Nov 07:26:50 gmt+0800 (china standard time) var timedate=new Date (2016,9,31,23,26,50 ); console.log (timedate);//mon Oct 23:26:50 gmt+0800 (china Standard Time)

That is, the two methods are initialized at the time of the constructor, one is Date.parse (), and if the input format is correct, we even omit it. Another is the date.utc, here passed six parameters, respectively, is the date of the month and seconds, the same can be omitted not to Write. It is worth noting here:

    • "month" is calculated starting from 0, that is, February but to enter 1, October to enter 9 ...
    • "when" must be calculated using a 24-hour method.

But Here's a bug, when we use var datetime=new Date (DATE.UTC (2016,9,31,23,26,50)), The incoming number is 9, it should be October, but it gets November, then we can replace it with other METHODS.

Part Ii: Several examples of poor effectiveness

How do I make clocks using IFRAME tags and javascript?

Related Article

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.