解析如何利用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制作时钟

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

Javascript 相关文章推荐
JS实现图片预加载无需等待
Dec 21 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
Three.js学习之几何形状
Aug 01 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
jquery replace方法去空格
May 08 jQuery
使用vue-cli编写vue插件的方法
Feb 26 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
JavaScript 去重和重复次数统计
Mar 31 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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
You might like
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
Js中sort()方法的用法
2006/11/04 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
微信小程序模板template简单用法示例
2018/12/04 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
浅析python的优势和不足之处
2018/11/20 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
高三自我鉴定
2013/10/23 职场文书
应届生幼儿园求职信
2013/11/12 职场文书
食品业务员岗位职责
2014/03/18 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS