Board logo

标题: [原创代码] JS LED 时钟, 绘制梯形,绘制 LED Clock [By Yu2n] [打印本页]
作者: yu2n    时间: 2015-3-5 11:29     标题: JS LED 时钟, 绘制梯形,绘制 LED Clock [By Yu2n]

本帖最后由 yu2n 于 2015-4-22 23:53 编辑

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

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

核心代码：
  1. /* 

  2. 如图，在梯形ABCD中，AD//BC，∠A=∠D=45°，BC=300，A(100,100)，∠AD水平面=20°，求ABCD位置

  3.  A_____________________F         ++++A++++

  4. B/                     \         +F     B+

  5.  \_____________________/E        ++++G++++

  6.  C                     D         +E     C+

  7.                                  ++++D++++

  8. */

  9. // 返回 LED 数据，参数n为时间数字，x,y为坐标，size为尺寸，angle为旋转角度

  10. var LED = function(n,x,y,size,angle){

  11.   x = x + (size/2);

  12.   var ladder_shaped = function(x,y,size,angle){

  13.     var Ax = x+size, Ay = y;

  14.     var AB=EF=size, BC=DE=2*size, AF=CD=6*size;

  15.     var Bx = Ax + Math.cos(Raphael.rad(135+angle)) * (AB);

  16.     var By = Ay + Math.sin(Raphael.rad(135+angle)) * (AB);

  17.     var Cx = Bx + Math.cos(Raphael.rad(45+angle)) * (BC);

  18.     var Cy = By + Math.sin(Raphael.rad(45+angle)) * (BC);

  19.     var Dx = Cx + Math.cos(Raphael.rad(angle)) * (CD);

  20.     var Dy = Cy + Math.sin(Raphael.rad(angle)) * (CD);

  21.     var Ex = Dx + Math.cos(Raphael.rad(-45+angle)) * (DE);

  22.     var Ey = Dy + Math.sin(Raphael.rad(-45+angle)) * (DE);    

  23.     var Fx = Ex + Math.cos(Raphael.rad(-135+angle)) * (EF);

  24.     var Fy = Ey + Math.sin(Raphael.rad(-135+angle)) * (EF);  

  25.     return ["M", Ax, Ay, "L", Bx, By, "L", Cx, Cy, "L", Dx, Dy, "L", Ex, Ey, "L", Fx, Fy, "z"];

  26.   }

  27.   var LED_A = ladder_shaped(x, y, size, 0+angle);

  28.   var LED_B = ladder_shaped(x+9*size, y+1.5*size, size, 90+angle);

  29.   var LED_C = ladder_shaped(x+9*size, y+10.5*size, size, 90+angle);

  30.   var LED_D = ladder_shaped(x+7.5*size, y+19.5*size, size, 180+angle);

  31.   var LED_E = ladder_shaped(x-1.5*size, y+18*size, size, 270+angle);

  32.   var LED_F = ladder_shaped(x-1.5*size, y+9*size, size, 270+angle);

  33.   var LED_G = ladder_shaped(x+7.5*size, y+10.5*size, size, 180+angle);

  34.   var LED_1 = LED_B.join() + LED_C.join();

  35.   var LED_2 = LED_A.join() + LED_B.join() + LED_G.join() + LED_E.join() + LED_D.join();

  36.   var LED_3 = LED_A.join() + LED_B.join() + LED_G.join() + LED_C.join() + LED_D.join();

  37.   var LED_4 = LED_F.join() + LED_G.join() + LED_B.join() + LED_C.join();

  38.   var LED_5 = LED_A.join() + LED_F.join() + LED_G.join() + LED_C.join() + LED_D.join();

  39.   var LED_6 = LED_A.join() + LED_F.join() + LED_E.join() + LED_D.join() + LED_C.join() + LED_G.join();

  40.   var LED_7 = LED_A.join() + LED_B.join() + LED_C.join();

  41.   var LED_8 = LED_A.join() + LED_B.join() + LED_C.join() + LED_D.join() + LED_E.join() + LED_F.join() + LED_G.join();

  42.   var LED_9 = LED_G.join() + LED_F.join() + LED_A.join() + LED_B.join() + LED_C.join() + LED_D.join();

  43.   var LED_0 = LED_A.join() + LED_B.join() + LED_C.join() + LED_D.join() + LED_E.join() + LED_F.join();

  44.   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(',');

  45.   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',

  46.                    '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(',');

  47.   return eval('LED_'+n);

  48. }

  49. 

  50. //返回LED时钟

  51. function LED_Clock(){

  52.   this.hh1_last = this.hh2_last = this.mm1_last = this.mm2_last = this.ss1_last

  53.   = this.ss2_last = this.SSS1_last = this.SSS2_last = this.SSS3_last='8';   //重置LED时钟时、分、秒为8

  54.   var paperW = 800, paperH = 600;   //画板大小

  55.   this.init = false;                //初始化画板、时分秒画板

  56.   this.paper_hh1 = Raphael(0, 0, paperW+2, paperH+2);

  57.   this.paper_hh2 = Raphael(0, 0, paperW+2, paperH+2);

  58.   this.paper_dot_hm = Raphael(0, 0, paperW+2, paperH+2);

  59.   this.paper_mm1 = Raphael(0, 0, paperW+2, paperH+2);

  60.   this.paper_mm2 = Raphael(0, 0, paperW+2, paperH+2);

  61.   this.paper_dot_ms = Raphael(0, 0, paperW+2, paperH+2);

  62.   this.paper_ss1 = Raphael(0, 0, paperW+2, paperH+2);

  63.   this.paper_ss2 = Raphael(0, 0, paperW+2, paperH+2);

  64.   this.paper_dot_sS = Raphael(0, 0, paperW+2, paperH+2);

  65.   this.paper_SSS1 = Raphael(0, 0, paperW+2, paperH+2);

  66.   this.paper_SSS2 = Raphael(0, 0, paperW+2, paperH+2);

  67.   this.paper_SSS3 = Raphael(0, 0, paperW+2, paperH+2);

  68.   

  69.   var angle=0;          //偏移角度

  70.   var x=10, y=300;      //坐标

  71.   var size=5;           //大小

  72.   var color="#369";     //颜色

  73.   var attr = {fill: "60-#123-#369", stroke: "none", opacity: .5};     //设置颜色、透明度

  74.   

  75.   this.display = function() {

  76.     var h1 = (new Date()).getHours();     //获取当前时、分、秒、毫秒数据

  77.     var m1 = (new Date()).getMinutes();

  78.     var s1 = (new Date()).getSeconds();

  79.     var S1 = (new Date()).getMilliseconds();

  80.     var hh1_now=('0'+h1).substr(('0'+ h1).length-2,1);

  81.     var hh2_now=('0'+h1).substr(('0'+ h1).length-1,1);

  82.     var mm1_now=('0'+m1).substr(('0'+ m1).length-2,1);

  83.     var mm2_now=('0'+m1).substr(('0'+ m1).length-1,1);

  84.     var ss1_now=('0'+s1).substr(('0'+ s1).length-2,1);

  85.     var ss2_now=('0'+s1).substr(('0'+ s1).length-1,1);

  86.     var SSS1_now=('00'+ S1).substr(('00'+ S1).length-3,1);

  87.     var SSS2_now=('00'+ S1).substr(('00'+ S1).length-2,1);

  88.     var SSS3_now=('00'+ S1).substr(('00'+ S1).length-1,1);

  89.     var x2 = x;                           //坐标

  90.     //时钟数据，第一位、第二位

  91.     if ((hh1_now != this.hh1_last) || (this.init == false)) {

  92.       this.hh1_last = hh1_now;

  93.       this.paper_hh1.clear();

  94.       this.paper_hh1.path(LED(hh1_now, x2, y, size,angle)).attr(attr);

  95.     }

  96.     x2 += 1*12*size

  97.     if ((hh2_now != this.hh2_last) || (this.init == false)) {

  98.       this.hh2_last = hh2_now;

  99.       this.paper_hh2.clear();

  100.       this.paper_hh2.path(LED(hh2_now, x2, y, size,angle)).attr(attr);

  101.     }

  102.     //时钟与分钟间隔符

  103.     x2 += 0.8*12*size;

  104.     if (S1 % 1000 > 500) {

  105.       this.paper_dot_hm.clear();

  106.     } else {

  107.       this.paper_dot_hm.clear();

  108.       this.paper_dot_hm.path(LED('Dot2', x2, y, size,angle)).attr(attr);

  109.     } 

  110.     //分钟数据，第一位、第二位

  111.     x2 += 0.7*12*size;

  112.     if ((mm1_now != this.mm1_last) || (this.init == false)) {

  113.       this.mm1_last = mm1_now;

  114.       this.paper_mm1.clear();

  115.       this.paper_mm1.path(LED(mm1_now, x2, y, size,angle)).attr(attr);

  116.     }

  117.     x2 += 1*12*size;

  118.     if ((mm2_now != this.mm2_last) || (this.init == false)) {

  119.       this.mm2_last = mm2_now;

  120.       this.paper_mm2.clear();

  121.       this.paper_mm2.path(LED(mm2_now, x2, y, size,angle)).attr(attr);

  122.     }

  123.     //分钟与秒钟间隔符

  124.     x2 += 0.8*12*size;

  125.     if (S1 % 1000 > 500) {

  126.       this.paper_dot_ms.clear();

  127.     } else {

  128.       this.paper_dot_ms.clear();

  129.       this.paper_dot_ms.path(LED('Dot2', x2, y, size,angle)).attr(attr);

  130.     }

  131.     //秒钟数据，第一位、第二位

  132.     x2 += 0.7*12*size;

  133.     if ((ss1_now != this.ss1_last) || (this.init == false)) {

  134.       this.ss1_last = ss1_now;

  135.       this.paper_ss1.clear();

  136.       this.paper_ss1.path(LED(ss1_now, x2, y, size,angle)).attr(attr);

  137.     }

  138.     x2 += 1*12*size;

  139.     if ((ss2_now != this.ss2_last) || (this.init == false)) {

  140.       this.ss2_last = ss2_now;

  141.       this.paper_ss2.clear();

  142.       this.paper_ss2.path(LED(ss2_now, x2, y, size,angle)).attr(attr);

  143.     }

  144.     //秒钟与毫秒间隔符

  145.     x2 += 0.8*12*size;

  146.     if (this.init == false) {

  147.       this.paper_dot_sS.path(LED('Dot1', x2, y, size,angle)).attr(attr);

  148.     }

  149.     //毫秒数据，第一位、第二位、第三位

  150.     x2 += 0.7*12*size;

  151.     if ((SSS1_now != this.SSS1_last) || (this.init == false)) {

  152.       this.SSS1_last = SSS1_now;

  153.       this.paper_SSS1.clear();

  154.       this.paper_SSS1.path(LED(SSS1_now, x2, y, size,angle)).attr(attr);

  155.     }

  156.     x2 += 1*12*size;

  157.     if ((SSS2_now != this.SSS2_last) || (this.init == false)) {

  158.       this.SSS2_last = SSS2_now;

  159.       this.paper_SSS2.clear();

  160.       this.paper_SSS2.path(LED(SSS2_now, x2, y, size,angle)).attr(attr);

  161.     }

  162.     x2 += 1*12*size;

  163.     if ((SSS3_now != this.SSS3_last) || (this.init == false)) {

  164.       this.SSS3_last = SSS3_now;

  165.       this.paper_SSS3.clear();

  166.       this.paper_SSS3.path(LED(SSS3_now, x2, y, size,angle)).attr(attr);

  167.     }

  168.     this.init = true;

  169.   };

  170. }

  171. 

  172. window.onload=function(){

  173. 

  174.   //建立画板 800x600;

  175.   var paperW = 800, paperH = 600;

  176.   var paper = Raphael(0, 0, paperW+2, paperH+2);

  177.   var rect = paper.rect(0, 0, paperW, paperH);

  178.   

  179.   //格子-横线,坐标文字

  180.   for (var x=0;x<=paperW;x++)

  181.   {

  182.     if (x%10==0) {

  183.       paper.path(['M'+x,'0','L'+x,paperH].join(',')).attr({fill: "#CCC",opacity: .3});

  184.       if (x%100==0) {

  185.         paper.path(['M'+x,'0','L'+x,paperH].join(',')).attr({fill: "#000",opacity: .7});

  186.         paper.text(x+12, 0+6, x).attr({font: "12px Helvetica", opacity: 0.5, fill: "#000"});

  187.       }

  188.     }

  189.   }

  190.   

  191.   //格子-竖线,坐标文字

  192.   for (var y=0;y<=paperH;y++)

  193.   {

  194.     if (y%10==0) {

  195.       paper.path(['M0',y,'L'+paperW,y].join(',')).attr({fill: "#CCC",opacity: .3});

  196.       if (y%100==0) {

  197.         paper.path(['M0',y,'L'+paperW,y].join(',')).attr({fill: "#000",opacity: .7});

  198.         paper.text(0+12, y+6, y).attr({font: "12px Helvetica", opacity: 0.5, fill: "#000"});

  199.       }

  200.     }

  201.   }

  202.   

  203.   //绘制一个梯形

  204.   var rTop = paper.path('M100,100L500,100L400,200L200,200z').attr({fill: "90-#CCC-#EEE", stroke: "none", opacity: .3});

  205.   

  206.   //梯形坐标文字，署名

  207.   var txt = [], attr = {font: "12px Helvetica", opacity: 0.7};

  208.   txt[0] = paper.text(100, 100, "(100,100)").attr(attr).attr({fill: "#000"});

  209.   txt[1] = paper.text(500, 100, "(500,100)").attr(attr).attr({fill: "#000"});

  210.   txt[2] = paper.text(400, 200, "(400,200)").attr(attr).attr({fill: "#000"});

  211.   txt[3] = paper.text(200, 200, "(200,200)").attr(attr).attr({fill: "#000"});

  212.   txt[4] = paper.text(720, 560, "LED Clock ... By Yu2n").attr(attr).attr({fill: "#000"});

  213.   txt[5] = paper.text(750, 580, "2015.02.04").attr(attr).attr({fill: "#000"});

  214. 

  215.   //显示LED数字 0-9

  216.   var attr = {fill: "60-#123-#369", stroke: "none", opacity: 0.3};

  217.   for (var i=0;i<=9;i++) {

  218.     var angle=0;

  219.     var x=y=20;

  220.     var size=5;

  221.     var color="#369";

  222.     paper.path(LED(i,(i+1)*(x+7*size),y,size,angle)).attr(attr);

  223.   }

  224.   

  225.   //初始化 LED 时钟显示

  226.   var led_clock = new LED_Clock();

  227.   led_clock.display();

  228.   setInterval(function(){ led_clock.display(); },50)

  229. }
复制代码
作者: CrLf    时间: 2015-3-5 12:10

怎么感觉是 html5 的 svg…
作者: yu2n    时间: 2015-3-5 13:05

回复 2# CrLf

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



欢迎光临 批处理之家 (http://bbs.bathome.net/) Powered by Discuz! 7.2