如何在网页中动态显示当前日期和时间(js调用)
很多网站都会在顶部显示实时的日期,时间,而且时间可以根据自己电脑的时间自动的更新。就像网站上装了一个时钟一样,当用户进入我们做的网站时就会看到今天是哪一年,哪一月,哪一日,星期几,时,分,秒,并且它是自动变化的。
如果是在网站上显示固定的日期,可以使用wordpress调用日期的三种代码。
如何在自己做网站时能够制作出像上面效果的实时更新的时间效果呢?通过以下的JS特效代码调用就可以实现了。
制作网站时间特效的步骤
- 用DW软件新建一个HTML网页,并将以下的HTML代码粘贴到网页中,并保存为time.html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时间</title>
<style>
#time{
font-size: 12px;
font-weight: normal;
color: #999;
padding:-2 0 0;
margin:0px;
}
</style>
</head>
<body>
<div id="time"></div>
<script type="text/javascript" language="javascript">// <![CDATA[
window.onload=function (){
setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
}
// ]]></script>
</body>
</html> - 再新建一个js文件,粘贴以下的js代码,保存为time.js (作用是将以上的html文件转换为js文件,要修改代码中的网站的网址为自己的域名)
document.writeln("<iframe src="http://网站的网址/time.html" height="100" width="200" scrolling="no" frameborder="0" ></iframe>");
- 将上面二步制作好的time.html和time.js上传到自己网站空间的根目录下,然后通过以下的js代码去调用实时时间,放在你想显示日期,时间的任意网站位置。
今天是:<script type="text/javascript" src="http://网站的网址/time.js"></script>