时钟

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>时钟</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
body,div{
padding: 0;
margin:0;
}
#clock{
margin: 0 auto;
 300px;
height:80px;
border-radius: 50px;
border: 1px solid green;
text-align: center;
line-height: 80px;
font-weight: bold;
}
span{
margin: 20px;
}
</style>
</head>
<body>
<div id="clock">
<span></span>时
<span></span>分
<span></span>秒
</div>
<script type="text/javascript">
window.onload=function()
{
var qClock=document.getElementById("clock");
var qSpan=document.getElementsByTagName("span");
getTimes();
function getTimes()
{
var qDate=new Date();
var qDate=[qDate.getHours(),qDate.getMinutes(),qDate.getSeconds()];
for(var i in qDate)
qSpan[i].innerHTML=format(qDate[i])

}
function format(a)
{
return a.toString().replace(/^(\d)$/, "0$1")
}
setInterval(getTimes,1000);
}

</script>
</body>
</html>