js简单的时间跳动教程_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

js简单的时间跳动教程

来源：未知作者：类型：图文教程点击次数：发布时间：2015-06-13 11:02:51

JS实现的时间跳动，可以先运行下面的代码查看效果：

<!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>时间跳动 - 我爱模板网www.5imoban.net</title> <style> #timediv{font-family:Arial, Helvetica, sans-serif; font-size:25px; font-weight:bold;} #timediv span.s{font-size:14px;} </style> </head> <body> <div id="timediv"></div> <script> function showTime(){ var d = new Date(); var h = d.getHours(); var i = d.getMinutes(); var s = d.getSeconds(); h = checktime(h); i = checktime(i); s = checktime(s); var timeStr = h+" : "+i+"  <span class='s'>"+s+"</span>"; var timeBox = document.getElementById("timediv"); timeBox.innerHTML = timeStr; } function checktime(mytime){ if(mytime < 10){ return "0"+mytime; }else{ return mytime; } } setInterval("showTime()",100); </script> </body> </html>
提示：您可以先修改部分代码再运行

原理很简单，就是用js内置的日期时间对象：Date()，获取当前时间，然后用innerHTML将获取的时间写进一个容器里面，由于使用了定时器，每隔1秒写一次，这样，就实现了时间走动的效果。由于获取的时间个位数的时候，不会自动在前面补零，所以使用了判断，当时间小于10(即个位数)，在前面补上0。