[原创代码] JS LED 时钟, 绘制梯形,绘制 LED Clock [By Yu2n]

yu2n

JS LED 时钟
很无聊的作品吧，使用纯JS + raphael.js 绘制图形，支持IE6，支持各主流浏览器。
独一无二，No HTML5，No JQuery。

在线预览：http://yu2n.sinaapp.com/file/test/led_clock/led_clock.html
源码下载1：

核心代码：

/* 
如图，在梯形ABCD中，AD//BC，∠A=∠D=45°，BC=300，A(100,100)，∠AD水平面=20°，求ABCD位置
 A_____________________F         ++++A++++
B/                     \         +F     B+
 \_____________________/E        ++++G++++
 C                     D         +E     C+
                                 ++++D++++
*/
// 返回 LED 数据，参数n为时间数字，x,y为坐标，size为尺寸，angle为旋转角度
var LED = function(n,x,y,size,angle){
  x = x + (size/2);
  var ladder_shaped = function(x,y,size,angle){
    var Ax = x+size, Ay = y;
    var AB=EF=size, BC=DE=2*size, AF=CD=6*size;
    var Bx = Ax + Math.cos(Raphael.rad(135+angle)) * (AB);
    var By = Ay + Math.sin(Raphael.rad(135+angle)) * (AB);
    var Cx = Bx + Math.cos(Raphael.rad(45+angle)) * (BC);
    var Cy = By + Math.sin(Raphael.rad(45+angle)) * (BC);
    var Dx = Cx + Math.cos(Raphael.rad(angle)) * (CD);
    var Dy = Cy + Math.sin(Raphael.rad(angle)) * (CD);
    var Ex = Dx + Math.cos(Raphael.rad(-45+angle)) * (DE);
    var Ey = Dy + Math.sin(Raphael.rad(-45+angle)) * (DE);    
    var Fx = Ex + Math.cos(Raphael.rad(-135+angle)) * (EF);
    var Fy = Ey + Math.sin(Raphael.rad(-135+angle)) * (EF);  
    return ["M", Ax, Ay, "L", Bx, By, "L", Cx, Cy, "L", Dx, Dy, "L", Ex, Ey, "L", Fx, Fy, "z"];
  }
  var LED_A = ladder_shaped(x, y, size, 0+angle);
  var LED_B = ladder_shaped(x+9*size, y+1.5*size, size, 90+angle);
  var LED_C = ladder_shaped(x+9*size, y+10.5*size, size, 90+angle);
  var LED_D = ladder_shaped(x+7.5*size, y+19.5*size, size, 180+angle);
  var LED_E = ladder_shaped(x-1.5*size, y+18*size, size, 270+angle);
  var LED_F = ladder_shaped(x-1.5*size, y+9*size, size, 270+angle);
  var LED_G = ladder_shaped(x+7.5*size, y+10.5*size, size, 180+angle);
  var LED_1 = LED_B.join() + LED_C.join();
  var LED_2 = LED_A.join() + LED_B.join() + LED_G.join() + LED_E.join() + LED_D.join();
  var LED_3 = LED_A.join() + LED_B.join() + LED_G.join() + LED_C.join() + LED_D.join();
  var LED_4 = LED_F.join() + LED_G.join() + LED_B.join() + LED_C.join();
  var LED_5 = LED_A.join() + LED_F.join() + LED_G.join() + LED_C.join() + LED_D.join();
  var LED_6 = LED_A.join() + LED_F.join() + LED_E.join() + LED_D.join() + LED_C.join() + LED_G.join();
  var LED_7 = LED_A.join() + LED_B.join() + LED_C.join();
  var LED_8 = LED_A.join() + LED_B.join() + LED_C.join() + LED_D.join() + LED_E.join() + LED_F.join() + LED_G.join();
  var LED_9 = LED_G.join() + LED_F.join() + LED_A.join() + LED_B.join() + LED_C.join() + LED_D.join();
  var LED_0 = LED_A.join() + LED_B.join() + LED_C.join() + LED_D.join() + LED_E.join() + LED_F.join();
  var LED_Dot1 = (['M', x+3*size, y+17*size, 'L', x+5.5*size, y+17*size, 'L', x+5.5*size, y+19.5*size, 'L', x+3*size, y+19.5*size, 'z']).join(',');
  var LED_Dot2 = (['M', x+3*size, y+5.75*size, 'L', x+5.5*size, y+5.75*size, 'L', x+5.5*size, y+8.25*size, 'L', x+3*size, y+8.25*size, 'z',
                   'M', x+3*size, y+10.75*size, 'L', x+5.5*size, y+10.75*size, 'L', x+5.5*size, y+13.25*size, 'L', x+3*size, y+13.25*size, 'z']).join(',');
  return eval('LED_'+n);
}

