[新手上路]批处理新手入门导读[视频教程]批处理基础视频教程[视频教程]VBS基础视频教程[批处理精品]批处理版照片整理器
[批处理精品]纯批处理备份&还原驱动[批处理精品]CMD命令50条不能说的秘密[在线下载]第三方命令行工具[在线帮助]VBScript / JScript 在线参考
返回列表 发帖

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

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


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

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

核心代码:
  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. //返回LED时钟
  50. function LED_Clock(){
  51.   this.hh1_last = this.hh2_last = this.mm1_last = this.mm2_last = this.ss1_last
  52.   = this.ss2_last = this.SSS1_last = this.SSS2_last = this.SSS3_last='8';   //重置LED时钟时、分、秒为8
  53.   var paperW = 800, paperH = 600;   //画板大小
  54.   this.init = false;                //初始化画板、时分秒画板
  55.   this.paper_hh1 = Raphael(0, 0, paperW+2, paperH+2);
  56.   this.paper_hh2 = Raphael(0, 0, paperW+2, paperH+2);
  57.   this.paper_dot_hm = Raphael(0, 0, paperW+2, paperH+2);
  58.   this.paper_mm1 = Raphael(0, 0, paperW+2, paperH+2);
  59.   this.paper_mm2 = Raphael(0, 0, paperW+2, paperH+2);
  60.   this.paper_dot_ms = Raphael(0, 0, paperW+2, paperH+2);
  61.   this.paper_ss1 = Raphael(0, 0, paperW+2, paperH+2);
  62.   this.paper_ss2 = Raphael(0, 0, paperW+2, paperH+2);
  63.   this.paper_dot_sS = Raphael(0, 0, paperW+2, paperH+2);
  64.   this.paper_SSS1 = Raphael(0, 0, paperW+2, paperH+2);
  65.   this.paper_SSS2 = Raphael(0, 0, paperW+2, paperH+2);
  66.   this.paper_SSS3 = Raphael(0, 0, paperW+2, paperH+2);
  67.   
  68.   var angle=0;          //偏移角度
  69.   var x=10, y=300;      //坐标
  70.   var size=5;           //大小
  71.   var color="#369";     //颜色
  72.   var attr = {fill: "60-#123-#369", stroke: "none", opacity: .5};     //设置颜色、透明度
  73.   
  74.   this.display = function() {
  75.     var h1 = (new Date()).getHours();     //获取当前时、分、秒、毫秒数据
  76.     var m1 = (new Date()).getMinutes();
  77.     var s1 = (new Date()).getSeconds();
  78.     var S1 = (new Date()).getMilliseconds();
  79.     var hh1_now=('0'+h1).substr(('0'+ h1).length-2,1);
  80.     var hh2_now=('0'+h1).substr(('0'+ h1).length-1,1);
  81.     var mm1_now=('0'+m1).substr(('0'+ m1).length-2,1);
  82.     var mm2_now=('0'+m1).substr(('0'+ m1).length-1,1);
  83.     var ss1_now=('0'+s1).substr(('0'+ s1).length-2,1);
  84.     var ss2_now=('0'+s1).substr(('0'+ s1).length-1,1);
  85.     var SSS1_now=('00'+ S1).substr(('00'+ S1).length-3,1);
  86.     var SSS2_now=('00'+ S1).substr(('00'+ S1).length-2,1);
  87.     var SSS3_now=('00'+ S1).substr(('00'+ S1).length-1,1);
  88.     var x2 = x;                           //坐标
  89.     //时钟数据,第一位、第二位
  90.     if ((hh1_now != this.hh1_last) || (this.init == false)) {
  91.       this.hh1_last = hh1_now;
  92.       this.paper_hh1.clear();
  93.       this.paper_hh1.path(LED(hh1_now, x2, y, size,angle)).attr(attr);
  94.     }
  95.     x2 += 1*12*size
  96.     if ((hh2_now != this.hh2_last) || (this.init == false)) {
  97.       this.hh2_last = hh2_now;
  98.       this.paper_hh2.clear();
  99.       this.paper_hh2.path(LED(hh2_now, x2, y, size,angle)).attr(attr);
  100.     }
  101.     //时钟与分钟间隔符
  102.     x2 += 0.8*12*size;
  103.     if (S1 % 1000 > 500) {
  104.       this.paper_dot_hm.clear();
  105.     } else {
  106.       this.paper_dot_hm.clear();
  107.       this.paper_dot_hm.path(LED('Dot2', x2, y, size,angle)).attr(attr);
  108.     }
  109.     //分钟数据,第一位、第二位
  110.     x2 += 0.7*12*size;
  111.     if ((mm1_now != this.mm1_last) || (this.init == false)) {
  112.       this.mm1_last = mm1_now;
  113.       this.paper_mm1.clear();
  114.       this.paper_mm1.path(LED(mm1_now, x2, y, size,angle)).attr(attr);
  115.     }
  116.     x2 += 1*12*size;
  117.     if ((mm2_now != this.mm2_last) || (this.init == false)) {
  118.       this.mm2_last = mm2_now;
  119.       this.paper_mm2.clear();
  120.       this.paper_mm2.path(LED(mm2_now, x2, y, size,angle)).attr(attr);
  121.     }
  122.     //分钟与秒钟间隔符
  123.     x2 += 0.8*12*size;
  124.     if (S1 % 1000 > 500) {
  125.       this.paper_dot_ms.clear();
  126.     } else {
  127.       this.paper_dot_ms.clear();
  128.       this.paper_dot_ms.path(LED('Dot2', x2, y, size,angle)).attr(attr);
  129.     }
  130.     //秒钟数据,第一位、第二位
  131.     x2 += 0.7*12*size;
  132.     if ((ss1_now != this.ss1_last) || (this.init == false)) {
  133.       this.ss1_last = ss1_now;
  134.       this.paper_ss1.clear();
  135.       this.paper_ss1.path(LED(ss1_now, x2, y, size,angle)).attr(attr);
  136.     }
  137.     x2 += 1*12*size;
  138.     if ((ss2_now != this.ss2_last) || (this.init == false)) {
  139.       this.ss2_last = ss2_now;
  140.       this.paper_ss2.clear();
  141.       this.paper_ss2.path(LED(ss2_now, x2, y, size,angle)).attr(attr);
  142.     }
  143.     //秒钟与毫秒间隔符
  144.     x2 += 0.8*12*size;
  145.     if (this.init == false) {
  146.       this.paper_dot_sS.path(LED('Dot1', x2, y, size,angle)).attr(attr);
  147.     }
  148.     //毫秒数据,第一位、第二位、第三位
  149.     x2 += 0.7*12*size;
  150.     if ((SSS1_now != this.SSS1_last) || (this.init == false)) {
  151.       this.SSS1_last = SSS1_now;
  152.       this.paper_SSS1.clear();
  153.       this.paper_SSS1.path(LED(SSS1_now, x2, y, size,angle)).attr(attr);
  154.     }
  155.     x2 += 1*12*size;
  156.     if ((SSS2_now != this.SSS2_last) || (this.init == false)) {
  157.       this.SSS2_last = SSS2_now;
  158.       this.paper_SSS2.clear();
  159.       this.paper_SSS2.path(LED(SSS2_now, x2, y, size,angle)).attr(attr);
  160.     }
  161.     x2 += 1*12*size;
  162.     if ((SSS3_now != this.SSS3_last) || (this.init == false)) {
  163.       this.SSS3_last = SSS3_now;
  164.       this.paper_SSS3.clear();
  165.       this.paper_SSS3.path(LED(SSS3_now, x2, y, size,angle)).attr(attr);
  166.     }
  167.     this.init = true;
  168.   };
  169. }
  170. window.onload=function(){
  171.   //建立画板 800x600;
  172.   var paperW = 800, paperH = 600;
  173.   var paper = Raphael(0, 0, paperW+2, paperH+2);
  174.   var rect = paper.rect(0, 0, paperW, paperH);
  175.   
  176.   //格子-横线,坐标文字
  177.   for (var x=0;x<=paperW;x++)
  178.   {
  179.     if (x%10==0) {
  180.       paper.path(['M'+x,'0','L'+x,paperH].join(',')).attr({fill: "#CCC",opacity: .3});
  181.       if (x%100==0) {
  182.         paper.path(['M'+x,'0','L'+x,paperH].join(',')).attr({fill: "#000",opacity: .7});
  183.         paper.text(x+12, 0+6, x).attr({font: "12px Helvetica", opacity: 0.5, fill: "#000"});
  184.       }
  185.     }
  186.   }
  187.   
  188.   //格子-竖线,坐标文字
  189.   for (var y=0;y<=paperH;y++)
  190.   {
  191.     if (y%10==0) {
  192.       paper.path(['M0',y,'L'+paperW,y].join(',')).attr({fill: "#CCC",opacity: .3});
  193.       if (y%100==0) {
  194.         paper.path(['M0',y,'L'+paperW,y].join(',')).attr({fill: "#000",opacity: .7});
  195.         paper.text(0+12, y+6, y).attr({font: "12px Helvetica", opacity: 0.5, fill: "#000"});
  196.       }
  197.     }
  198.   }
  199.   
  200.   //绘制一个梯形
  201.   var rTop = paper.path('M100,100L500,100L400,200L200,200z').attr({fill: "90-#CCC-#EEE", stroke: "none", opacity: .3});
  202.   
  203.   //梯形坐标文字,署名
  204.   var txt = [], attr = {font: "12px Helvetica", opacity: 0.7};
  205.   txt[0] = paper.text(100, 100, "(100,100)").attr(attr).attr({fill: "#000"});
  206.   txt[1] = paper.text(500, 100, "(500,100)").attr(attr).attr({fill: "#000"});
  207.   txt[2] = paper.text(400, 200, "(400,200)").attr(attr).attr({fill: "#000"});
  208.   txt[3] = paper.text(200, 200, "(200,200)").attr(attr).attr({fill: "#000"});
  209.   txt[4] = paper.text(720, 560, "LED Clock ... By Yu2n").attr(attr).attr({fill: "#000"});
  210.   txt[5] = paper.text(750, 580, "2015.02.04").attr(attr).attr({fill: "#000"});
  211.   //显示LED数字 0-9
  212.   var attr = {fill: "60-#123-#369", stroke: "none", opacity: 0.3};
  213.   for (var i=0;i<=9;i++) {
  214.     var angle=0;
  215.     var x=y=20;
  216.     var size=5;
  217.     var color="#369";
  218.     paper.path(LED(i,(i+1)*(x+7*size),y,size,angle)).attr(attr);
  219.   }
  220.   
  221.   //初始化 LED 时钟显示
  222.   var led_clock = new LED_Clock();
  223.   led_clock.display();
  224.   setInterval(function(){ led_clock.display(); },50)
  225. }
复制代码
附件: 您需要登录才可以下载或查看附件。没有帐号?注册
『千江有水千江月』千江有水,月映千江;万里无云,万里青天。    http://yu2n.qiniudn.com/

怎么感觉是 html5 的 svg…

TOP

回复 2# CrLf

IE6 即可运行……当然不是 HTML5 了。
『千江有水千江月』千江有水,月映千江;万里无云,万里青天。    http://yu2n.qiniudn.com/

TOP

返回列表