解析如何利用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的图片大小自动适应实现代码
Nov 17 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 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中的时间显示
2007/01/18 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
PHP微信红包API接口
2015/12/05 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
python实现学生管理系统
2018/01/11 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
英语专业个人求职自荐信
2013/09/21 职场文书
质检员岗位职责
2013/12/17 职场文书
汉语言文学职业规划
2014/02/14 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
负责培养人意见
2015/06/05 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js