站长资源网络编程 解析如何利用iframe标签以及js制作时钟 整理:jimmy2026/8/2浏览2次 站长资源 网络编程 网盘链接 云盘下载 简介如何制作一个时钟呢？效果如下图所示：这里的时钟会不停的走，但是下面的页面是不会变得，这样就实现了我们想要的效果了。下面我将分为以下几个方面来讲：javascript中的Date引用类型几种效果不佳的实例标签最终效果不错的实例如果大家想直接看最终不错的效果实例，可以看文章结尾处代码。</div> <div class="news_infos"><div id="MyContent"><p>如何制作一个时钟呢？效果如下图所示：</p> <p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2016120815233441.jpg');"><img src="/UploadFiles/2021-04-02/2016120815233441.jpg" alt="解析如何利用iframe标签以及js制作时钟" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p> <p>这里的时钟会不停的走，但是下面的页面是不会变得，这样就实现了我们想要的效果了。下面我将分为以下几个方面来讲：</p> <ul> <li>javascript中的Date引用类型</li> <li>几种效果不佳的实例</li> <li><iframe>标签</li> <li>最终效果不错的实例</li> </ul> <p>如果大家想直接看最终不错的效果实例，可以看文章结尾处代码。</p> <p><strong>第一部分：Date引用类型</strong></p> <p>1.日期对象可以直接使用new操作符和Date构造函数构造。代码如下：</p> <p><code>var date=new Date();</code></p> <p>2. 通过构造函数直接得到的date对象的时间是当前的时间。由于Date类型使用自UTC（Coordinated Universal Time,国际协调时间）1970年1月1日午夜至改日期经过的毫秒数。所以如果直接输出，按道理来说会出现一个很大的数字。但是因为Date引用类型是继承了Object引用类型的，同时也就继承了Object的toString（）方法。故直接输出时，它会默认使用toString（）方法。</p> <div class="htmlcode"> <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（）方法（同样也是继承自Object（）引用类型），就可以得到历经的毫秒数了。</p> <div class="htmlcode"> <pre class="brush:js;"> var date=new Date(); console.log(date.valueOf());//1477927747916 1477927747916毫秒算下来刚好是46年多。 </pre> </div> <p>4.同时，Date还有一个toLocaleString（）方法，该方法会将毫秒表示的时间转化为当地的字符串表示的时间，如下所示：</p> <div class="htmlcode"> <pre class="brush:js;"> var date=new Date(); console.log(date.toLocaleString());//2016/10/31 下午11:29:07 </pre> </div> <p>5.但是如果我们不想使用当前时间而希望使用自定义的时间呢？ Date类型为我们提供了两种方法，分别具有不同的初始化方式。</p> <div class="htmlcode"> <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,9,31,23,26,50); console.log(Timedate);//Mon Oct 31 2016 23:26:50 GMT+0800 (中国标准时间)</pre> </div> <p>即这两个方法分别是在构造函数时初始化，一个是Date.parse(),如果输入的格式正确，我们甚至省略之。另外一个是Date.UTC,这里传入了六个参数，分别是 年 月 日 时 分 秒 ，同样是可以省略不写。这里值得注意的是：</p> <ul> <li>“月”是从0开始计算的，即2月但是要输入1,10月要输入9......</li> <li>“时”必须使用24小时的方法来计算。</li> </ul> <p>但是这里有一个bug，即当我们使用var dateTime=new Date(Date.UTC(2016,9,31,23,26,50));传入的数字是9，应该得到10月份，却得到了11月份，这时我们可以采用其他方法来替换之。</p> <p><strong>第二部分：几种效果不佳的实例</strong></p> <p>ok！已经知道了如何创建时间对象，这时候，我们就可以使用它来做时钟了。但是，以下几种方法创建时钟是不合适的。</p> <p>A. 使用javascript定时器外加meta标签中的自动刷新功能。</p> <p>代码如下图所示：</p> <div class="htmlcode"> <pre class="brush:js;"> <!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></pre> </div> <p>如果你尝试以下发现确实可以达到类似的效果，但是你应该注意到这时我们在div元素中没有插入任何内容，一旦插入内容，就会发现得不到我们想要的效果了，因此这种方式不可取。</p> <p>B 使用javascript定时器外加window.location.reload()函数，使页面不断刷新。代码如下所示：</p> <div class="htmlcode"> <pre class="brush:js;"> <!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></pre> </div> <p>毫无疑问，这种方法也会导致页面不断刷新，在div中加入一些文字或者图片就可以看出来。</p> <p>C.使用javascript以及dom方法实现。</p> <div class="htmlcode"> <pre class="brush:js;"> <!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="/UploadFiles/2021-04-02/时钟.jpg"> <p>即我们在div中只创建一个p，把时钟放到p中去，动态的刷新p，并且这是你可以添加文字或者图片，发现都不会有影响。这就大功告成了吗？如果你尝试这在div中插入一个视频，就会发现，视频会在你规定的时间不断刷新，播放不了，因此图片和文字看不出来，是因为我们肉眼没法分辨，因此，这种方法也不可取。</p> <p>注：插入视频可以如下：</p> <div class="htmlcode"> <pre class="brush:xhtml;"> <embed align="center" src="/UploadFiles/2021-04-02/告白气球.mp4"> <p>当然，这只是其中一种方法，html5中还有其他方法，大家可以学习。</p> <p><strong>第三部分：<iframe>标签</strong></p> <p><iframe>标签规定了一个内联框架，它可以用来在当前html文档中嵌入另外一个文档。</p> <p>如<iframe scr="http://www.zhuzhenwei.com"><iframe>。在iframe元素的内容部分，即<iframe>与</iframe>之间是不需要放内容的。但是我们可以放一些提示性的内容，这样对于一些不支持<iframe>标签的浏览器就可以显示其中的内容了。</p> <p>在iframe标签中有一些属性，比较常用的就是height width ，这两个属性可以规定这个内联框架的高度和宽度。name属性可以规定<iframe>的名称。src属性用于规定在<iframe>中显示的文档的url。scrolling属性有yes no auto 三种属性值，它规定是否在<iframe>中显示滚动条。</p> <p><strong>第四部分：最终效果不错的实例</strong></p> <p>从第三部分可知，如果我们能使用iframe标签引入一个外部的文档，就可以解决所有的问题了，因为每当刷新时，只会刷新在iframe里面的内容。代码如下：</p> <div class="htmlcode"> <pre class="brush:xhtml;"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <iframe src="/UploadFiles/2021-04-02/test.html"> <p>以下是test.html中的代码</p> <div class="htmlcode"> <pre class="brush:js;"> <!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></pre> </div> <p>OK！成功解决问题！效果图如下：</p> <p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2016120815233442.jpg');"><img src="/UploadFiles/2021-04-02/2016120815233442.jpg" alt="解析如何利用iframe标签以及js制作时钟" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p> <p>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！</p></div> </div> </div> <div class="share"> </div> <div class="nextinfo"> <p>上一篇：<a href="/3g/1/103331.html" title="AngularJS模仿Form表单提交的实现代码">AngularJS模仿Form表单提交的实现代码</a></p> <p>下一篇：<a href="/3g/1/103333.html" title="详解微信小程序 页面跳转 传递参数">详解微信小程序 页面跳转 传递参数</a></p> </div> <div class="otherlink"> <h2>最新资源</h2> <ul> <li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li> <li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li> <li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li> <li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li> <li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li> <li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li> <li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li> <li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li> </ul> </div> </div> <div class="sidebar"> <div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/3G/1/604690.html"><ul>Windows上运行安卓你用过了吗<br><br>在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。</ul></a></div> </div> <div class="sidebar"> 友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a> </div> </article> <footer> <p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p> </footer> <script src="/images3g/nav.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(function() { var elm = jQuery('#left_flow2'); var startPos = jQuery(elm).offset().top; jQuery.event.add(window, "scroll", function() { var p = jQuery(window).scrollTop(); jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : ''); jQuery(elm).css('top', ((p) > startPos) ? '0' : ''); }); }); </script> </body> </html>