解析如何利用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 相关文章推荐
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
You might like
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
JavaScript中this详解
2015/09/01 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
分析python切片原理和方法
2017/12/19 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
我的五年职业生涯规划
2014/01/23 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
Django框架中视图的用法
2022/06/10 Python