解析如何利用iframe標簽以及js制作時鐘

更新時間：2016年12月08日 15:27:56 作者：918之初

本文對如何利用iframe標簽以及js制作時鐘進行了全面解析，分步說明，條理清晰，感興趣的朋友可以看下

如何制作一個時鐘呢？效果如下圖所示：

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

javascript中的Date引用類型
幾種效果不佳的實例
<iframe>標簽
最終效果不錯的實例

如果大家想直接看最終不錯的效果實例，可以看文章結尾處代碼。

第一部分：Date引用類型

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

var date=new Date();

2. 通過構造函數(shù)直接得到的date對象的時間是當前的時間。由于Date類型使用自UTC（Coordinated Universal Time,國際協(xié)調時間）1970年1月1日午夜至改日期經過的毫秒數(shù)。所以如果直接輸出，按道理來說會出現(xiàn)一個很大的數(shù)字。但是因為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（）引用類型），就可以得到歷經的毫秒數(shù)了。

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

4.同時，Date還有一個toLocaleString（）方法，該方法會將毫秒表示的時間轉化為當?shù)氐淖址硎镜臅r間，如下所示：

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 (中國標準時間)

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

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

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

第二部分：幾種效果不佳的實例

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

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>

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

B 使用javascript定時器外加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>

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

C.使用javascript以及dom方法實現(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="時鐘.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中只創(chuàng)建一個p，把時鐘放到p中去，動態(tài)的刷新p，并且這是你可以添加文字或者圖片，發(fā)現(xiàn)都不會有影響。這就大功告成了嗎？如果你嘗試這在div中插入一個視頻，就會發(fā)現(xiàn)，視頻會在你規(guī)定的時間不斷刷新，播放不了，因此圖片和文字看不出來，是因為我們肉眼沒法分辨，因此，這種方法也不可取。

注：插入視頻可以如下：

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

當然，這只是其中一種方法，html5中還有其他方法，大家可以學習。

第三部分：<iframe>標簽

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

在iframe標簽中有一些屬性，比較常用的就是height width ，這兩個屬性可以規(guī)定這個內聯(lián)框架的高度和寬度。name屬性可以規(guī)定<iframe>的名稱。src屬性用于規(guī)定在<iframe>中顯示的文檔的url。scrolling屬性有yes no auto 三種屬性值，它規(guī)定是否在<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！成功解決問題！效果圖如下：

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

JavaScript函數(shù)防抖動debounce
這篇文章主要介紹了JavaScript函數(shù)防抖動debounce，防抖動作用防止在短時間內過于頻繁的執(zhí)行相同的任務，更多相關內容需要的小伙伴可以參考一下
2022-06-06
一個炫酷的Bootstrap導航菜單
這篇文章主要為大家詳細介紹了一個炫酷的Bootstrap導航菜單的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
js實現(xiàn)的美女瀑布流效果代碼
美女瀑布流效果分享一下，大家勿噴啊借用新浪的美女嘿嘿睜大你的眼睛
2012-11-11
原生js模擬購物車功能
這篇文章主要為大家詳細介紹了原生js模擬購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
交叉觀察器?IntersectionObserver用法詳解
這篇文章主要為大家介紹了交叉觀察器?IntersectionObserver用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
ECharts鼠標事件的處理方法詳解
最近一直在使用echarts,當然也被其中的各種屬性整的有些頭大,這篇文章主要給大家介紹了關于ECharts鼠標事件處理的相關資料,需要的朋友可以參考下
2021-06-06
JS實現(xiàn)星星評分功能實例代碼(兩種方法)
這篇文章主要介紹了JS實現(xiàn)星星評分功能實例代碼(兩種方法)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
自制簡易打賞功能的實例
下面小編就為大家?guī)硪黄灾坪喴状蛸p功能的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
js刪除對象中的某一個字段的方法實現(xiàn)
這篇文章主要介紹了js刪除對象中的某一個字段的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
JavaScript中的變量作用域介紹
這篇文章主要介紹了JavaScript中的變量作用域介紹,本文同時講解了一個新概念變量的作用域鏈,需要的朋友可以參考下
2014-12-12