首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 08, 2016

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

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

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

  • 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>标签规定了一个内联框架，它可以用来在当前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！成功解决问题！效果图如下：

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

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

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

- Author -

918之初

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

Javascript 相关文章推荐
javascript编程起步（第五课）
Feb 27 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
详解微信小程序 页面跳转 传递参数
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
win7(2) 华为(1) RustDesk(1) 蓝牙耳机(1) 虚拟键盘(1) HarmonyOS(1) Debian(1) 蓝牙(1) 鸿蒙3.0(1) 鸿蒙(2)
You might like
把PHP安装为Apache DSO
2006/10/09 PHP
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python tempfile模块学习笔记（临时文件）
2014/05/25 Python
详解Python中find()方法的使用
2015/05/18 Python
python监控文件或目录变化
2016/06/07 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python socket实现简单聊天室
2018/04/01 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
python redis存入字典序列化存储教程
2020/07/16 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
HTML5 source标签：媒介元素定义媒介资源
2018/01/29 HTML / CSS
酷瑞网络科技面试题
2012/03/30 面试题
入党转预备思想汇报
2014/01/07 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
铅球加油稿100字
2014/09/26 职场文书
小学家长通知书评语
2014/12/31 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
Node.js实现断点续传
2021/06/23 Javascript
实现GO语言对数组切片去重
2022/04/20 Golang