JS LED 时钟, 绘制梯形,绘制 LED Clock [By Yu2n](页 1) - VBS求助&讨论 - JS / JScript / JavaScript - 批处理之家 BAT,CMD,批处理,PowerShell,VBS,DOS

yu2n 发表于 2015-3-5 11:29

JS LED 时钟, 绘制梯形,绘制 LED Clock [By Yu2n]

[i=s] 本帖最后由 yu2n 于 2015-4-22 23:53 编辑 [/i]

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

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

核心代码：[code]/*
如图，在梯形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)
}
[/code]

CrLf 发表于 2015-3-5 12:10

怎么感觉是 html5 的 svg…

yu2n 发表于 2015-3-5 13:05

[b]回复 [url=http://bbs.bathome.net/redirect.php?goto=findpost&pid=163511&ptid=34552]2#[/url] [i]CrLf[/i] [/b]

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

页: [1]

批处理之家's Archiver

JS LED 时钟, 绘制梯形,绘制 LED Clock [By Yu2n]