Parsing how to make use of IFRAME tags and js to create clock _javascript skills

How do you make a clock? The effect is shown in the following illustration:

The clock is going to go on and on, but the page below is not going to be, and that's what we want to achieve. Below I will be divided into the following aspects:

• Date reference type in JavaScript
• Several examples of poor results
• <iframe> Label
• The end result is good example

If you want to look directly at the final example of a good effect, you can see the end of the article code.

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 that is obtained directly from the constructor is the current time. Because the date type uses the number of milliseconds that elapsed from UTC (Coordinated Universal time, international coordination times) from midnight January 1, 1970 to the date of the change. So if the output is direct, there is a very large number of reasons. However, because the date reference type inherits the object reference type, it inherits the object's ToString () method. Therefore, when direct output, it will use the ToString () method by default.

var date=new date;
Console.log (date)//Mon Oct 2016 23:29:07 gmt+0800 (China Standard Time) <br>console.log (date.tostring ());//mon Oct 31 2016 2 3:29:07 gmt+0800 (China Standard Time)

3. If we use the valueof () method (which also inherits from the object () reference type), we can get the number of milliseconds elapsed.

var date=new date ();
Console.log (date.valueof ())//1477927747916
1477927747916 milliseconds to count down just 46 years.

4. Also, date has a tolocalestring () method that converts the time in milliseconds to the time represented by the local string, 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 provides us with two methods, each with a different initialization method.

var time=new Date (Date.parse ("October 31,2016"));
Console.log (time);//mon Oct 2016 00:00:00 gmt+0800 (China standard times)
var time=new Date ("October 31,2016");
Console.log (time);//mon Oct 2016 00:00:00 gmt+0800 (China standard times)
var datetime=new Date (DATE.UTC) );
Console.log (dateTime);//This is a bug Tue Nov 2016 07:26:50 gmt+0800 (China Standard Time)
var timedate=new Date ( 2016,9,31,23,26,50);
Console.log (timedate);//mon Oct to 2016 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 is in the correct format, we may even omit it. Another is DATE.UTC, here passed six parameters, is the month and a minute, the same can be omitted not to write. Here's what's worth noting:

• "Month" is calculated starting from 0, that is, February but to enter 1, October to enter 9 ...
• "Time" 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 number passed in is 9, it should be October, but it's November, and then we can replace it with other methods.

Part II: Several examples of poor results

Ok! Already know how to create a Time object, at which point we can use it to do the clock. However, it is not appropriate to create clocks in the following ways.

A. Use the JavaScript timer plus the automatic refresh feature in meta tags.

The code is shown in the following illustration:

<! DOCTYPE html>
 
 

If you try the following findings you can actually achieve a similar effect, but you should notice that we are not inserting anything in the DIV element, and once we have inserted the content, we will find that we are not getting what we want, so it is undesirable.

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, in the div to add some text or pictures can be seen.

C. Use JavaScript and Dom method implementations.

<! DOCTYPE html>
 
 

That is, we only create a p in the Div, put the clock in P, dynamic refresh p, and this is you can add text or pictures, find no impact. Is that all you got? If you try to insert a video into a div, you'll find that the video will refresh at the time you set, and it won't play, so the picture and text won't be visible because we can't tell the naked eye, so this method is not desirable.

Note: The video can be inserted as follows:

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

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

Part III:<iframe> label

<iframe> tags specify an inline frame that can be used to embed another document in the current HTML document.

such as <iframe scr= "http://www.zhuzhenwei.com" ><iframe>. There is no need to put content between the content part of the IFRAME element, that is, <iframe> and </iframe>. But we can put in some suggestive content so that we can display it for some browsers that don't support <iframe> tags.

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

Part IV: A good example of the end result

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

<! DOCTYPE html>
 
 

The following is the code in test.html

<! DOCTYPE html>
 
 

Ok! Solve the problem successfully! The effect chart is as follows:

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!