javascript学习（二）时间效果实现

来源：互联网发布：linux mount 远程挂载编辑：程序博客网时间：2024/05/17 22:13

两种通过javascript实现在页面上动态显示时间的方法：

<span style="font-size:18px;color:#cc33cc;"><span style="font-size:18px;color:#cc33cc;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>当前系统时间</title><script language="javascript" type="text/javascript"><!--window.onload = function(){showTime();}function checkTime(i){if (i<10)   {i="0" + i}  return i}function showTime(){var now=new Date();var year=now.getFullYear();var month=now.getMonth()+1;var day=now.getDate();var h=now.getHours();var m=now.getMinutes();var s=now.getSeconds();m=checkTime(m)s=checkTime(s)var weekday=new Array(7)weekday[0]="星期日"weekday[1]="星期一"weekday[2]="星期二"weekday[3]="星期三"weekday[4]="星期四"weekday[5]="星期五"weekday[6]="星期六"document.getElementById("show").innerHTML=""+year+"年"+month+"月"+day+"日 "+weekday[now.getDay()]+h+":"+m+":"+s;t=setTimeout('showTime()',1000)}//--></script></head><body>  <div id="show">显示时间的位置</div></body></html></span></span>

结果：

另外还有一种较为少的代码可以解决同样问题：

<span style="font-size:18px;color:#cc33cc;"><span style="font-size:18px;color:#cc33cc;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body>    <div id="time" align="center">系统时间：<script>document.getElementById('time').innerHTML = new Date().toLocaleString()+ ' 星期' + '日一二三四五六'.charAt(new Date().getDay());setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script>    </div></body></html></span></span>

结果：

第二种方法代码量减少了很多。

0 0

javascript学习（二） 时间效果实现

javascript学习（二）时间效果实现