编程 Javascript

解析如何利用iframe标签以及js制作时钟

Posted in Javascript onDecember 08, 2016

如何制作一个时钟呢？效果如下图所示：

这里的时钟会不停的走，但是下面的页面是不会变得，这样就实现了我们想要的效果了。下面我将分为以下几个方面来讲：

javascript中的Date引用类型
几种效果不佳的实例
<iframe>标签
最终效果不错的实例

如果大家想直接看最终不错的效果实例，可以看文章结尾处代码。

第一部分：Date引用类型

1.日期对象可以直接使用new操作符和Date构造函数构造。代码如下：

var date=new Date();

2. 通过构造函数直接得到的date对象的时间是当前的时间。由于Date类型使用自UTC（Coordinated Universal Time,国际协调时间）1970年1月1日午夜至改日期经过的毫秒数。所以如果直接输出，按道理来说会出现一个很大的数字。但是因为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（）引用类型），就可以得到历经的毫秒数了。

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

4.同时，Date还有一个toLocaleString（）方法，该方法会将毫秒表示的时间转化为当地的字符串表示的时间，如下所示：

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,这里传入了六个参数，分别是年月日时分秒，同样是可以省略不写。这里值得注意的是：

“月”是从0开始计算的，即2月但是要输入1,10月要输入9......
“时”必须使用24小时的方法来计算。

但是这里有一个bug，即当我们使用var dateTime=new Date(Date.UTC(2016,9,31,23,26,50));传入的数字是9，应该得到10月份，却得到了11月份，这时我们可以采用其他方法来替换之。

第二部分：几种效果不佳的实例

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 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！成功解决问题！效果图如下：

解析如何利用iframe标签以及js制作时钟

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

解析如何利用iframe标签以及js制作时钟

- Author -

918之初

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery倒数计时按钮setTimeout的实例代码

Jul 04 Javascript

jQuery中parents()方法用法实例

Jan 07 Javascript

JS实现单行文字不间断向上滚动的方法

Jan 29 Javascript

javascript实现3D变换的立体圆圈实例

Aug 06 Javascript

AngularJS 执行流程详细介绍

Aug 18 Javascript

Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

Nov 22 Javascript

vue 添加vux的代码讲解

Nov 30 Javascript

浅谈Webpack打包优化技巧

Jun 12 Javascript

Angular2中监听数据更新的方法

Aug 31 Javascript

vue项目打包部署_nginx代理访问方法详解

Sep 20 Javascript

vue-music 使用better-scroll遇到轮播图不能自动轮播问题

Dec 03 Javascript

jQuery实现全选、反选和不选功能的方法详解

Dec 04 jQuery

详解微信小程序页面跳转传递参数

Dec 08 #Javascript

浅谈javascript中执行环境（作用域）与作用域链

Dec 08 #Javascript

原生js编写焦点图效果

Dec 08 #Javascript

JavaScript中${pageContext.request.contextPath}取值问题及解决方案

Dec 08 #Javascript

微信小程序开发之录音机音频播放动画实例 (真机可用)

Dec 08 #Javascript

Vue自定义指令介绍(2)

Dec 08 #Javascript

JS实现页面进入和返回定位到具体位置

Dec 08 #Javascript