这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文对如何利用 iframe 标签以及 js 制作时钟进行了全面解析,分步说明,条理清晰,感兴趣的朋友可以看下
如何制作一个时钟呢?效果如下图所示:
这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了。下面我将分为以下几个方面来讲:
如果大家想直接看最终不错的效果实例,可以看文章结尾处代码。
第一部分: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, 这里传入了六个参数,分别是 年 月 日 时 分 秒 ,同样是可以省略不写。这里值得注意的是:
但是这里有一个 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 文档中嵌入另外一个文档。
如 http://www.zhuzhenwei.com"><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!成功解决问题!效果图如下:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0715/329752.html