解析如何利用iframe标签以及js制作时钟

如何制作一个时钟呢？效果如下图所示：

这里的时钟会不停的走，但是下面的页面是不会变得，这样就实现了我们想要的效果了。下面我将分为以下几个方面来讲：

javascript中的Date引用类型
几种效果不佳的实例
<iframe>标签
最终效果不错的实例

如果大家想直接看最终不错的效果实例，可以看文章结尾处代码。
第一部分：Date引用类型
1.日期对象可以直接使用new操作符和Date构造函数构造。代码如下：
var date=new Date（）;
2. 通过构造函数直接得到的date对象的时间是当前的时间。由于Date类型使用自UTC（Coordinated Universal Time,国际协调时间）1970年1月1日午夜至改日期经过的毫秒数。所以如果直接输出，按道理来说会出现一个很大的数字。但是因为Date引用类型是继承了Object引用类型的，同时也就继承了Object的toString（）方法。故直接输出时，它会默认使用toString（）方法。

var date=new Date;console.log（date）;// Mon Oct 31 2016 23:29:07 GMT+0800 （中国标准时间）<br>console.log（date.toString（））;//Mon Oct 31 2016 23:29:07 GMT+0800 （中国标准时间）

3.如果我们使用valueOf（）方法（同样也是继承自Object（）引用类型），就可以得到历经的毫秒数了。

var date=new Date（）;console.log（date.valueOf（））;//14779277479161477927747916毫秒算下来刚好是46年多。

4.同时，Date还有一个toLocaleString（）方法，该方法会将毫秒表示的时间转化为当地的字符串表示的时间，如下所示：

var date=new Date（）;console.log（date.toLocaleString（））;//2016/10/31 下午11:29:07

5.但是如果我们不想使用当前时间而希望使用自定义的时间呢？ Date类型为我们提供了两种方法，分别具有不同的初始化方式。

var time=new Date（Date.parse（"October 31,2016"））;console.log（time）;//Mon Oct 31 2016 00:00:00 GMT+0800 （中国标准时间）var Time=new Date（"October 31,2016"）;console.log（Time）;//Mon Oct 31 2016 00:00:00 GMT+0800 （中国标准时间）var dateTime=new Date（Date.UTC（2016,9,31,23,26,50））;console.log（dateTime）;//这是一个bug Tue Nov 01 2016 07:26:50 GMT+0800 （中国标准时间）var Timedate=new Date（2016,9,31,23,26,50）;console.log（Timedate）;//Mon Oct 31 2016 23:26:50 GMT+0800 （中国标准时间）

即这两个方法分别是在构造函数时初始化，一个是Date.parse（）,如果输入的格式正确，我们甚至省略之。另外一个是Date.UTC,这里传入了六个参数，分别是年月日时分秒，同样是可以省略不写。这里值得注意的是：

“月”是从0开始计算的，即2月但是要输入1,10月要输入9......
“时”必须使用24小时的方法来计算。

但是这里有一个bug，即当我们使用var dateTime=new Date（Date.UTC（2016,9,31,23,26,50））;传入的数字是9，应该得到10月份，却得到了11月份，这时我们可以采用其他方法来替换之。
第二部分：几种效果不佳的实例
ok！已经知道了如何创建时间对象，这时候，我们就可以使用它来做时钟了。但是，以下几种方法创建时钟是不合适的。
A. 使用javascript定时器外加meta标签中的自动刷新功能。
代码如下图所示：

<！DOCTYPE html><html lang="en"><head> <meta http-equiv="refresh" content="2"> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="time"></div> <script>var date=new Date（）;var time=document.getElementById（"time"）; setInterval（function（）{ time.innerHTML=date.toLocaleString（）;},1）; </script></body></html>

如果你尝试以下发现确实可以达到类似的效果，但是你应该注意到这时我们在div元素中没有插入任何内容，一旦插入内容，就会发现得不到我们想要的效果了，因此这种方式不可取。
B 使用javascript定时器外加window.location.reload（）函数，使页面不断刷新。代码如下所示：

<！DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="time"></div> <script>var date=new Date（）;var time=document.getElementById（"time"）;function reload（）{ window.location.reload（）;}setInterval（function（）{ reload（）;},1000）; setInterval（function（）{ time.innerHTML=date.toLocaleString（）;},1000）; </script></body></html>

毫无疑问，这种方法也会导致页面不断刷新，在div中加入一些文字或者图片就可以看出来。
C.使用javascript以及dom方法实现。

<！DOCTYPE html><html lang="en"><head><meta http-equiv="refresh" content="2"><meta charset="UTF-8"><title>Document</title></head><body><div id="time"><img src="时钟.jpg"/>我是桌面上的时钟，哈哈</div><div id="bottom"></div><script> var date=Date.now（）; var time=document.getElementById（"time"）; var para=document.createElement（"p"）; time.appendChild（para）; setInterval（function（）{ para.innerHTML=date.toLocaleString（）; },1000）;</script></body></html>

即我们在div中只创建一个p，把时钟放到p中去，动态的刷新p，并且这是你可以添加文字或者图片，发现都不会有影响。这就大功告成了吗？如果你尝试这在div中插入一个视频，就会发现，视频会在你规定的时间不断刷新，播放不了，因此图片和文字看不出来，是因为我们肉眼没法分辨，因此，这种方法也不可取。
注：插入视频可以如下：

<embed align="center" src="告白气球.mp4" type="audio/mpeg" width="1002" autostart="false" controls="controls" height="500" ></embed>

当然，这只是其中一种方法，html5中还有其他方法，大家可以学习。
第三部分：<iframe>标签
<iframe>标签规定了一个内联框架，它可以用来在当前html文档中嵌入另外一个文档。
如<iframe scr="http://www.zhuzhenwei.com"><iframe>。在iframe元素的内容部分，即<iframe>与</iframe>之间是不需要放内容的。但是我们可以放一些提示性的内容，这样对于一些不支持<iframe>标签的浏览器就可以显示其中的内容了。
在iframe标签中有一些属性，比较常用的就是height width ，这两个属性可以规定这个内联框架的高度和宽度。name属性可以规定<iframe>的名称。src属性用于规定在<iframe>中显示的文档的url。scrolling属性有yes no auto 三种属性值，它规定是否在<iframe>中显示滚动条。
第四部分：最终效果不错的实例
从第三部分可知，如果我们能使用iframe标签引入一个外部的文档，就可以解决所有的问题了，因为每当刷新时，只会刷新在iframe里面的内容。代码如下：

<！DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><iframe src="test.html" width="200" height="30" seamless="seamless" scrolling="no" ></iframe><p>我是页面上的时钟，哈哈</a></body></html>

以下是test.html中的代码

<！DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="time"></div> <script>var date=new Date（）;var time=document.getElementById（"time"）;function reload（）{ window.location.reload（）;}setInterval（function（）{ reload（）;},1000）; setInterval（function（）{ time.innerHTML=date.toLocaleString（）;},1000）; </script></body></html>

OK！成功解决问题！效果图如下：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！