如何用iframe标签以及Javascript制作时钟？
如何利用iframe标签以及Javascript制作时钟？
如何制作一个时钟呢？效果如下图所示：
这里的时钟会不停的走，但是下面的页面是不会变得，这样就实现了我们想要的效果了。下面我将分为以下几个方面来讲：
- javascript中的Date引用类型
- 几种效果不佳的实例
- <iframe>标签
- 最终效果不错的实例、
- 使用react
如果大家想直接看最终不错的效果实例，可以直接点击这里。
第一部分：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 (中国标准时间)
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！成功解决问题！效果图如下：
此时，下面的时钟可以正常运行，上面的视频也可以正常播放。
第五部分：使用React
使用reactl.js来实现也是非常简单的，代码如下所示：
htmL
<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>
js
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>现在是{new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
这种方法是最好的。因为react的虚拟dom的特点，每次只会修改被修改的dom部分。
世之奇伟、瑰怪、非常之观，常在于险远，而人之所罕至焉，故非有志者不能至也。
如何用iframe标签以及Javascript制作时钟？的更多相关文章
- JavaScript制作时钟特效
需求说明:制作显示年.月.日.星期几并且显示上午(AM)和下午(PM)的 12进制的时钟,具体效果如下所示: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C// ...
- 原生javascript制作时钟
用JavaScript来制作实时的时钟 效果图如下: 接下来,我会一步一步向大家介绍如何制作,并将里面的一些值得注意的事项提出来. 首先是把框架搭构起来, <div> <canvas ...
- 使用HTML5中的Canves标签制作时钟特效
<!DOCTYPE html > <html> <head> </head> <body> <canvas id="cloc ...
- 使用iframe标签结合springMvc做文件上传
1.iframe.jsp <body> <h1>测试iframe文件上传</h1> <!-- 1.要求表单的target属性名称与iframe的name名字一 ...
- 如何用PC标签在列表页中调出文章内容 phpcms
如何用PC标签在列表页中调出文章内容 phpcms v9 moreinfo=”"参数说明 {pc:content action="lists" catid="$ ...
- HTML的iframe标签妙用 - 在线执行前端代码的网站原理是什么？
在我自己的日常前端开发中,其实iframe标签出现的次数并不是很多.作为一个很古老(浏览器兼容性非常好)的标签,有必要去了解一下它的典型应用场景. (图片说明:所有浏览器都支持iframe,无论什么版 ...
- cnblogs 支持 iframe 标签 ！
bilibili 视频嵌入支持 网易云音乐支持 关注窝(求求你 ฅฅ) 这是我制作的第一个鬼畜(好傻的,视频直接录制的,进度条都录制上了,不过没关系的,反正以后也不做了(* /ω＼*)) 说明 原来是 ...
- iframe标签
转载文章:Web前端之iframe详解 iframe基本内涵 通常我们使用iframe直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_ifram ...
- 第二百七十二节，Tornado框架-iframe标签框架伪造ajax
Tornado框架-iframe标签框架伪造ajax html <!DOCTYPE html> <html> <head lang="en"> ...
随机推荐
- （十）装饰器模式详解（与IO不解的情缘）
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. LZ到目前已经写了九个设计模 ...
- Sentinel-Redis高可用方案（一）：主从复制
引言 大概是因为Redis是个人开发的产品,所以Redis的高可用方案是被分成了几块来实现:主从复制.主从切换以及虚拟IP或客户端方案. 从Redis 2.8开始加入对Sentinel机制从而实现了服 ...
- Excel导入导出（篇二）
<body> <h3>一.Excel导入</h3> <h5>.模板下载:<a href="UpFiles/TemplateFiles/学 ...
- xshell4|5远程连接工具
志同道合,方能谈天说地! 对比其他的工具,对于功能来说xshell是比较厉害的.有能力的可以支持正版! Xshell4 链接: http://pan.baidu.com/s/1jHAgboa 密码: ...
- Android-动画简介
Android中动画分为3种: ween Animation:通过对场景里的对象不断做图像变换(平移.缩放.旋转)产生动画效果,即是一种渐变动画: 也称View动画:也叫渐变动画,针对View的动画, ...
- 标准Web系统的架构分层
标准Web系统的架构分层 – 转载请注明出处 1.架构体系分层图 在上图中我们描述了Web系统架构中的组成部分.并且给出了每一层常用的技术组件/服务实现.需要注意以下几点: 系统架构是灵活的,根据需求 ...
- easyui-datagrid 的loader属性用法
API介绍比较简略: 定义如何从远程服务器加载数据.返回false可以放弃本次请求动作.该函数接受以下参数:param:参数对象传递给远程服务器.success(data):当检索数据成功的时候会调用 ...
- 【转】JSP中文乱码问题终极解决方案
原文地址:http://blog.csdn.net/beijiguangyong/article/details/7414247 在介绍方法之前我们首先应该清楚具体的问题有哪些,笔者在本博客当中论述的 ...
- 网络流 POJ2112
题意:K个产奶机,C头奶牛,每个产奶机最多可供M头奶牛使用:并告诉了产奶机.奶牛之间的两两距离Dij(0<=i,j<K+C). 问题:如何安排使得在任何一头奶牛都有自己产奶机的条件下,奶牛 ...
- 【收藏】Android AutoLayout全新的适配方式， 堪称适配终结者
来源:http://blog.csdn.net/lmj623565791/article/details/49990941 更多:Android屏幕适配全攻略(最权威的Google官方适配指导) 一. ...