分析如何使用iframe标签和js制作时钟

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

这里的时钟会一直运行，但后面的页面不会改变，从而达到预期的效果。下面我将分为以下几个方面：

javascript中的日期引用类型效果不佳的几个例子如果你想直接看到效果好的例子，可以看看文章末尾的代码。

第一部分：日期参考类型

1.可以使用新的运算符和日期构造函数直接构造Date对象。代码如下：

var Date=new Date()；

2.构造函数直接获取的date对象的时间就是当前时间。由于日期类型使用从1970年1月1日午夜到以世界协调时(协调世界时)表示的日期变化的毫秒数。所以如果是直接输出，原则上会出现非常大的数字。但是因为日期引用类型继承了对象引用类型，所以它也继承了对象的toString()方法。因此，直接输出时，默认会使用toString()方法。

变化日期=新日期；console.log(日期)；//monoct 31 2016 23:29336007 GMT 0800(中国标准时间)br console . log(date . tostring())；//monoct 31 2016 23:29336007 GMT 0800(中国标准时间)3。如果我们使用valueOf()方法(也是从Object()的引用类型继承而来的)，我们可以得到经过的毫秒数。

var Date=new Date()；console . log(date . value of())；//14779277479161477927747916毫秒刚好超过46年。4.同时，Date还有一个toLocaleString()方法，它将毫秒表示的时间转换为本地字符串表示的时间，如下所示：

var Date=new Date()；console . log(date . ToLocalString())；//2016年10月31日，11:29:07 5。但是如果我们不想使用当前时间而想使用自定义时间呢？Date类型为我们提供了两种方法，它们有不同的初始化方法。

var time=新日期(Date . parse(' 2016年10月31日'))；console.log(时间)；//monoct 31 201600:00336000 GMT 0800(中国标准时间)var time=new date(' 2016年10月31日')；控制台日志(时间)；//monoct 31 201600:00336000 GMT 0800(中国标准时间)var datetime=new date(date . utc(2016，9，31，23，26，50))；console . log(dateTime)；//这是bug tue 11月01日2016 07:26336050 gmt0800(中国标准时间)var time date=new date(2016年9月31日，23日，26日，50日)；控制台日志(时间日期)；//monoct 31 2016 23:26336050 GMT 0800(中国标准时间)，即使用构造函数时初始化这两个方法，一个是Date.parse()。如果输入格式正确，我们甚至省略它。另一个是日期。UTC，其中传入了六个参数，即年、月、日、时、分、秒，也可以省略不写。这里值得注意的是：

“月”是从0开始计算的，即2月，但要输入1，而10月要输入9.“小时”，必须按24小时计算。但是这里有一个bug，就是当我们使用vardatetime=new date(date . utc(2016，9，31，23，26，50))；来电号码是9。我们应该得到十月，但我们得到十一月。然后我们可以用其他方法来代替它。

第二部分：结果不佳的几个例子

好的。既然我们知道如何创建时间对象，我们就可以把它用作时钟。但是，以下方法不适合settimer。

A.在元标签中使用javascript定时器加自动刷新功能。

代码如下图所示：

！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元素中插入任何内容。一旦我们插入内容，就会发现无法得到想要的效果，所以这种方法是不可取的。

使用JavaScript timer plus window . location . reload()函数不断刷新页面。代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title/head dy div id=' time '/div script var Date=new Date()；var time=document . getelementbyid(' time ')；函数reload(){ window . location . reload()；} setInterval(函数(){ reload()；},1000);setInterval(function(){ time . innerhtml=date . tolocalestring()；},1000);/script/body/html毫无疑问，这种方法也会导致不断的页面刷新，这可以通过在div中添加一些文字或图片来看到。

C.使用javascript和dom方法。

！DOCTYPE html html lang=' en ' hearteta http-equiv=' refresh ' content=' 2 ' meta charset=' UTF-8 ' title document/title/headsdydiv id=' time ' img src=' http : clock . jpg '/我是桌面上的时钟，哈哈/div div id=' bottom '/div script var date=date . now()；var time=document . getelementbyid(' time ')；var para=document . create element(' p ')；time.appendChild(第段)；setInterval(function(){ para . innerhtml=date . tolocalestring()；},1000);/script/body/html意味着我们只在div中创建一个p，把时钟放在p中，动态刷新p，这意味着你可以添加文字或图片，不会影响发现。你说完了吗？如果你尝试在div中插入一个视频，你会发现视频会在你指定的时间不断刷新，无法播放，所以看不到图片和文字，因为我们肉眼无法分辨，所以这种方法是不可取的。

注：插入视频如下：

embed align=' center ' src=' http :告白气球. MP4 ' type=' audio/mpeg ' width=' 1002 ' auto start=' false ' controls=' controls ' height=' 500 '/embed当然，这只是方法之一，html5中还有其他方法可以学习

第三部分：iframe标签

iframe标记指定了一个内联框架，可用于在当前html文档中嵌入另一个文档。

例如iframe SCR=' http://www . zhuchenwei.com ' iframe。没有必要在iframe和/iframe之间放置内容。但是我们可以放一些提示性的内容，这样一些不支持iframe标签的浏览器就可以显示内容了。

iframe标签中有一些属性，常用的是height width，可以指定内嵌框架的高度和宽度。name属性可以指定iframe的名称。src属性用于指定iframe中显示的文档的url。滚动属性有三个属性值：是否自动，指定是否在iframe中显示滚动条。

第四部分：最终效果良好的示例

从第三部分我们可以知道，如果我们可以使用iframe标签导入一个外部文档，我们就可以解决所有的问题，因为每当我们刷新时，只有iframe中的内容会被刷新。代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title/headsdyframe src=' http : test . html ' width=' 200 ' height=' 30 '无缝='无缝'滚动=' no'/iframep我是页面上的时钟，哈哈/a/body/html以下是test.html的代码

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title/head dy div id=' time '/div script var Date=new Date()；var time=document . getelementbyid(' time ')；函数reload(){ window . location . reload()；} setInterval(函数(){ reload()；},1000);setInterval(function(){ time . innerhtml=date . tolocalestring()；},1000);/script/body/htmlOK！成功解决了问题！效果图如下：

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！