//返回LED时钟
function LED_Clock(){
  this.hh1_last = this.hh2_last = this.mm1_last = this.mm2_last = this.ss1_last
  = this.ss2_last = this.SSS1_last = this.SSS2_last = this.SSS3_last='8';   //重置LED时钟时、分、秒为8
  var paperW = 800, paperH = 600;   //画板大小
  this.init = false;                //初始化画板、时分秒画板
  this.paper_hh1 = Raphael(0, 0, paperW+2, paperH+2);
  this.paper_hh2 = Raphael(0, 0, paperW+2, paperH+2);
  this.paper_dot_hm = Raphael(0, 0, paperW+2, paperH+2);
  this.paper_mm1 = Raphael(0, 0, paperW+2, paperH+2);
  this.paper_mm2 = Raphael(0, 0, paperW+2, paperH+2);
  this.paper_dot_ms = Raphael(0, 0, paperW+2, paperH+2);
  this.paper_ss1 = Raphael(0, 0, paperW+2, paperH+2);
  this.paper_ss2 = Raphael(0, 0, paperW+2, paperH+2);
  this.paper_dot_sS = Raphael(0, 0, paperW+2, paperH+2);
  this.paper_SSS1 = Raphael(0, 0, paperW+2, paperH+2);
  this.paper_SSS2 = Raphael(0, 0, paperW+2, paperH+2);
  this.paper_SSS3 = Raphael(0, 0, paperW+2, paperH+2);
  
  var angle=0;          //偏移角度
  var x=10, y=300;      //坐标
  var size=5;           //大小
  var color="#369";     //颜色
  var attr = {fill: "60-#123-#369", stroke: "none", opacity: .5};     //设置颜色、透明度
  
  this.display = function() {
    var h1 = (new Date()).getHours();     //获取当前时、分、秒、毫秒数据
    var m1 = (new Date()).getMinutes();
    var s1 = (new Date()).getSeconds();
    var S1 = (new Date()).getMilliseconds();
    var hh1_now=('0'+h1).substr(('0'+ h1).length-2,1);
    var hh2_now=('0'+h1).substr(('0'+ h1).length-1,1);
    var mm1_now=('0'+m1).substr(('0'+ m1).length-2,1);
    var mm2_now=('0'+m1).substr(('0'+ m1).length-1,1);
    var ss1_now=('0'+s1).substr(('0'+ s1).length-2,1);
    var ss2_now=('0'+s1).substr(('0'+ s1).length-1,1);
    var SSS1_now=('00'+ S1).substr(('00'+ S1).length-3,1);
    var SSS2_now=('00'+ S1).substr(('00'+ S1).length-2,1);
    var SSS3_now=('00'+ S1).substr(('00'+ S1).length-1,1);
    var x2 = x;                           //坐标
    //时钟数据，第一位、第二位
    if ((hh1_now != this.hh1_last) || (this.init == false)) {
      this.hh1_last = hh1_now;
      this.paper_hh1.clear();
      this.paper_hh1.path(LED(hh1_now, x2, y, size,angle)).attr(attr);
    }
    x2 += 1*12*size
    if ((hh2_now != this.hh2_last) || (this.init == false)) {
      this.hh2_last = hh2_now;
      this.paper_hh2.clear();
      this.paper_hh2.path(LED(hh2_now, x2, y, size,angle)).attr(attr);
    }
    //时钟与分钟间隔符
    x2 += 0.8*12*size;
    if (S1 % 1000 > 500) {
      this.paper_dot_hm.clear();
    } else {
      this.paper_dot_hm.clear();
      this.paper_dot_hm.path(LED('Dot2', x2, y, size,angle)).attr(attr);
    } 
    //分钟数据，第一位、第二位
    x2 += 0.7*12*size;
    if ((mm1_now != this.mm1_last) || (this.init == false)) {
      this.mm1_last = mm1_now;
      this.paper_mm1.clear();
      this.paper_mm1.path(LED(mm1_now, x2, y, size,angle)).attr(attr);
    }
    x2 += 1*12*size;
    if ((mm2_now != this.mm2_last) || (this.init == false)) {
      this.mm2_last = mm2_now;
      this.paper_mm2.clear();
      this.paper_mm2.path(LED(mm2_now, x2, y, size,angle)).attr(attr);
    }
    //分钟与秒钟间隔符
    x2 += 0.8*12*size;
    if (S1 % 1000 > 500) {
      this.paper_dot_ms.clear();
    } else {
      this.paper_dot_ms.clear();
      this.paper_dot_ms.path(LED('Dot2', x2, y, size,angle)).attr(attr);
    }
    //秒钟数据，第一位、第二位
    x2 += 0.7*12*size;
    if ((ss1_now != this.ss1_last) || (this.init == false)) {
      this.ss1_last = ss1_now;
      this.paper_ss1.clear();
      this.paper_ss1.path(LED(ss1_now, x2, y, size,angle)).attr(attr);
    }
    x2 += 1*12*size;
    if ((ss2_now != this.ss2_last) || (this.init == false)) {
      this.ss2_last = ss2_now;
      this.paper_ss2.clear();
      this.paper_ss2.path(LED(ss2_now, x2, y, size,angle)).attr(attr);
    }
    //秒钟与毫秒间隔符
    x2 += 0.8*12*size;
    if (this.init == false) {
      this.paper_dot_sS.path(LED('Dot1', x2, y, size,angle)).attr(attr);
    }
    //毫秒数据，第一位、第二位、第三位
    x2 += 0.7*12*size;
    if ((SSS1_now != this.SSS1_last) || (this.init == false)) {
      this.SSS1_last = SSS1_now;
      this.paper_SSS1.clear();
      this.paper_SSS1.path(LED(SSS1_now, x2, y, size,angle)).attr(attr);
    }
    x2 += 1*12*size;
    if ((SSS2_now != this.SSS2_last) || (this.init == false)) {
      this.SSS2_last = SSS2_now;
      this.paper_SSS2.clear();
      this.paper_SSS2.path(LED(SSS2_now, x2, y, size,angle)).attr(attr);
    }
    x2 += 1*12*size;
    if ((SSS3_now != this.SSS3_last) || (this.init == false)) {
      this.SSS3_last = SSS3_now;
      this.paper_SSS3.clear();
      this.paper_SSS3.path(LED(SSS3_now, x2, y, size,angle)).attr(attr);
    }
    this.init = true;
  };
}

