如何用iframe標籤以及Javascript製做時鐘？

時間  2019-11-12
標籤 如何 iframe 標籤 以及 javascript 製做 時鐘 欄目 HTML 简体版
原文   原文鏈接

如何利用iframe標籤以及Javascript製做時鐘？

　　如何製做一個時鐘呢？效果以下圖所示：javascript

這裏的時鐘會不停的走，可是下面的頁面是不會變得，這樣就實現了咱們想要的效果了。下面我將分爲如下幾個方面來說：html

  1. javascript中的Date引用類型
  2. 幾種效果不佳的實例
  3. <iframe>標籤
  4. 最終效果不錯的實例、
  5. 使用react

若是你們想直接看最終不錯的效果實例，能夠直接點擊這裏。html5

第一部分：Date引用類型

　　1.日期對象能夠直接使用new操做符和Date構造函數構造。代碼以下：java

var date=new Date();

　　

    2. 經過構造函數直接獲得的date對象的時間是當前的時間。因爲Date類型使用自UTC（Coordinated Universal Time,國際協調時間）1970年1月1日午夜至改日期通過的毫秒數。因此若是直接輸出，按道理來講會出現一個很大的數字。可是由於Date引用類型是繼承了Object引用類型的，同時也就繼承了Object的toString（）方法。故直接輸出時，它會默認使用toString（）方法。react

var date=new Date;
console.log(date);//  Mon Oct 31 2016 23:29:07 GMT+0800 (中國標準時間)
console.log(date.toString());//Mon Oct 31 2016 23:29:07 GMT+0800 (中國標準時間)

　3.若是咱們使用valueOf（）方法（一樣也是繼承自Object（）引用類型），就能夠獲得歷經的毫秒數了。瀏覽器

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

　4.同時，Date還有一個toLocaleString（）方法，該方法會將毫秒錶示的時間轉化爲當地的字符串表示的時間，以下所示：app

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,這裏傳入了六個參數，分別是 年 月 日 時 分 秒 ，一樣是能夠省略不寫。這裏值得注意的是：less

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

可是這裏有一個bug，即當咱們使用var dateTime=new Date(Date.UTC(2016,9,31,23,26,50));傳入的數字是9，應該獲得10月份，卻獲得了11月份，這時咱們能夠採用其餘方法來替換之。dom

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

　　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！成功解決問題！效果圖以下：

此時，下面的時鐘能夠正常運行，上面的視頻也能夠正常播放。

 

 

第五部分：使用React

　　使用reactl.js來實現也是很是簡單的，代碼以下所示：

　　htmL

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

　　js

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>如今是{new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

　　這種方法是最好的。由於react的虛擬dom的特色，每次只會修改被修改的dom部分。

 

 

 

 世之奇偉、瑰怪、很是之觀，常在於險遠，而人之所罕至焉，故非有志者不能至也。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程