解析如何利用iframe標(biāo)簽以及js制作時(shí)鐘

2019-11-19 18:36:17

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

如何制作一個(gè)時(shí)鐘呢？效果如下圖所示：

這里的時(shí)鐘會(huì)不停的走，但是下面的頁面是不會(huì)變得，這樣就實(shí)現(xiàn)了我們想要的效果了。下面我將分為以下幾個(gè)方面來講：

javascript中的Date引用類型
幾種效果不佳的實(shí)例
<iframe>標(biāo)簽
最終效果不錯(cuò)的實(shí)例

如果大家想直接看最終不錯(cuò)的效果實(shí)例，可以看文章結(jié)尾處代碼。

第一部分：Date引用類型

1.日期對象可以直接使用new操作符和Date構(gòu)造函數(shù)構(gòu)造。代碼如下：

var date=new Date();

2. 通過構(gòu)造函數(shù)直接得到的date對象的時(shí)間是當(dāng)前的時(shí)間。由于Date類型使用自UTC（Coordinated Universal Time,國際協(xié)調(diào)時(shí)間）1970年1月1日午夜至改日期經(jīng)過的毫秒數(shù)。所以如果直接輸出，按道理來說會(huì)出現(xiàn)一個(gè)很大的數(shù)字。但是因?yàn)镈ate引用類型是繼承了Object引用類型的，同時(shí)也就繼承了Object的toString（）方法。故直接輸出時(shí)，它會(huì)默認(rèn)使用toString（）方法。

var date=new Date;console.log(date);// Mon Oct 31 2016 23:29:07 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)<br>console.log(date.toString());//Mon Oct 31 2016 23:29:07 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)

3.如果我們使用valueOf（）方法（同樣也是繼承自O(shè)bject（）引用類型），就可以得到歷經(jīng)的毫秒數(shù)了。

var date=new Date();console.log(date.valueOf());//14779277479161477927747916毫秒算下來剛好是46年多。

4.同時(shí)，Date還有一個(gè)toLocaleString（）方法，該方法會(huì)將毫秒表示的時(shí)間轉(zhuǎn)化為當(dāng)?shù)氐淖址硎镜臅r(shí)間，如下所示：

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

5.但是如果我們不想使用當(dāng)前時(shí)間而希望使用自定義的時(shí)間呢？ Date類型為我們提供了兩種方法，分別具有不同的初始化方式。

var time=new Date(Date.parse("October 31,2016"));console.log(time);//Mon Oct 31 2016 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)var Time=new Date("October 31,2016");console.log(Time);//Mon Oct 31 2016 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)var dateTime=new Date(Date.UTC(2016,9,31,23,26,50));console.log(dateTime);//這是一個(gè)bug Tue Nov 01 2016 07:26:50 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)var Timedate=new Date(2016,9,31,23,26,50);console.log(Timedate);//Mon Oct 31 2016 23:26:50 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)

即這兩個(gè)方法分別是在構(gòu)造函數(shù)時(shí)初始化，一個(gè)是Date.parse(),如果輸入的格式正確，我們甚至省略之。另外一個(gè)是Date.UTC,這里傳入了六個(gè)參數(shù)，分別是年月日時(shí) 分秒，同樣是可以省略不寫。這里值得注意的是：

“月”是從0開始計(jì)算的，即2月但是要輸入1,10月要輸入9......
“時(shí)”必須使用24小時(shí)的方法來計(jì)算。

但是這里有一個(gè)bug，即當(dāng)我們使用var dateTime=new Date(Date.UTC(2016,9,31,23,26,50));傳入的數(shù)字是9，應(yīng)該得到10月份，卻得到了11月份，這時(shí)我們可以采用其他方法來替換之。

第二部分：幾種效果不佳的實(shí)例

ok！已經(jīng)知道了如何創(chuàng)建時(shí)間對象，這時(shí)候，我們就可以使用它來做時(shí)鐘了。但是，以下幾種方法創(chuàng)建時(shí)鐘是不合適的。

A. 使用javascript定時(shí)器外加meta標(biāo)簽中的自動(dòng)刷新功能。

代碼如下圖所示：

<!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>

如果你嘗試以下發(fā)現(xiàn)確實(shí)可以達(dá)到類似的效果，但是你應(yīng)該注意到這時(shí)我們在div元素中沒有插入任何內(nèi)容，一旦插入內(nèi)容，就會(huì)發(fā)現(xiàn)得不到我們想要的效果了，因此這種方式不可取。

B 使用javascript定時(shí)器外加window.location.reload()函數(shù)，使頁面不斷刷新。代碼如下所示：

<!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>

毫無疑問，這種方法也會(huì)導(dǎo)致頁面不斷刷新，在div中加入一些文字或者圖片就可以看出來。

C.使用javascript以及dom方法實(shí)現(xiàn)。

<!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="時(shí)鐘.jpg"/>我是桌面上的時(shí)鐘，哈哈</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中只創(chuàng)建一個(gè)p，把時(shí)鐘放到p中去，動(dòng)態(tài)的刷新p，并且這是你可以添加文字或者圖片，發(fā)現(xiàn)都不會(huì)有影響。這就大功告成了嗎？如果你嘗試這在div中插入一個(gè)視頻，就會(huì)發(fā)現(xiàn)，視頻會(huì)在你規(guī)定的時(shí)間不斷刷新，播放不了，因此圖片和文字看不出來，是因?yàn)槲覀內(nèi)庋蹧]法分辨，因此，這種方法也不可取。

注：插入視頻可以如下：

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

當(dāng)然，這只是其中一種方法，html5中還有其他方法，大家可以學(xué)習(xí)。

第三部分：<iframe>標(biāo)簽

如<iframe scr=">。在iframe元素的內(nèi)容部分，即<iframe>與</iframe>之間是不需要放內(nèi)容的。但是我們可以放一些提示性的內(nèi)容，這樣對于一些不支持<iframe>標(biāo)簽的瀏覽器就可以顯示其中的內(nèi)容了。

在iframe標(biāo)簽中有一些屬性，比較常用的就是height width ，這兩個(gè)屬性可以規(guī)定這個(gè)內(nèi)聯(lián)框架的高度和寬度。name屬性可以規(guī)定<iframe>的名稱。src屬性用于規(guī)定在<iframe>中顯示的文檔的url。scrolling屬性有yes no auto 三種屬性值，它規(guī)定是否在<iframe>中顯示滾動(dòng)條。

第四部分：最終效果不錯(cuò)的實(shí)例

從第三部分可知，如果我們能使用iframe標(biāo)簽引入一個(gè)外部的文檔，就可以解決所有的問題了，因?yàn)槊慨?dāng)刷新時(shí)，只會(huì)刷新在iframe里面的內(nèi)容。代碼如下：

<!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>我是頁面上的時(shí)鐘，哈哈</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！成功解決問題！效果圖如下：