window.onload=function(){

  //建立画板 800x600;
  var paperW = 800, paperH = 600;
  var paper = Raphael(0, 0, paperW+2, paperH+2);
  var rect = paper.rect(0, 0, paperW, paperH);
  
  //格子-横线,坐标文字
  for (var x=0;x<=paperW;x++)
  {
    if (x%10==0) {
      paper.path(['M'+x,'0','L'+x,paperH].join(',')).attr({fill: "#CCC",opacity: .3});
      if (x%100==0) {
        paper.path(['M'+x,'0','L'+x,paperH].join(',')).attr({fill: "#000",opacity: .7});
        paper.text(x+12, 0+6, x).attr({font: "12px Helvetica", opacity: 0.5, fill: "#000"});
      }
    }
  }
  
  //格子-竖线,坐标文字
  for (var y=0;y<=paperH;y++)
  {
    if (y%10==0) {
      paper.path(['M0',y,'L'+paperW,y].join(',')).attr({fill: "#CCC",opacity: .3});
      if (y%100==0) {
        paper.path(['M0',y,'L'+paperW,y].join(',')).attr({fill: "#000",opacity: .7});
        paper.text(0+12, y+6, y).attr({font: "12px Helvetica", opacity: 0.5, fill: "#000"});
      }
    }
  }
  
  //绘制一个梯形
  var rTop = paper.path('M100,100L500,100L400,200L200,200z').attr({fill: "90-#CCC-#EEE", stroke: "none", opacity: .3});
  
  //梯形坐标文字，署名
  var txt = [], attr = {font: "12px Helvetica", opacity: 0.7};
  txt[0] = paper.text(100, 100, "(100,100)").attr(attr).attr({fill: "#000"});
  txt[1] = paper.text(500, 100, "(500,100)").attr(attr).attr({fill: "#000"});
  txt[2] = paper.text(400, 200, "(400,200)").attr(attr).attr({fill: "#000"});
  txt[3] = paper.text(200, 200, "(200,200)").attr(attr).attr({fill: "#000"});
  txt[4] = paper.text(720, 560, "LED Clock ... By Yu2n").attr(attr).attr({fill: "#000"});
  txt[5] = paper.text(750, 580, "2015.02.04").attr(attr).attr({fill: "#000"});

  //显示LED数字 0-9
  var attr = {fill: "60-#123-#369", stroke: "none", opacity: 0.3};
  for (var i=0;i<=9;i++) {
    var angle=0;
    var x=y=20;
    var size=5;
    var color="#369";
    paper.path(LED(i,(i+1)*(x+7*size),y,size,angle)).attr(attr);
  }
  
  //初始化 LED 时钟显示
  var led_clock = new LED_Clock();
  led_clock.display();
  setInterval(function(){ led_clock.display(); },50)
}
复制代码

CrLf

怎么感觉是 html5 的 svg…

yu2n

回复 2# CrLf

IE6 即可运行……当然不是 HTML5 了。