很久很久以前的一个很流行的java Applet放烟花效果,当初移到android过,这次摸鱼时间翻译成js代码,用canvas实现
这么多年,终于能大致看懂这代码了,

已经实现透明效果,只需要给body弄个好看的背景图片就行,但需要主色为深色,看到的人谁有兴趣美化下,弄个背景加个声音啥的,不过没啥用就是的了,只是弄着好玩

谁要是弄得漂亮也给我看下,虽然我已经是个老头了,但也有一颗爱美的心

主要学到的是

1. js里面的各种Array,https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray

2. java中,像素数组一般用int数组,一个int表示一个像素, 而js中一般用Uint8数组,四个uint8表示一个像素,转换要考虑高低位的问题,  这里getPix setPix中的转换过程 可以省略掉,但年纪大了,懒了

【感谢GPT的大力相助】

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6.     <title>烟花</title>
  7.     <style>
  8.         #mainCanvas{
  9.             width: 800px;
  10.             height: 600px;
  11.             background-color:  rgba(255, 255, 255, 0);
  12.             position: absolute;
  13.             top: 0;
  14.             left: 0;
  15.         }
  16.     </style>
  17.     <script src="fireworks.js"></script>
  18.   </head>
  19.   <body style="background: #000000 ;">
  20.      <canvas ref="mainCanvas" id="mainCanvas" ></canvas>
  21.      <script>
  22.         var f=new Fireworks(mainCanvas);
  23.      </script>
  24.   </body>
  25. </html>

