How do I make clocks with 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

Ok! Now that we know how to create a time object, we can use it to do the clock. However, the following methods are not appropriate for creating clocks.

  A. use the JavaScript timer plus the auto-refresh feature in the META tag.

The code looks like this:

<! DOCTYPE html>

If you try the following findings you can actually achieve a similar effect, but you should notice that at this point we do not insert anything in the DIV element, once the content is inserted, we will find that we do not have the desired effect, so this method is not desirable.

B use the JavaScript timer plus the Window.location.reload () function to keep the page refreshed. The code looks like this:

<! DOCTYPE html>

There is no doubt that this method will also cause the page to constantly refresh, add some words or pictures in the div can be seen.

C. Implement using JavaScript and Dom methods.


<! DOCTYPE html>


That is, we create only one P in the Div, put the clock in P, dynamic refresh p, and this is you can add text or pictures, found that there is no impact. Is that it? If you try to insert a video in the Div, you will find that the video will be constantly refreshed at the time you set, so the picture and text cannot be seen because we cannot distinguish it from the naked eye, so this method is not advisable.

Note: Inserting a video can be as follows:

<embed align= "center" src= "advertising balloon. mp4" type= "Audio/mpeg" width= "1002" autostart= "  false" controls= "Controls" height= "></embed>"

Of course, this is only one of the methods, there are other methods in HTML5, you can learn.

Part III:<iframe> label

The <iframe> tag specifies an inline framework that can be used to embed another document in the current HTML document.

such as <iframe scr= "" ><iframe>. There is no need to put content in the content part of the IFRAME element, that is, between <iframe> and </iframe>. But we can put in some suggestive content, so that some browsers that do not support <iframe> tags can display the content.

There are some attributes in the IFRAME tag, which are commonly used as height widths, which can specify the width of the inline frame. The Name property can specify the names of the <iframe>. The SRC attribute is used to specify the URL of the document that is displayed in <iframe>. The scrolling property has a Yes No auto three property value, which specifies whether scroll bars are displayed in <iframe>.

Part IV: The final good example of the effect

From the third part, if we can use the IFRAME tag to introduce an external document, we can solve all the problems, because each time the refresh, will only refresh the content inside the IFRAME. The code is as follows:

<! DOCTYPE html>

Ok! Solve the problem successfully! As follows:

At this point, the following clock will work and the video above will play normally.

The kiwi of the World, the Roses strange, the very view, often lies in the danger far, but the person's rare to Yan, therefore does not have the ambition to also.

How do I make clocks with 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: 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.