日期:2014-05-16  浏览次数:20479 次

纯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.ge