JS简易时钟
HTML
<div id="clock"> <span></span>:<span></span>:<span></span> </div>
CSS
*{ margin: 0; padding: 0; border: 0; } #clock{ width: 300px; line-height: 60px; text-align: center; background: deepskyblue; margin: 0 auto; } span{ width: 80px; line-height: 2;/*设置数字,此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数*/ background: lightblue; border: 2px solid green; padding: 0 10px; }
Javascript
window.onload=function(){ var clock = document.getElementById("clock"); var current = document.getElementsByTagName("span"); setInterval(getTimes,1000); getTimes(); function getTimes(){ var now = new Date(); var count = [now.getHours(),now.getMinutes(),now.getSeconds()]; for(var i in count){ current[i].innerHTML = format(count[i]); } function format(num){ return num.toString().replace(/^(\d)$/,"0$1"); } } }