Fireworks.js

  1.  class Fireworks{
  2.     constructor(canvas) {
  3.         //0xff000000前面的ff表示透明度,可以调小让背景图显示出来 不过这里没研究清楚
  4.         this.alpha = 0xFF000000;
  5.         this.fps = 12;
  6.         this.canvas = canvas;
  7.         this.width = 800;
  8.         this.height = 600;
  9.         this.size= this.width*this.height;
  10.         //减2行,以免超出
  11.         this.size2=this.size-this.width*2;
  12.         this.canvas.width = this.width;
  13.         this.canvas.height = this.height;  
  14.  
  15.         this.ctx = canvas.getContext('2d');
  16.  
  17.         this.imageData = this.ctx.createImageData(this.width, this.height);
  18.  
  19.         this.canvas.addEventListener("mousedown", this.onDown.bind(this));
  20.         //最多烟花数量,炸一次算50个,也就是同时最多10个烟花在,
  21.         this.bits=500;
  22.         //炸开后的烟花数量
  23.         this.bit_max=50;
  24.         //炸开角度,但具体影响还不清楚
  25.         this.ru = 50;
  26.         this.rv = 50;
  27.         //中心点
  28.         this.m_centerX = Math.floor(this.width / 2);
  29.         this.m_centerY = Math.floor(this.height / 2);
  30.  
  31.         //实际图像数据 每四个位置表示一个像素 R G B A
  32.         this.data=new ArrayBuffer(this.width*this.height*4);
  33.         this.dataView = new DataView(this.data);
  34.         //烟花计算数据
  35.         this.bit_px = new Array(this.bits).fill(0);
  36.         this.bit_py = new Array(this.bits).fill(0);
  37.         this.bit_vx = new Array(this.bits).fill(0);
  38.         this.bit_vy = new Array(this.bits).fill(0);
  39.         this.bit_sx = new Int32Array(this.bits).fill(0);
  40.         this.bit_sy = new Int32Array(this.bits).fill(0);
  41.         this.bit_l = new Int32Array(this.bits).fill(0);
  42.         this.bit_f = new Int32Array(this.bits).fill(0);
  43.         this.bit_p = new Int32Array(this.bits).fill(0);
  44.         this.bit_c = new Int32Array(this.bits).fill(0);
  45.  
  46.         this.m_centerX = Math.floor(this.width / 2);
  47.         this.m_centerY = Math.floor(this.height / 2);
  48.  
  49.         this.initData();
  50.         this.calculate();
  51.     }
  52.     initData(){
  53.         //最开始的时候给弄透明了
  54.         for(var i=0;i<this.size;i++){
  55.             this.dataView.setUint32(i*4,0x00000000,true);
  56.         }
  57.         this.imageData.data.set(new Uint8ClampedArray(this.dataView.buffer));
  58.     }
  59.     onDown(event){
  60.         this.m_mouseX = event.offsetX;
  61.         this.m_mouseY = event.offsetY;
  62.         let k = Math.floor(Math.random() * 256);
  63.         let l = Math.floor(Math.random() * 256);
  64.         let i1 = Math.floor(Math.random() * 256);
  65.         let j1 = (k << 16) | (l << 8) | i1 | this.alpha;
  66.         let k1 = 0;
  67.         console.log(this.bits);
  68.         console.log(this.bit_max);
  69.         for (let l1 = 0; l1 < this.bits; l1++) {
  70.  
  71.             if (this.bit_f[l1] !== 0) {
  72.                 continue;
  73.             }
  74.             this.bit_px[l1] = this.m_mouseX;
  75.             this.bit_py[l1] = this.m_mouseY;
  76.             let d = Math.random() * 6.2800000000000002;
  77.             let d1 = Math.random();
  78.             this.bit_vx[l1] = Math.sin(d) * d1;
  79.             this.bit_vy[l1] = Math.cos(d) * d1;
  80.             this.bit_l[l1] = Math.floor(Math.random() * 100) + 100;
  81.             this.bit_p[l1] = Math.floor(Math.random() * 3);
  82.             this.bit_c[l1] = j1;
  83.             this.bit_sx[l1] = this.m_mouseX;
  84.             this.bit_sy[l1] = this.height - 5;
  85.             this.bit_f[l1] = 2;
  86.             if (++k1 === this.bit_max) {
  87.                 break;
  88.             }
  89.         }
  90.  
  91.      //这里播放开始声音
  92.  
  93.         //这里尝试点击后修改一个像素点的颜色
  94.        /* let pix=this.getPix(y*this.width+x);
  95.         console.log(pix);
  96.         this.setPix(y*this.width+x,0xffff00f0);
  97.         this.imageData.data.set(new Uint8ClampedArray(this.dataView.buffer));  */
  98.     }
  99.     getPix(byteOffset){
  100.         //获取像素点
  101.         return this.dataView.getUint32(byteOffset*4, true);
  102.     }
  103.     setPix(byteOffset,val){
  104.         this.dataView.setUint32(byteOffset*4,val,true);
  105.     }
  106.     bit_set(x,y,v){
  107.         //设置像素点
  108.         this.setPix(y * this.width + x,v);
  109.     }
  110.     fade(){
  111.         //全图慢慢扩散和淡化
  112.         for (let j = 0; j < this.size2; j++) {
  113.             //取四个点
  114.             const k = this.getPix(j);
  115.             //最后会是黑色,所以如果一个点的值是黑色,就可以不运算了
  116.             if(k==this.alpha){
  117.                 this.setPix(j,0x00000000);
  118.                 continue;
  119.             }
  120.             if(k==0x00000000){
  121.                 continue;
  122.             }
  123.             //右边
  124.             const l = this.getPix(j+1);
  125.             //下一行的点
  126.             const i1 = this.getPix(j + this.width);
  127.             //下一行右边
  128.             const j1 = this.getPix(j + this.width + 1);
  129.  
  130.             let i = (k & 0xff0000) >> 16;
  131.             let k1 = ((((l & 0xff0000) >> 16) - i) * 50 >> 8) + i;
  132.             i = (k & 0xff00) >> 8;
  133.             let l1 = ((((l & 0xff00) >> 8) - i) * 50 >> 8) + i;
  134.             i = k & 0xff;
  135.             let i2 = (((l & 0xff) - i) * 50 >> 8) + i;
  136.             i = (i1 & 0xff0000) >> 16;
  137.             let j2 = ((((j1 & 0xff0000) >> 16) - i) * 50 >> 8) + i;
  138.             i = (i1 & 0xff00) >> 8;
  139.             let k2 = ((((j1 & 0xff00) >> 8) - i) * 50 >> 8) + i;
  140.             i = i1 & 0xff;
  141.             let l2 = (((j1 & 0xff) - i) * 50 >> 8) + i;
  142.             let i3 = ((j2 - k1) * 50 >> 8) + k1;
  143.             let j3 = ((k2 - l1) * 50 >> 8) + l1;
  144.             let k3 = ((l2 - i2) * 50 >> 8) + i2;
  145.             let val = (i3 << 16) | (j3 << 8) | k3 | this.alpha;
  146.             this.setPix(j,val);
  147.           }
  148.  
  149.     }
  150.     //计算烟花
  151.     rend() {
  152.  
  153.         let flag2 = false;
  154.         for (let k = 0; k < this.bits; k++) {
  155.             switch (this.bit_f[k]) {
  156.                 default:
  157.                     break;
  158.                 case 1:
  159.                     this.bit_vy[k] += Math.random() / 50;
  160.                     this.bit_px[k] += this.bit_vx[k];
  161.                     this.bit_py[k] += this.bit_vy[k];
  162.                     this.bit_l[k]--;
  163.                     if (this.bit_l[k] === 0 || this.bit_px[k] < 0.0 || this.bit_py[k] < 0.0 || this.bit_px[k] > this.width || this.bit_py[k] > this.height - 3) {
  164.                         this.bit_c[k] = this.alpha;
  165.                         this.bit_f[k] = 0;
  166.                     } else if (this.bit_p[k] === 0) {
  167.                         if (Math.floor(Math.random() * 2) === 0) {
  168.                             this.bit_set(Math.floor(this.bit_px[k]), Math.floor(this.bit_py[k]), -1);
  169.                         }
  170.                     } else {
  171.                         this.bit_set(Math.floor(this.bit_px[k]), Math.floor(this.bit_py[k]), this.bit_c[k]);
  172.                     }
  173.                     break;
  174.  
  175.                 case 2:
  176.                     //这里是飞行速度,
  177.                     this.bit_sy[k] -= 10;
  178.                     if (this.bit_sy[k] <= this.bit_py[k]) {
  179.                         this.bit_f[k] = 1;
  180.                         flag2 = true;
  181.                     }
  182.                     if (Math.floor(Math.random() * 20) === 0) {
  183.                         let i = Math.floor(Math.random() * 2);
  184.                         let j = Math.floor(Math.random() * 5);
  185.                         this.bit_set(this.bit_sx[k] + i, this.bit_sy[k] + j, -1);
  186.                     }
  187.                     break;
  188.             }
  189.         }
  190.  
  191.         if (flag2  ) {
  192.             //播放爆炸声音
  193.         }
  194.     }
  195.  
  196.     calculate(){
  197.         this.fade();
  198.         this.rend();
  199.         this.imageData.data.set(new Uint8ClampedArray(this.dataView.buffer));
  200.  
  201.         this.ctx.putImageData(this.imageData,0,0);
  202.         setTimeout(()=>{this.calculate()},50);
  203.     }
  204.  
  205. }

　　

