<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="refresh" content="2"> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div><img src="https://www.jb51.net/时钟.jpg"/>我是桌面上的时钟，哈哈</div> <div> </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 src="https://www.jb51.net/告白气球.mp4" type="audio/mpeg" autostart="false" controls="controls" ></embed>
当然，这只是其中一种方法，html5中还有其他方法，大家可以学习。
第三部分：<iframe>标签
<iframe>标签规定了一个内联框架，它可以用来在当前html文档中嵌入另外一个文档。
如<iframe scr=""><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="https://www.jb51.net/test.html" 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></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！成功解决问题！效果图如下：
