利用iframe与JavaScript实现独立走动的时钟组件

作者：木棉时间：2026-10-31 04:20:36浏览：196

本文介绍如何使用JavaScript Date对象与iframe标签制作一个独立走动的时钟。通过对比Meta刷新、页面重载及DOM动态更新等存在缺陷的方案，指出它们会导致页面内容（如视频）重复加载的问题。最终推荐采用iframe嵌入外部HTML文档的方式，实现时钟局部更新而主页面保持静止的效果。

引言与效果预览

制作时钟的效果图如下所示：

引言与效果预览

该时钟持续运行且页面其他部分保持静止，从而实现预期效果。下文将从以下几个维度展开说明：

JavaScript中的Date引用类型
几种效果不佳的实例
<iframe>标签
最终效果不错的实例

若需直接查看最终效果实例，可参考文章结尾处的代码。

JavaScript Date对象基础

第一部分：Date引用类型

1.日期对象可直接通过new操作符和Date构造函数进行构造。代码如下：

var date=new Date();

2. 通过构造函数直接获取的date对象时间即为当前时间。由于Date类型基于自UTC（协调世界时）1970年1月1日午夜至该日期经过的毫秒数计算，直接输出理论上应显示一个极大数值。但因Date引用类型继承了Object引用类型的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>标签

如<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标签引入一个外部的文档，便可解决所有问题，因为每次刷新时，仅刷新在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！成功解决问题！效果图如下：

引言与效果预览

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！

作者最新文章

JS合并多个数组的三种方法：concat、spread与flat

2026-11-05 17:39:45

JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString

2026-11-05 17:09:21

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36