纯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" /> <script type="text/javascript"> var MTime = window.MTime || {} MTime.Tools = { g : function(id){ return "string" == typeof id ? document.getElementById(id) : id; }, c : function(tagName){ return document.createElement(tagName); }, b : function(){ return document.body } } MTime.Vtime = (function(){ var vLine = function(x, y, z, color){ return "<div style='top:"+y+"px;left:"+x+"px;background-color:"+color+";width:1px;height:"+z+"px;position:absolute;font-size:0'></div>"; }; var hLine = function(x, y, z, color){ return "<div style='top:"+y+"px;left:"+x+"px;background-color:"+color+";width:"+z+"px;height:1px;position:absolute;font-size:0'></div>"; }; var getNum = function(i,z,c){ var time = ""; switch(i){ case 1 : { time = vLine(z, 0, z, c)+vLine(z, z, z, c); }break; case 2 : { time = hLine(0, 0, z, c)+vLine(z, 0, z, c)+hLine(0, z, z, c) +vLine(0, z, z, c)+hLine(0, z*2, z, c); }break; case 3 : { time = hLine(0, 0, z, c)+vLine(z, 0, z, c)+hLine(0, z, z, c) +vLine(z, z, z, c)+hLine(0, z*2, z, c); }break; case 4 : { time = vLine(0, 0, z, c)+vLine(z, 0, z, c)+hLine(0, z, z, c) +vLine(z, z, z, c); }break; case 5 : { time = hLine(0, 0, z, c)+vLine(0, 0, z, c)+hLine(0, z, z, c) +vLine(z, z, z, c)+hLine(0, z*2, z, c); }break; case 6 : { time = hLine(0, 0, z, c)+vLine(0, 0, z, c)+hLine(0, z, z, c) +vLine(z, z, z, c)+hLine(0, z*2, z, c)+vLine(0, z, z, c); }break; case 7 : { time = hLine(0, 0, z, c)+vLine(z, z, z, c)+vLine(z, 0, z, c); }break; case 8 : { time = vLine(0, 0, z, c)+vLine(0, z, z, c)+vLine(z,0, z, c) +vLine(z, z, z, c)+hLine(0, 0, z, c)+hLine(0,z*2, z, c) +hLine(0, z, z, c); }break; case 9 : { time = vLine(0, 0, z, c)+vLine(z, 0, z, c) +vLine(z, z, z, c)+hLine(0, 0, z, c)+hLine(0, z*2, z, c) +hLine(0, z, z, c); }break; default :{ time = vLine(0, 0, z, c)+vLine(0, z, z, c)+vLine(z, 0, z, c) +vLine(z, z, z, c)+hLine(0, 0, z, c)+hLine(0, z*2, z, c); } } return time; }; return function(i, z, c){ var wrap = MTime.Tools.c("div"); this.num = getNum(i, z, c); with(wrap.style){ width = z+"px"; height = 2*z+"px"; position = "relative"; document.all ? styleFloat = "left" : cssFloat = "left"; margin = z/2+"px"; } wrap.innerHTML = this.num; this.getWrap = function(){ return wrap; } } })() window.onload = function(){ var lineLen = 6; var lineColor = "red"; window.setInterval(function(){ MTime.Tools.b().innerHTML = ""; var date = new Date(); var dateStr = date.getFullYear()+"-" +((date.getMonth()+1) < 10 ? "0"+(date.getMonth()+1) : (date.getMonth()+1))+"-" +(date.getDate() < 10 ? "0"+date.getDate() : date.getDate()) +" " +(date.getHours() < 10 ? "0"+date.getHours() : date.getHours())+":" +(date.getMinutes() < 10 ? "0"+date.getMinutes() : date.getMinutes())+":" +(date.getSeconds() < 10 ? "0"+date.getSeconds() : date.getSeconds())+" " +(date.getMilliseconds() < 10 ? "00"+date.getMilliseconds():date.getMilliseconds()); for(var i = 0; i < dateStr.length; i++){ if(/\d/.test(dateStr.charAt(i))){ var vtime = new MTime.Vtime(parseInt(dateStr.charAt(i)), lineLen, lineColor); MTime.Tools.b().appendChild(vtime.getWrap()); } else{ var hl = MTime.Tools.c("div"); with(hl.style){ width = "12px"; height = "12px"; lineHeight = "12px"; document.all ? styleFloat = "left" : cssFloat = "left"; } if(dateStr.charAt(i) == "-") hl.innerHTML = '<div style="width:12px;height:12px;margin:3px auto">-</div>'; else if(dateStr.charAt(i) == ":") hl.innerHTML = '<div style="width:12px;height:12px;margin:3px auto">:</div>'; else hl.innerHTML = '<div style="width:12px;height:12px;margin:3px auto"></div>'; MTime.Tools.b().appendChild(hl); } } },1); } </script> </head> <body> </body></html>?
效果图如下：
?