原始java代码

  1.  
  2. import java.applet.Applet;
  3. import java.applet.AudioClip;
  4. import java.awt.*;
  5. import java.awt.image.MemoryImageSource;
  6. import java.util.Random;
  7.  
  8. @SuppressWarnings("serial")
  9. public class Test extends Applet implements Runnable {
  10.     public static void main(String[]args){
  11.         Test test=new Test();
  12.         test.init();
  13.  
  14.     }
  15.     public Test() {
  16.         m_mouseX = 0;
  17.         m_mouseY = 0;
  18.         m_sleepTime = 5;
  19.         isError = false;
  20.         isInitialized = false;
  21.         rand = new Random();
  22.         bits = 50;
  23.         bit_px = new double[bits];
  24.         bit_py = new double[bits];
  25.         bit_vx = new double[bits];
  26.         bit_vy = new double[bits];
  27.         bit_sx = new int[bits];
  28.         bit_sy = new int[bits];
  29.         bit_l = new int[bits];
  30.         bit_f = new int[bits];
  31.         bit_p = new int[bits];
  32.         bit_c = new int[bits];
  33.         ru = 50;
  34.         rv = 50;
  35.     }
  36.  
  37.     public void init() {
  38.         String s ="50";
  39.         if (s != null)
  40.             bits = Integer.parseInt(s);
  41.         s = "30";
  42.         if (s != null)
  43.             bit_max = Integer.parseInt(s);
  44.         s = "20";
  45.         if (s != null)
  46.             ru = Integer.parseInt(s);
  47.         s = "100";
  48.         if (s != null)
  49.             rv = Integer.parseInt(s);
  50.         s ="0";
  51.         if (s != null)
  52.             bit_sound = Integer.parseInt(s);
  53.         m_nAppX = getSize().width;
  54.         m_nAppY = getSize().height;
  55.         m_centerX = m_nAppX / 2;
  56.         m_centerY = m_nAppY / 2;
  57.         m_mouseX = m_centerX;
  58.         m_mouseY = m_centerY;
  59.         resize(m_nAppX, m_nAppY);
  60.         pixls = m_nAppX * m_nAppY;
  61.         pixls2 = pixls - m_nAppX * 2;
  62.         pix0 = new int[pixls];
  63.         offImage = new MemoryImageSource(m_nAppX, m_nAppY, pix0, 0, m_nAppX);
  64.         offImage.setAnimated(true);
  65.         dbImg = createImage(offImage);
  66.         for (int i = 0; i < pixls; i++)
  67.             pix0[i] = 0xff000000;
  68.  
  69.         //sound1 = getAudioClip(getDocumentBase(), "firework.au");
  70.         //sound2 = getAudioClip(getDocumentBase(), "syu.au");
  71.         for (int j = 0; j < bits; j++)
  72.             bit_f[j] = 0;
  73.  
  74.         isInitialized = true;
  75.         start();
  76.     }
  77.     private boolean stop;
  78.  
  79.     public void run() {
  80.         while (!isInitialized)
  81.             try {
  82.                 Thread.sleep(200L);
  83.             } catch (InterruptedException interruptedexception) {
  84.             }
  85.         do {
  86.             for (int j = 0; j < pixls2; j++) {
  87.                 int k = pix0[j];
  88.                 int l = pix0[j + 1];
  89.                 int i1 = pix0[j + m_nAppX];
  90.                 int j1 = pix0[j + m_nAppX + 1];
  91.                 int i = (k & 0xff0000) >> 16;
  92.                 int k1 = ((((l & 0xff0000) >> 16) - i) * ru >> 8) + i;
  93.                 i = (k & 0xff00) >> 8;
  94.                 int l1 = ((((l & 0xff00) >> 8) - i) * ru >> 8) + i;
  95.                 i = k & 0xff;
  96.                 int i2 = (((l & 0xff) - i) * ru >> 8) + i;
  97.                 i = (i1 & 0xff0000) >> 16;
  98.                 int j2 = ((((j1 & 0xff0000) >> 16) - i) * ru >> 8) + i;
  99.                 i = (i1 & 0xff00) >> 8;
  100.                 int k2 = ((((j1 & 0xff00) >> 8) - i) * ru >> 8) + i;
  101.                 i = i1 & 0xff;
  102.                 int l2 = (((j1 & 0xff) - i) * ru >> 8) + i;
  103.                 int i3 = ((j2 - k1) * rv >> 8) + k1;
  104.                 int j3 = ((k2 - l1) * rv >> 8) + l1;
  105.                 int k3 = ((l2 - i2) * rv >> 8) + i2;
  106.                 pix0[j] = i3 << 16 | j3 << 8 | k3 | 0xff000000;
  107.             }
  108.  
  109.             rend();
  110.             offImage.newPixels(0, 0, m_nAppX, m_nAppY);
  111.             try {
  112.                 Thread.sleep(m_sleepTime);
  113.             } catch (InterruptedException interruptedexception1) {
  114.             }
  115.         } while (!stop);
  116.     }
  117.  
  118.     public void update(Graphics g) {
  119.         paint(g);
  120.     }
  121.  
  122.     public void paint(Graphics g) {
  123.         g.drawImage(dbImg, 0, 0, this);
  124.     }
  125.  
  126.     public void start() {
  127.         if (isError)
  128.             return;
  129.         isRunning = true;
  130.         if (runner == null) {
  131.             runner = new Thread(this);
  132.             runner.start();
  133.         }
  134.     }
  135.  
  136.     @SuppressWarnings("deprecation")
  137.     public void stop() {
  138.         if (runner != null) {
  139.             runner.stop();
  140.             runner = null;
  141.         }
  142.     }
  143.  
  144.     public boolean mouseMove(Event event, int i, int j) {
  145.         m_mouseX = i;
  146.         m_mouseY = j;
  147.         return true;
  148.     }
  149.  
  150.     public boolean mouseDown(Event event, int i, int j) {
  151.         m_mouseX = i;
  152.         m_mouseY = j;
  153.         int k = (int) (rand.nextDouble() * 256D);
  154.         int l = (int) (rand.nextDouble() * 256D);
  155.         int i1 = (int) (rand.nextDouble() * 256D);
  156.         int j1 = k << 16 | l << 8 | i1 | 0xff000000;
  157.         int k1 = 0;
  158.         for (int l1 = 0; l1 < bits; l1++) {
  159.             if (bit_f[l1] != 0)
  160.                 continue;
  161.             bit_px[l1] = m_mouseX;
  162.             bit_py[l1] = m_mouseY;
  163.             double d = rand.nextDouble() * 6.2800000000000002D;
  164.             double d1 = rand.nextDouble();
  165.             bit_vx[l1] = Math.sin(d) * d1;
  166.             bit_vy[l1] = Math.cos(d) * d1;
  167.             bit_l[l1] = (int) (rand.nextDouble() * 100D) + 100;
  168.             bit_p[l1] = (int) (rand.nextDouble() * 3D);
  169.             bit_c[l1] = j1;
  170.             bit_sx[l1] = m_mouseX;
  171.             bit_sy[l1] = m_nAppY - 5;
  172.             bit_f[l1] = 2;
  173.             if (++k1 == bit_max)
  174.                 break;
  175.         }
  176.  
  177.         if (bit_sound > 1)
  178.             sound2.play();
  179.         return true;
  180.     }
  181.  
  182.     public boolean mouseExit(Event event, int i, int j) {
  183.         m_mouseX = i;
  184.         m_mouseY = j;
  185.         return true;
  186.     }
  187.  
  188.     // (JAVA世纪网,java2000.net)
  189.     void rend() {
  190.         boolean flag2 = false;
  191.         for (int k = 0; k < bits; k++)
  192.             switch (bit_f[k]) {
  193.                 default:
  194.                     break;
  195.  
  196.                 case 1: // '\001'
  197.                     bit_vy[k] += rand.nextDouble() / 50D;
  198.                     bit_px[k] += bit_vx[k];
  199.                     bit_py[k] += bit_vy[k];
  200.                     bit_l[k]--;
  201.                     if (bit_l[k] == 0 || bit_px[k] < 0.0D || bit_py[k] < 0.0D || bit_px[k] > (double) m_nAppX
  202.                             || bit_py[k] > (double) (m_nAppY - 3)) {
  203.                         bit_c[k] = 0xff000000;
  204.                         bit_f[k] = 0;
  205.                     } else if (bit_p[k] == 0) {
  206.                         if ((int) (rand.nextDouble() * 2D) == 0)
  207.                             bit_set((int) bit_px[k], (int) bit_py[k], -1);
  208.                     } else {
  209.                         bit_set((int) bit_px[k], (int) bit_py[k], bit_c[k]);
  210.                     }
  211.                     break;
  212.  
  213.                 case 2: // '\002'
  214.                     bit_sy[k] -= 5;
  215.                     if ((double) bit_sy[k] <= bit_py[k]) {
  216.                         bit_f[k] = 1;
  217.                         flag2 = true;
  218.                     }
  219.                     if ((int) (rand.nextDouble() * 20D) == 0) {
  220.                         int i = (int) (rand.nextDouble() * 2D);
  221.                         int j = (int) (rand.nextDouble() * 5D);
  222.                         bit_set(bit_sx[k] + i, bit_sy[k] + j, -1);
  223.                     }
  224.                     break;
  225.             }
  226.  
  227.         if (flag2 && bit_sound > 0)
  228.             sound1.play();
  229.     }
  230.  
  231.     void bit_set(int i, int j, int k) {
  232.         int l = i + j * m_nAppX;
  233.         pix0[l] = k;
  234.     }
  235.  
  236.     private int m_nAppX;
  237.     private int m_nAppY;
  238.     private int m_centerX;
  239.     private int m_centerY;
  240.     private int m_mouseX;
  241.     private int m_mouseY;
  242.     private int m_sleepTime;
  243.     private boolean isError;
  244.     boolean isRunning;
  245.     boolean isInitialized;
  246.     Thread runner;
  247.     int pix0[];
  248.     MemoryImageSource offImage;
  249.     Image dbImg;
  250.     int pixls;
  251.     int pixls2;
  252.     Random rand;
  253.     int bits;
  254.     double bit_px[];
  255.     double bit_py[];
  256.     double bit_vx[];
  257.     double bit_vy[];
  258.     int bit_sx[];
  259.     int bit_sy[];
  260.     int bit_l[];
  261.     int bit_f[];
  262.     int bit_p[];
  263.     int bit_c[];
  264.     int bit_max;
  265.     int bit_sound;
  266.     int ru;
  267.     int rv;
  268.     AudioClip sound1;
  269.     AudioClip sound2;
  270. }

