|
<!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> |
注册 登录
