js实现在网页上简单显示时间的方法

  本文实例讲述了js实现在网页上简单显示时间的方法。分享给大家供大家参考。具体如下:

  这是一款网页时钟JS代码,纯javascript实现,显示时、分、秒。网页时间显示、网页时钟有很多,这个真的挺简易的,美工好的朋友可在此基础上进一步美化完善

  

复制代码 代码如下:
<!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>

  <style>

  body,div{margin:0;padding:0;}

  body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}

  #clock{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}

  span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}

  </style>

  <script>

  window.onload = function ()

  {

  var oClock = document.getElementById("clock");

  var aSpan = oClock.getElementsByTagName("span");

  setInterval(getTimes, 1000);

  getTimes();

  function getTimes ()

  {

  var oDate = new Date();

  var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()];

  for (var i in aDate) aSpan[i].innerHTML = format(aDate[i])

  }

  function format(a)

  {

  return a.toString().replace(/^(\d)$/, "0$1")

  }

  }

  </script>

  </head>

  <body>

  <div id="clock">

  <span></span>点<span></span>分<span></span>秒

  </div>

  </body>

  </html>

  希望本文所述对大家的javascript程序设计有所帮助。