解析如何利用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 获取标签名(tagName)示例代码
Jul 11 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
javascript实现电商放大镜效果
Nov 23 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
PHP 生成N个不重复的随机数
2015/01/21 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python实现泊松图像融合
2018/07/26 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
UNIX文件类型
2013/08/29 面试题
2014三八妇女节活动总结
2014/03/01 职场文书
经管应届生求职信范文
2014/05/18 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
公司聚餐通知
2015/04/22 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers