如何用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教程