H5用canvas放烟花的更多相关文章

  1. Canvas 放烟花合集 -- 用粉丝头像做成烟花绽放🧨

    "我对着烟花许愿,希望你永远在我身边" "凑不够满天星辰那就去看看烟花吧,人间烟火气,最抚凡人心" 小tips:喜欢的可以关注博主私信代码噢~ 也可以看看前面两 ...

  2. h5标签canvas关于getImageData跨域的问题

    h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

  3. 关于h5绘制canvas生成图片的注意点！

    1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...

  4. win10 uwp 在 Canvas 放一个超过大小的元素会不会被裁剪

    我尝试在一个宽度200高度200的 Canvas 放了一个宽度 300 高度 300 的元素,这个元素会不会被 Canvas 裁剪了? 经过我的测试,发现默认是不会被裁剪 火火问了我一个问题,如果有一 ...

  5. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  6. H5使用Canvas绘图

    一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...

  7. 关于H5的Canvas

    1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...

  8. JQuery和html+css实现鼠标点击放烟花

    <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...

  9. 用H5的canvas做时钟

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>D ...

  10. H5 认识canvas

    不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. canvas提供了三 ...

随机推荐

  1. 2021-04-02：给定一个正方形或者长方形矩阵matrix，实现zigzag打印。[[0,1,2],[3,4,5],[6,7,8]]的打印顺序是0,1,3,6,4,2,5,7,8。

    2021-04-02:给定一个正方形或者长方形矩阵matrix,实现zigzag打印.[[0,1,2],[3,4,5],[6,7,8]]的打印顺序是0,1,3,6,4,2,5,7,8. 福大大 答案2 ...

  2. 沁恒 CH32V208(五): CH32V208 运行FreeRTOS示例的说明

    目录 沁恒 CH32V208(一): CH32V208WBU6 评估板上手报告和Win10环境配置 沁恒 CH32V208(二): CH32V208的储存结构, 启动模式和时钟 沁恒 CH32V208 ...

  3. 【GiraKoo】Git工具使用指南

    Git工具使用指南 Git是一个分布式版本控制工具,可以用于管理代码.本文介绍了如何使用git工具. 1. SVN和Git的区别 1.1 SVN SVN是集中式版本控制工具,所有的代码都存储在一个中央 ...

  4. CMD 常用命令总结

    CMD 常用命令总结 小技巧: 输入 help,查看帮助: Tab 键,自动补全: 上/下方向键,查看历史命令: 右键窗口标题栏 -> 属性,可以修改外观样式. # 关机.重启.注销.休眠.定时 ...

  5. 企业研发效能度量利器，华为云发布CodeArts Board看板服务

    摘要:华为云CodeArts Board正式上线,欢迎体验. 本文分享自华为云社区<企业研发效能度量利器,华为云发布CodeArts Board看板服务>,作者:华为云头条. 数字化时代, ...

  6. Python潮流周刊#3：PyPI 的安全问题

    你好,我是豌豆花下猫.这里记录每周值得分享的 Python 及通用技术内容,部分为英文,已在小标题注明.(标题取自其中一则分享,不代表全部内容都是该主题,特此声明.) 文章&教程 1.掌握Py ...

  7. jquery页面搜索关键词突出显示

    页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(".list_r").find('span').css({ // 每次搜索开始,先把所有字体颜色恢 ...

  8. 基于 Dash Bio 的生物信息学数据可视化

    Dash 是用于搭建响应式 Web 应用的 Python 开源库.Dash Bio 是面向生物信息学,且与 Dash 兼容的组件,它可以将生物信息学领域中常见的数据整合到 Dash 应用程序,以实现响 ...

  9. day09-SpringCloud Sleuth+Zipkin-链路追踪

    SpringCloud Sleuth+Zipkin-链路追踪 官网:spring-cloud/spring-cloud-sleuth: Distributed tracing for spring c ...

  10. 3. docker的实践玩法

    1. docker的进程架构 docker服务进程:就是针对docker服务的命令,启动,重启 接口:通过参数指定容器的IP和端口,实现对容器的远程操作 客户端命令行:对docker的操作命令 最后学 ...