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

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

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

javascript中的Date引用类型
几种效果不佳的实例
<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a></li> <li>最终<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>不错的实例</li> </ul> <p>如果大家想直接看最终不错的<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>实例，可以看<a href="https://www.jb51.cc/tag/wenzhang/" target="_blank" class="keywords">文章</a>结尾处<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>。</p> <p><h3>第一部分：Date引用类型</h3></p> <p>1.日期对象可以直接使用new操作符和Date构造<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>构造。<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>如下：</p> <p><code>var date=new Date();</code></p> <p>2. 通过构造<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>直接得到的date对象的时间是当前的时间。由于Date类型使用自UTC（Coordinated Universal Time,国际协调时间）1970年1月1日午夜至改日期经过的毫秒数。所以如果直接<a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a>，按道理来说会出现一个很大的数字。但是因为Date引用类型是继承了Object引用类型的，同时也就继承了Object的toString（）<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>。故直接<a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a>时，它会默认使用toString（）<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>。</p> <div class="jb51code"> <pre class="brush:js;"> 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 (中国标准时间)</pre> </div> <p>3.如果我们使用valueOf（）<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>（同样也是继承自Object（）引用类型），就可以得到历经的毫秒数了。</p> <div class="jb51code"> <pre class="brush:js;"> var date=new Date(); console.log(date.valueOf());//1477927747916 1477927747916毫秒算下来刚好是46年多。 </pre> </div> <p>4.同时，Date还有一个toLocaleString（）<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>，该<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>会将毫秒表示的时间转化为当地的字符串表示的时间，如下所示：</p> <div class="jb51code"> <pre class="brush:js;"> var date=new Date(); console.log(date.toLocaleString());//2016/10/31 下午11:29:07　 </pre> </div> <p>5.但是如果我们不想使用当前时间而希望使用<a href="https://www.jb51.cc/tag/zidingyi/" target="_blank" class="keywords">自定义</a>的时间呢？ Date类型为我们提供了两种<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>，分别具有不同的初始化方式。</p> <div class="jb51code"> <pre class="brush:js;"> 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,50); console.log(Timedate);//Mon Oct 31 2016 23:26:50 GMT+0800 (中国标准时间)</pre> </div> <p>即这两个<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>分别是在构造<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>时初始化，一个是Date.parse(),如果输入的格式正确，我们甚至省略之。另外一个是Date.UTC,这里传入了六个参数，分别是年月日时分秒，同样是可以省略不写。这里值得注意的是：</p> <ul> <li>“月”是从0开始计算的，即2月但是要输入1,10月要输入9......</li> <li>“时”必须使用24小时的<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>来计算。</li> </ul> <p>但是这里有一个bug，即当我们使用var dateTime=new Date(Date.UTC(2016,50));传入的数字是9，应该得到10月份，却得到了11月份，这时我们可以采用其他<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>来替换之。</p> <p><h3>第二部分：几种<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>不佳的实例</h3></p> <p>ok！已经知道了如何创建时间对象，这时候，我们就可以使用它来做时钟了。但是，以下几种<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>创建时钟是不合适的。</p> <p>A. 使用javascript定时器外加<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a><a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>中的<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>刷新<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>。</p> <p><a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>如下图所示：</p> <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html> <html lang="en"> <head> <<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="refresh" content="2"> <<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> charset="UTF-8"> <title>Document</title> </head> <body> <div id="time"></div> <script> var date=new Date(); var time=document.getElementById("time"); <p>setInterval(function(){<br /> time.innerHTML=date.toLocaleString();<br /> },1);</p> </script> </body> </html></pre> </div> <p>如果你尝试以下发现确实可以达到类似的<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>，但是你应该注意到这时我们在div元素中没有插入任何<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，一旦插入<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，就会发现得不到我们想要的<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>了，因此这种方式不可取。</p> <p>B 使用javascript定时器外加window.location.reload()<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>，使<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>不断刷新。<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>如下所示：</p> <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html> <html lang="en"> <head> <<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> 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); <p>setInterval(function(){<br /> time.innerHTML=date.toLocaleString();<br /> },1000);</p> </script> </body> </html></pre> </div> <p>毫无疑问，这种<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>也会导致<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>不断刷新，在div中加入一些<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>或者<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>就可以看出来。</p> <p>C.使用javascript以及dom<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>实现。</p> <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html> <html lang="en"> <head> <<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="refresh" content="2"> <<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> 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></pre> </div> <p>即我们在div中只创建一个p，把时钟放到p中去，动态的刷新p，并且这是你可以<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a><a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>或者<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>，发现都不会有影响。这就大功告成了吗？如果你尝试这在div中插入一个视频，就会发现，视频会在你规定的时间不断刷新，播放不了，因此<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>和<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>看不出来，是因为我们肉眼没法分辨，因此，这种<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>也不可取。</p> <p>注：插入视频可以如下：</p> <div class="jb51code"> <pre class="brush:xhtml;"> <embed align="center" src="告白气球.mp4" type="audio/mpeg" width="1002" autostart="false" controls="controls" height="500" ></embed></pre> </div> <p>当然，这只是其中一种<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>，html5中还有其他<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>，大家可以学习。</p> <p><h3>第三部分：<iframe><a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a></h3></p> <p><iframe><a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>规定了一个内联框架，它可以用来在当前html文档中嵌入另外一个文档。</p> <p>如<iframe scr="<a href="http://www.zhuzhenwei.com%22%3e%3ciframe/">http://www.zhuzhenwei.com"><iframe</a>>。在iframe元素的内容部分，即<iframe>与之间是不需要放内容的。但是我们可以放一些提示性的内容，这样对于一些不支持标签的浏览器就可以显示其中的内容了。</p> <p>在iframe标签中有一些属性，比较常用的就是height width ，这两个属性可以规定这个内联框架的高度和宽度。name属性可以规定<iframe>的名称。src属性用于规定在<iframe>中显示的文档的url。scrolling属性有yes no auto 三种属性值，它规定是否在<iframe>中显示滚动条。</p> <p><h3>第四部分：最终效果不错的实例</h3></p> <p>从第三部分可知，如果我们能使用iframe标签引入一个外部的文档，就可以解决所有的问题了，因为每当刷新时，只会刷新在iframe里面的内容。代码如下：</p> <div class="jb51code"> <pre class="brush:xhtml;"> <!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标签以及js制作时钟

猜你在找的JavaScript相关文章