devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

2023跨年代码（烟花+自定义文字+背景音乐+雪花+倒计时）_2024年跨年代码

作者：小小林熬夜学编程 | 2024-02-28 00:36:08

赞

踩

2024年跨年代码

 2023年快要到来啦，很高兴这次我们又能一起度过~

b40cd513233542378ffc663941a495ad.jpeg

 

 

目录

一、前言

二、跨年烟花

三、效果展示

倒计时

 2023​编辑

 兔圆圆​编辑

四、编码实现

index.html

 烟花，雪花，背景音乐，页面样式

index.js 

 自定义文字

五、获取代码

需要源码，可以私信我(⊙o⊙)？

 

一、前言

时光荏苒，白驹过隙。

2022这一年又在忙碌中度过了，过去的一年，我们同努力，我们共欢笑，每一次成功都蕴藏着我们辛勤的劳动。

新的一年即将来到，我们不能停滞不前，一味只是骄傲。愿大家与时俱进，拼搏不懈，共创新的辉煌！

借着新年到来的喜庆，给大家分享一个新年烟花的前端代码，快拿着代码展示给你的朋友们看吧！！

转眼间已经到了2022的尾巴，这一年对于国家来说丰富充实,冬奥会在北京举行、中国共产党第二十次全国代表大会召开、社会共同抗击疫情的第三年、我国完成天宫空间站建造……对于我们每一个个体，2022也承载着我们的快乐与悲伤，它是无法替代的。

新的一年马上就要到了，让我们告别2022，迎接2023！

希望2023,全糖去冰。

二、跨年烟花

本文是一篇简单的前端代码，主要内容有HTML，JS，CSS等内容

1、HTML代码

2、JS代码

3、CSS样式

4、插件等

5、可根据需求自定义文字

6、背景音乐

7、倒计时

三、效果展示

文末有完整代码，只需要下载压缩包，解压运行即可。接下来我们一起来看看效果吧！！！

倒计时

7f19ec0c9b4748e3b24ce11ac529420d.png

 

 202360136e19e0ec42f6822620baab4bab8b.png

 

 兔圆圆a2caa860766e409bbe59312123e98a07.png

 包含背景音乐，自定义文字，倒计时等

 

四、编码实现

 

index.html

 

 烟花，雪花，背景音乐，页面样式

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>时光荏苒，白驹过隙！</title>
  6.  
  7.     <style>
  8.       html,
  9.       body {
  10.         margin: 0px;
  11.         width: 100%;
  12.         height: 100%;
  13.         overflow: hidden;
  14.         background: #000;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <canvas
  20.       id="canvas"
  21.       style="position: absolute; width: 100%; height: 100%; z-index: 8888"
  22.     ></canvas>
  23.     <canvas
  24.       style="position: absolute; width: 100%; height: 100%; z-index: 9999"
  25.       class="canvas"
  26.     ></canvas>
  27.     <div class="overlay">
  28.       <div class="tabs">
  29.         <div class="tabs-labels">
  30.           <span class="tabs-label">Commands</span
  31.           ><span class="tabs-label">Info</span
  32.           ><span class="tabs-label">Share</span>
  33.         </div>
  34.  
  35.         <div class="tabs-panels">
  36.           <ul class="tabs-panel commands"></ul>
  37.         </div>
  38.       </div>
  39.     </div>
  40.     <script>
  41.       function initVars() {
  42.         pi = Math.PI;
  43.         ctx = canvas.getContext("2d");
  44.         canvas.width = canvas.clientWidth;
  45.         canvas.height = canvas.clientHeight;
  46.         cx = canvas.width / 2;
  47.         cy = canvas.height / 2;
  48.         playerZ = -25;
  49.         playerX =
  50.           playerY =
  51.           playerVX =
  52.           playerVY =
  53.           playerVZ =
  54.           pitch =
  55.           yaw =
  56.           pitchV =
  57.           yawV =
  58.             0;
  59.         scale = 600;
  60.         seedTimer = 0;
  61.         (seedInterval = 5), (seedLife = 100);
  62.         gravity = 0.02;
  63.         seeds = new Array();
  64.         sparkPics = new Array();
  65.         s = "https://cantelope.org/NYE/";
  66.         for (i = 1; i <= 10; ++i) {
  67.           sparkPic = new Image();
  68.           sparkPic.src = s + "spark" + i + ".png";
  69.           sparkPics.push(sparkPic);
  70.         }
  71.         sparks = new Array();
  72.         pow1 = new Audio(s + "pow1.ogg");
  73.         pow2 = new Audio(s + "pow2.ogg");
  74.         pow3 = new Audio(s + "pow3.ogg");
  75.         pow4 = new Audio(s + "pow4.ogg");
  76.         frames = 0;
  77.       }
  78.  
  79.       function rasterizePoint(x, y, z) {
  80.         var p, d;
  81.         x -= playerX;
  82.         y -= playerY;
  83.         z -= playerZ;
  84.         p = Math.atan2(x, z);
  85.         d = Math.sqrt(x * x + z * z);
  86.         x = Math.sin(p - yaw) * d;
  87.         z = Math.cos(p - yaw) * d;
  88.         p = Math.atan2(y, z);
  89.         d = Math.sqrt(y * y + z * z);
  90.         y = Math.sin(p - pitch) * d;
  91.         z = Math.cos(p - pitch) * d;
  92.         var rx1 = -1000,
  93.           ry1 = 1,
  94.           rx2 = 1000,
  95.           ry2 = 1,
  96.           rx3 = 0,
  97.           ry3 = 0,
  98.           rx4 = x,
  99.           ry4 = z,
  100.           uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);
  101.         if (!uc) return { x: 0, y: 0, d: -1 };
  102.         var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;
  103.         var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;
  104.         if (!z) z = 0.000000001;
  105.         if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {
  106.           return {
  107.             x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
  108.             y: cy + (y / z) * scale,
  109.             d: Math.sqrt(x * x + y * y + z * z),
  110.           };
  111.         } else {
  112.           return {
  113.             x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
  114.             y: cy + (y / z) * scale,
  115.             d: -1,
  116.           };
  117.         }
  118.       }
  119.  
  120.       function spawnSeed() {
  121.         seed = new Object();
  122.         seed.x = -50 + Math.random() * 100;
  123.         seed.y = 25;
  124.         seed.z = -50 + Math.random() * 100;
  125.         seed.vx = 0.1 - Math.random() * 0.2;
  126.         seed.vy = -1.5; //*(1+Math.random()/2);
  127.         seed.vz = 0.1 - Math.random() * 0.2;
  128.         seed.born = frames;
  129.         seeds.push(seed);
  130.       }
  131.  
  132.       function splode(x, y, z) {
  133.         t = 5 + parseInt(Math.random() * 150);
  134.         sparkV = 1 + Math.random() * 2.5;
  135.         type = parseInt(Math.random() * 3);
  136.         switch (type) {
  137.           case 0:
  138.             pic1 = parseInt(Math.random() * 10);
  139.             break;
  140.           case 1:
  141.             pic1 = parseInt(Math.random() * 10);
  142.             do {
  143.               pic2 = parseInt(Math.random() * 10);
  144.             } while (pic2 == pic1);
  145.             break;
  146.           case 2:
  147.             pic1 = parseInt(Math.random() * 10);
  148.             do {
  149.               pic2 = parseInt(Math.random() * 10);
  150.             } while (pic2 == pic1);
  151.             do {
  152.               pic3 = parseInt(Math.random() * 10);
  153.             } while (pic3 == pic1 || pic3 == pic2);
  154.             break;
  155.         }
  156.         for (m = 1; m < t; ++m) {
  157.           spark = new Object();
  158.           spark.x = x;
  159.           spark.y = y;
  160.           spark.z = z;
  161.           p1 = pi * 2 * Math.random();
  162.           p2 = pi * Math.random();
  163.           v = sparkV * (1 + Math.random() / 6);
  164.           spark.vx = Math.sin(p1) * Math.sin(p2) * v;
  165.           spark.vz = Math.cos(p1) * Math.sin(p2) * v;
  166.           spark.vy = Math.cos(p2) * v;
  167.           switch (type) {
  168.             case 0:
  169.               spark.img = sparkPics[pic1];
  170.               break;
  171.             case 1:
  172.               spark.img = sparkPics[parseInt(Math.random() * 2) ? pic1 : pic2];
  173.               break;
  174.             case 2:
  175.               switch (parseInt(Math.random() * 3)) {
  176.                 case 0:
  177.                   spark.img = sparkPics[pic1];
  178.                   break;
  179.                 case 1:
  180.                   spark.img = sparkPics[pic2];
  181.                   break;
  182.                 case 2:
  183.                   spark.img = sparkPics[pic3];
  184.                   break;
  185.               }
  186.               break;
  187.           }
  188.           spark.radius = 25 + Math.random() * 50;
  189.           spark.alpha = 1;
  190.           spark.trail = new Array();
  191.           sparks.push(spark);
  192.         }
  193.         switch (parseInt(Math.random() * 4)) {
  194.           case 0:
  195.             pow = new Audio(s + "pow1.ogg");
  196.             break;
  197.           case 1:
  198.             pow = new Audio(s + "pow2.ogg");
  199.             break;
  200.           case 2:
  201.             pow = new Audio(s + "pow3.ogg");
  202.             break;
  203.           case 3:
  204.             pow = new Audio(s + "pow4.ogg");
  205.             break;
  206.         }
  207.         d = Math.sqrt(
  208.           (x - playerX) * (x - playerX) +
  209.             (y - playerY) * (y - playerY) +
  210.             (z - playerZ) * (z - playerZ)
  211.         );
  212.         pow.volume = 1.5 / (1 + d / 10);
  213.         pow.play();
  214.       }
  215.  
  216.       function doLogic() {
  217.         if (seedTimer < frames) {
  218.           seedTimer = frames + seedInterval * Math.random() * 10;
  219.           spawnSeed();
  220.         }
  221.         for (i = 0; i < seeds.length; ++i) {
  222.           seeds[i].vy += gravity;
  223.           seeds[i].x += seeds[i].vx;
  224.           seeds[i].y += seeds[i].vy;
  225.           seeds[i].z += seeds[i].vz;
  226.           if (frames - seeds[i].born > seedLife) {
  227.             splode(seeds[i].x, seeds[i].y, seeds[i].z);
  228.             seeds.splice(i, 1);
  229.           }
  230.         }
  231.         for (i = 0; i < sparks.length; ++i) {
  232.           if (sparks[i].alpha > 0 && sparks[i].radius > 5) {
  233.             sparks[i].alpha -= 0.01;
  234.             sparks[i].radius /= 1.02;
  235.             sparks[i].vy += gravity;
  236.             point = new Object();
  237.             point.x = sparks[i].x;
  238.             point.y = sparks[i].y;
  239.             point.z = sparks[i].z;
  240.             if (sparks[i].trail.length) {
  241.               x = sparks[i].trail[sparks[i].trail.length - 1].x;
  242.               y = sparks[i].trail[sparks[i].trail.length - 1].y;
  243.               z = sparks[i].trail[sparks[i].trail.length - 1].z;
  244.               d =
  245.                 (point.x - x) * (point.x - x) +
  246.                 (point.y - y) * (point.y - y) +
  247.                 (point.z - z) * (point.z - z);
  248.               if (d > 9) {
  249.                 sparks[i].trail.push(point);
  250.               }
  251.             } else {
  252.               sparks[i].trail.push(point);
  253.             }
  254.             if (sparks[i].trail.length > 5) sparks[i].trail.splice(0, 1);
  255.             sparks[i].x += sparks[i].vx;
  256.             sparks[i].y += sparks[i].vy;
  257.             sparks[i].z += sparks[i].vz;
  258.             sparks[i].vx /= 1.075;
  259.             sparks[i].vy /= 1.075;
  260.             sparks[i].vz /= 1.075;
  261.           } else {
  262.             sparks.splice(i, 1);
  263.           }
  264.         }
  265.         p = Math.atan2(playerX, playerZ);
  266.         d = Math.sqrt(playerX * playerX + playerZ * playerZ);
  267.         d += Math.sin(frames / 80) / 1.25;
  268.         t = Math.sin(frames / 200) / 40;
  269.         playerX = Math.sin(p + t) * d;
  270.         playerZ = Math.cos(p + t) * d;
  271.         yaw = pi + p + t;
  272.       }
  273.  
  274.       function rgb(col) {
  275.         var r = parseInt((0.5 + Math.sin(col) * 0.5) * 16);
  276.         var g = parseInt((0.5 + Math.cos(col) * 0.5) * 16);
  277.         var b = parseInt((0.5 - Math.sin(col) * 0.5) * 16);
  278.         return "#" + r.toString(16) + g.toString(16) + b.toString(16);
  279.       }
  280.  
  281.       function draw() {
  282.         ctx.clearRect(0, 0, cx * 2, cy * 2);
  283.  
  284.         ctx.fillStyle = "#ff8";
  285.         for (i = -100; i < 100; i += 3) {
  286.           for (j = -100; j < 100; j += 4) {
  287.             x = i;
  288.             z = j;
  289.             y = 25;
  290.             point = rasterizePoint(x, y, z);
  291.             if (point.d != -1) {
  292.               size = 250 / (1 + point.d);
  293.               d = Math.sqrt(x * x + z * z);
  294.               a = 0.75 - Math.pow(d / 100, 6) * 0.75;
  295.               if (a > 0) {
  296.                 ctx.globalAlpha = a;
  297.                 ctx.fillRect(
  298.                   point.x - size / 2,
  299.                   point.y - size / 2,
  300.                   size,
  301.                   size
  302.                 );
  303.               }
  304.             }
  305.           }
  306.         }
  307.         ctx.globalAlpha = 1;
  308.         for (i = 0; i < seeds.length; ++i) {
  309.           point = rasterizePoint(seeds[i].x, seeds[i].y, seeds[i].z);
  310.           if (point.d != -1) {
  311.             size = 200 / (1 + point.d);
  312.             ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
  313.           }
  314.         }
  315.         point1 = new Object();
  316.         for (i = 0; i < sparks.length; ++i) {
  317.           point = rasterizePoint(sparks[i].x, sparks[i].y, sparks[i].z);
  318.           if (point.d != -1) {
  319.             size = (sparks[i].radius * 200) / (1 + point.d);
  320.             if (sparks[i].alpha < 0) sparks[i].alpha = 0;
  321.             if (sparks[i].trail.length) {
  322.               point1.x = point.x;
  323.               point1.y = point.y;
  324.               switch (sparks[i].img) {
  325.                 case sparkPics[0]:
  326.                   ctx.strokeStyle = "#f84";
  327.                   break;
  328.                 case sparkPics[1]:
  329.                   ctx.strokeStyle = "#84f";
  330.                   break;
  331.                 case sparkPics[2]:
  332.                   ctx.strokeStyle = "#8ff";
  333.                   break;
  334.                 case sparkPics[3]:
  335.                   ctx.strokeStyle = "#fff";
  336.                   break;
  337.                 case sparkPics[4]:
  338.                   ctx.strokeStyle = "#4f8";
  339.                   break;
  340.                 case sparkPics[5]:
  341.                   ctx.strokeStyle = "#f44";
  342.                   break;
  343.                 case sparkPics[6]:
  344.                   ctx.strokeStyle = "#f84";
  345.                   break;
  346.                 case sparkPics[7]:
  347.                   ctx.strokeStyle = "#84f";
  348.                   break;
  349.                 case sparkPics[8]:
  350.                   ctx.strokeStyle = "#fff";
  351.                   break;
  352.                 case sparkPics[9]:
  353.                   ctx.strokeStyle = "#44f";
  354.                   break;
  355.               }
  356.               for (j = sparks[i].trail.length - 1; j >= 0; --j) {
  357.                 point2 = rasterizePoint(
  358.                   sparks[i].trail[j].x,
  359.                   sparks[i].trail[j].y,
  360.                   sparks[i].trail[j].z
  361.                 );
  362.                 if (point2.d != -1) {
  363.                   ctx.globalAlpha =
  364.                     ((j / sparks[i].trail.length) * sparks[i].alpha) / 2;
  365.                   ctx.beginPath();
  366.                   ctx.moveTo(point1.x, point1.y);
  367.                   ctx.lineWidth =
  368.                     1 +
  369.                     (sparks[i].radius * 10) /
  370.                       (sparks[i].trail.length - j) /
  371.                       (1 + point2.d);
  372.                   ctx.lineTo(point2.x, point2.y);
  373.                   ctx.stroke();
  374.                   point1.x = point2.x;
  375.                   point1.y = point2.y;
  376.                 }
  377.               }
  378.             }
  379.             ctx.globalAlpha = sparks[i].alpha;
  380.             ctx.drawImage(
  381.               sparks[i].img,
  382.               point.x - size / 2,
  383.               point.y - size / 2,
  384.               size,
  385.               size
  386.             );
  387.           }
  388.         }
  389.       }
  390.  
  391.       function frame() {
  392.         if (frames > 100000) {
  393.           seedTimer = 0;
  394.           frames = 0;
  395.         }
  396.         frames++;
  397.         draw();
  398.         doLogic();
  399.         requestAnimationFrame(frame);
  400.       }
  401.  
  402.       window.addEventListener("resize", () => {
  403.         canvas.width = canvas.clientWidth;
  404.         canvas.height = canvas.clientHeight;
  405.         cx = canvas.width / 2;
  406.         cy = canvas.height / 2;
  407.       });
  408.  
  409.       initVars();
  410.       frame();
  411.     </script>
  412.     <script src="js/index.js"></script>
  413.     <div id="page_end_html">
  414.       <!--放大图片-->
  415.       <link
  416.         rel="stylesheet"
  417.         type="text/css"
  418.         href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css"
  419.       />
  420.       <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  421.       <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
  422.       <script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script>
  423.       <script type="text/javascript">
  424.         $("#cnblogs_post_body img").attr("data-action", "zoom");
  425.       </script>
  426.       <!--放大图片end-->
  427.     
  428.       <!--鼠标特效-->
  429.       <script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
  430.       <canvas
  431.         width="1777"
  432.         height="841"
  433.         style="
  434.           position: fixed;
  435.           left: 0px;
  436.           top: 0px;
  437.           z-index: 2147483647;
  438.           pointer-events: none;
  439.         "
  440.       ></canvas>
  441.       <!--鼠标特效 end-->
  442.       <!-- require APlayer -->
  443.       <link
  444.         rel="stylesheet"
  445.         href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"
  446.       />
  447.       <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
  448.       <!-- require MetingJS -->
  449.       <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
  450.     
  451.       <!-- // 随机线条 -->
  452.       <script>
  453.         !(function () {
  454.           function n(n, e, t) {
  455.             return n.getAttribute(e) || t;
  456.           }
  457.           function e(n) {
  458.             return document.getElementsByTagName(n);
  459.           }
  460.           function t() {
  461.             var t = e("script"),
  462.               o = t.length,
  463.               i = t[o - 1];
  464.             return {
  465.               l: o,
  466.               z: n(i, "zIndex", -1),
  467.               o: n(i, "opacity", 0.6),
  468.               c: n(i, "color", "148,0,211"),
  469.               n: n(i, "count", 99),
  470.             };
  471.           }
  472.           function o() {
  473.             (a = m.width =
  474.               window.innerWidth ||
  475.               document.documentElement.clientWidth ||
  476.               document.body.clientWidth),
  477.               (c = m.height =
  478.                 window.innerHeight ||
  479.                 document.documentElement.clientHeight ||
  480.                 document.body.clientHeight);
  481.           }
  482.           function i() {
  483.             r.clearRect(0, 0, a, c);
  484.             var n, e, t, o, m, l;
  485.             s.forEach(function (i, x) {
  486.               for (
  487.                 i.x += i.xa,
  488.                   i.y += i.ya,
  489.                   i.xa *= i.x > a || i.x < 0 ? -1 : 1,
  490.                   i.ya *= i.y > c || i.y < 0 ? -1 : 1,
  491.                   r.fillRect(i.x - 0.5, i.y - 0.5, 1, 1),
  492.                   e = x + 1;
  493.                 e < u.length;
  494.                 e++
  495.               )
  496.                 (n = u[e]),
  497.                   null !== n.x &&
  498.                     null !== n.y &&
  499.                     ((o = i.x - n.x),
  500.                     (m = i.y - n.y),
  501.                     (l = o * o + m * m),
  502.                     l < n.max &&
  503.                       (n === y &&
  504.                         l >= n.max / 2 &&
  505.                         ((i.x -= 0.03 * o), (i.y -= 0.03 * m)),
  506.                       (t = (n.max - l) / n.max),
  507.                       r.beginPath(),
  508.                       (r.lineWidth = t / 2),
  509.                       (r.strokeStyle = "rgba(" + d.c + "," + (t + 0.2) + ")"),
  510.                       r.moveTo(i.x, i.y),
  511.                       r.lineTo(n.x, n.y),
  512.                       r.stroke()));
  513.             }),
  514.               x(i);
  515.           }
  516.           var a,
  517.             c,
  518.             u,
  519.             m = document.createElement("canvas"),
  520.             d = t(),
  521.             l = "c_n" + d.l,
  522.             r = m.getContext("2d"),
  523.             x =
  524.               window.requestAnimationFrame ||
  525.               window.webkitRequestAnimationFrame ||
  526.               window.mozRequestAnimationFrame ||
  527.               window.oRequestAnimationFrame ||
  528.               window.msRequestAnimationFrame ||
  529.               function (n) {
  530.                 window.setTimeout(n, 1e3 / 45);
  531.               },
  532.             w = Math.random,
  533.             y = { x: null, y: null, max: 2e4 };
  534.           (m.id = l),
  535.             (m.style.cssText =
  536.               "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o),
  537.             e("body")[0].appendChild(m),
  538.             o(),
  539.             (window.onresize = o),
  540.             (window.onmousemove = function (n) {
  541.               (n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);
  542.             }),
  543.             (window.onmouseout = function () {
  544.               (y.x = null), (y.y = null);
  545.             });
  546.           for (var s = [], f = 0; d.n > f; f++) {
  547.             var h = w() * a,
  548.               g = w() * c,
  549.               v = 2 * w() - 1,
  550.               p = 2 * w() - 1;
  551.             s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 });
  552.           }
  553.           (u = s.concat([y])),
  554.             setTimeout(function () {
  555.               i();
  556.             }, 100);
  557.         })();
  558.       </script>
  559.     
  560.       <!-- 雪花特效 -->
  561.       <script type="text/javascript">
  562.         (function ($) {
  563.           $.fn.snow = function (options) {
  564.             var $flake = $('<div id="snowbox" />')
  565.                 .css({ position: "absolute", "z-index": "9999", top: "-50px" })
  566.                 .html("❄"),
  567.               documentHeight = $(document).height(),
  568.               documentWidth = $(document).width(),
  569.               defaults = {
  570.                 minSize: 10,
  571.                 maxSize: 20,
  572.                 newOn: 1000,
  573.                 flakeColor:
  574.                   "#00CED1" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */,
  575.               },
  576.               options = $.extend({}, defaults, options);
  577.             var interval = setInterval(function () {
  578.               var startPositionLeft = Math.random() * documentWidth - 100,
  579.                 startOpacity = 0.5 + Math.random(),
  580.                 sizeFlake = options.minSize + Math.random() * options.maxSize,
  581.                 endPositionTop = documentHeight - 200,
  582.                 endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
  583.                 durationFall = documentHeight * 10 + Math.random() * 5000;
  584.               $flake
  585.                 .clone()
  586.                 .appendTo("body")
  587.                 .css({
  588.                   left: startPositionLeft,
  589.                   opacity: startOpacity,
  590.                   "font-size": sizeFlake,
  591.                   color: options.flakeColor,
  592.                 })
  593.                 .animate(
  594.                   {
  595.                     top: endPositionTop,
  596.                     left: endPositionLeft,
  597.                     opacity: 0.2,
  598.                   },
  599.                   durationFall,
  600.                   "linear",
  601.                   function () {
  602.                     $(this).remove();
  603.                   }
  604.                 );
  605.             }, options.newOn);
  606.           };
  607.         })(jQuery);
  608.         $(function () {
  609.           $.fn.snow({
  610.             minSize: 5 /* 定义雪花最小尺寸 */,
  611.             maxSize: 80 /* 定义雪花最大尺寸 */,
  612.             newOn: 200 /* 定义密集程度，数字越小越密集 */,
  613.           });
  614.         });
  615.       </script>
  616.   </body>
  617. </html>

 

index.js 

 

 自定义文字

  1.  
  2.  
  3. var S = {
  4.   init: function () {
  5.     var action = window.location.href,
  6.         i = action.indexOf('?a=');
  7.  
  8.     S.Drawing.init('.canvas');
  9.     document.body.classList.add('body--ready');
  10.  
  11.     if (i !== -1) {
  12.       S.UI.simulate(decodeURI(action).substring(i + 3));
  13.     } else {
  14.       S.UI.simulate('|#countdown 3||2023|兔圆圆||#rectangle|');
  15.       // S.UI.simulate('|写|尽|千|山|落|笔|是|你|#rectangle|');
  16.     }
  17.  
  18.     S.Drawing.loop(function () {
  19.       S.Shape.render();
  20.     });
  21.   }
  22. };
  23.  
  24.  
  25. S.Drawing = (function () {
  26.   var canvas,
  27.       context,
  28.       renderFn
  29.       requestFrame = window.requestAnimationFrame       ||
  30.                      window.webkitRequestAnimationFrame ||
  31.                      window.mozRequestAnimationFrame    ||
  32.                      window.oRequestAnimationFrame      ||
  33.                      window.msRequestAnimationFrame     ||
  34.                      function(callback) {
  35.                        window.setTimeout(callback, 1000 / 60);
  36.                      };
  37.  
  38.   return {
  39.     init: function (el) {
  40.       canvas = document.querySelector(el);
  41.       context = canvas.getContext('2d');
  42.       this.adjustCanvas();
  43.  
  44.       window.addEventListener('resize', function (e) {
  45.         S.Drawing.adjustCanvas();
  46.       });
  47.     },
  48.  
  49.     loop: function (fn) {
  50.       renderFn = !renderFn ? fn : renderFn;
  51.       this.clearFrame();
  52.       renderFn();
  53.       requestFrame.call(window, this.loop.bind(this));
  54.     },
  55.  
  56.     adjustCanvas: function () {
  57.       canvas.width = window.innerWidth;
  58.       canvas.height = window.innerHeight;
  59.     },
  60.  
  61.     clearFrame: function () {
  62.       context.clearRect(0, 0, canvas.width, canvas.height);
  63.     },
  64.  
  65.     getArea: function () {
  66.       return { w: canvas.width, h: canvas.height };
  67.     },
  68.  
  69.     drawCircle: function (p, c) {
  70.       context.fillStyle = c.render();
  71.       context.beginPath();
  72.       context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
  73.       context.closePath();
  74.       context.fill();
  75.     }
  76.   }
  77. }());
  78.  
  79.  
  80. S.UI = (function () {
  81.   var canvas = document.querySelector('.canvas'),
  82.       interval,
  83.       isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints),
  84.       currentAction,
  85.       resizeTimer,
  86.       time,
  87.       maxShapeSize = 30,
  88.       firstAction = true,
  89.       sequence = [],
  90.       cmd = '#';
  91.  
  92.   function formatTime(date) {
  93.     var h = date.getHours(),
  94.         m = date.getMinutes(),
  95.     m = m < 10 ? '0' + m : m;
  96.     return h + ':' + m;
  97.   }
  99.   function getValue(value) {
  100.     return value && value.split(' ')[1];
  101.   }
  103.   function getAction(value) {
  104.     value = value && value.split(' ')[0];
  105.     return value && value[0] === cmd && value.substring(1);
  106.   }
  108.   function timedAction(fn, delay, max, reverse) {
  109.     clearInterval(interval);
  110.     currentAction = reverse ? max : 1;
  111.     fn(currentAction);
  113.     if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
  114.       interval = setInterval(function () {
  115.         currentAction = reverse ? currentAction - 1 : currentAction + 1;
  116.         fn(currentAction);
  118.         if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
  119.           clearInterval(interval);
  120.         }
  121.       }, delay);
  122.     }
  123.   }
  125.   function reset(destroy) {
  126.     clearInterval(interval);
  127.     sequence = [];
  128.     time = null;
  129.     destroy && S.Shape.switchShape(S.ShapeBuilder.letter(''));
  130.   }
  132.   function performAction(value) {
  133.     var action,
  134.         value,
  135.         current;
  137.     // overlay.classList.remove('overlay--visible');
  138.     sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|'));
  139.     // input.value = '';
  140.     // checkInputWidth();
  142.     timedAction(function (index) {
  143.       current = sequence.shift();
  144.       action = getAction(current);
  145.       value = getValue(current);
  147.       switch (action) {
  148.         case 'countdown':
  149.           value = parseInt(value) || 10;
  150.           value = value > 0 ? value : 10;
  152.           timedAction(function (index) {
  153.             if (index === 0) {
  154.               if (sequence.length === 0) {
  155.                 S.Shape.switchShape(S.ShapeBuilder.letter(''));
  156.               } else {
  157.                 performAction(sequence);
  158.               }
  159.             } else {
  160.               S.Shape.switchShape(S.ShapeBuilder.letter(index), true);
  161.             }
  162.           }, 1000, value, true);
  163.           break;
  165.         case 'rectangle':
  166.           value = value && value.split('x');
  167.           value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];
  169.           S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1]))));
  170.           break;
  172.         case 'circle':
  173.           value = parseInt(value) || maxShapeSize;
  174.           value = Math.min(value, maxShapeSize);
  175.           S.Shape.switchShape(S.ShapeBuilder.circle(value));
  176.           break;
  178.         case 'time':
  179.           var t = formatTime(new Date());
  181.           if (sequence.length > 0) {
  182.             S.Shape.switchShape(S.ShapeBuilder.letter(t));
  183.           } else {
  184.             timedAction(function () {
  185.               t = formatTime(new Date());
  186.               if (t !== time) {
  187.                 time = t;
  188.                 S.Shape.switchShape(S.ShapeBuilder.letter(time));
  189.               }
  190.             }, 1000);
  191.           }
  192.           break;
  194.         default:
  195.           S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current));
  196.       }
  197.     }, 2000, sequence.length);
  198.   }
  200.   function checkInputWidth(e) {
  201.     if (input.value.length > 18) {
  202.       ui.classList.add('ui--wide');
  203.     } else {
  204.       ui.classList.remove('ui--wide');
  205.     }
  207.     if (firstAction && input.value.length > 0) {
  208.       ui.classList.add('ui--enter');
  209.     } else {
  210.       ui.classList.remove('ui--enter');
  211.     }
  212.   }
  214.   function bindEvents() {
  215.     document.body.addEventListener('keydown', function (e) {
  216.       input.focus();
  218.       if (e.keyCode === 13) {
  219.         firstAction = false;
  220.         reset();
  221.         performAction(input.value);
  222.       }
  223.     });
  225.     canvas.addEventListener('click', function (e) {
  226.       overlay.classList.remove('overlay--visible');
  227.     });
  228.   }
  230.   function init() {
  231.     bindEvents();
  232.     // input.focus();
  233.     isTouch && document.body.classList.add('touch');
  234.   }
  236.   // Init
  237.   init();
  239.   return {
  240.     simulate: function (action) {
  241.       performAction(action);
  242.     }
  243.   }
  244. }());
  247. S.UI.Tabs = (function () {
  248.   var tabs = document.querySelector('.tabs'),
  249.       labels = document.querySelector('.tabs-labels'),
  250.       triggers = document.querySelectorAll('.tabs-label'),
  251.       panels = document.querySelectorAll('.tabs-panel');
  253.   function activate(i) {
  254.     triggers[i].classList.add('tabs-label--active');
  255.     panels[i].classList.add('tabs-panel--active');
  256.   }
  258.   function bindEvents() {
  259.     labels.addEventListener('click', function (e) {
  260.       var el = e.target,
  261.           index;
  263.       if (el.classList.contains('tabs-label')) {
  264.         for (var t = 0; t < triggers.length; t++) {
  265.           triggers[t].classList.remove('tabs-label--active');
  266.           panels[t].classList.remove('tabs-panel--active');
  268.           if (el === triggers[t]) {
  269.             index = t;
  270.           }
  271.         }
  273.         activate(index);
  274.       }
  275.     });
  276.   }
  278.   function init() {
  279.     activate(0);
  280.     bindEvents();
  281.   }
  283.   // Init
  284.   init();
  285. }());
  288. S.Point = function (args) {
  289.   this.x = args.x;
  290.   this.y = args.y;
  291.   this.z = args.z;
  292.   this.a = args.a;
  293.   this.h = args.h;
  294. };
  297. S.Color = function (r, g, b, a) {
  298.   this.r = r;
  299.   this.g = g;
  300.   this.b = b;
  301.   this.a = a;
  302. };
  304. S.Color.prototype = {
  305.   render: function () {
  306.     return 'rgba(' + this.r + ',' +  + this.g + ',' + this.b + ',' + this.a + ')';
  307.   }
  308. };
  311. S.Dot = function (x, y) {
  312.   this.p = new S.Point({
  313.     x: x,
  314.     y: y,
  315.     z: 5,
  316.     a: 1,
  317.     h: 0
  318.   });
  320.   this.e = 0.07;
  321.   this.s = true;
  323.   this.c = new S.Color(255, 255, 255, this.p.a);
  325.   this.t = this.clone();
  326.   this.q = [];
  327. };
  329. S.Dot.prototype = {
  330.   clone: function () {
  331.     return new S.Point({
  332.       x: this.x,
  333.       y: this.y,
  334.       z: this.z,
  335.       a: this.a,
  336.       h: this.h
  337.     });
  338.   },
  340.   _draw: function () {
  341.     this.c.a = this.p.a;
  342.     S.Drawing.drawCircle(this.p, this.c);
  343.   },
  345.   _moveTowards: function (n) {
  346.     var details = this.distanceTo(n, true),
  347.         dx = details[0],
  348.         dy = details[1],
  349.         d = details[2],
  350.         e = this.e * d;
  352.     if (this.p.h === -1) {
  353.       this.p.x = n.x;
  354.       this.p.y = n.y;
  355.       return true;
  356.     }
  358.     if (d > 1) {
  359.       this.p.x -= ((dx / d) * e);
  360.       this.p.y -= ((dy / d) * e);
  361.     } else {
  362.       if (this.p.h > 0) {
  363.         this.p.h--;
  364.       } else {
  365.         return true;
  366.       }
  367.     }
  369.     return false;
  370.   },
  372.   _update: function () {
  373.     if (this._moveTowards(this.t)) {
  374.       var p = this.q.shift();
  376.       if (p) {
  377.         this.t.x = p.x || this.p.x;
  378.         this.t.y = p.y || this.p.y;
  379.         this.t.z = p.z || this.p.z;
  380.         this.t.a = p.a || this.p.a;
  381.         this.p.h = p.h || 0;
  382.       } else {
  383.         if (this.s) {
  384.           this.p.x -= Math.sin(Math.random() * 3.142);
  385.           this.p.y -= Math.sin(Math.random() * 3.142);
  386.         } else {
  387.           this.move(new S.Point({
  388.             x: this.p.x + (Math.random() * 50) - 25,
  389.             y: this.p.y + (Math.random() * 50) - 25,
  390.           }));
  391.         }
  392.       }
  393.     }
  395.     d = this.p.a - this.t.a;
  396.     this.p.a = Math.max(0.1, this.p.a - (d * 0.05));
  397.     d = this.p.z - this.t.z;
  398.     this.p.z = Math.max(1, this.p.z - (d * 0.05));
  399.   },
  401.   distanceTo: function (n, details) {
  402.     var dx = this.p.x - n.x,
  403.         dy = this.p.y - n.y,
  404.         d = Math.sqrt(dx * dx + dy * dy);
  406.     return details ? [dx, dy, d] : d;
  407.   },
  409.   move: function (p, avoidStatic) {
  410.     if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {
  411.       this.q.push(p);
  412.     }
  413.   },
  415.   render: function () {
  416.     this._update();
  417.     this._draw();
  418.   }
  419. }
  422. S.ShapeBuilder = (function () {
  423.   var gap = 13,
  424.       shapeCanvas = document.createElement('canvas'),
  425.       shapeContext = shapeCanvas.getContext('2d'),
  426.       fontSize = 500,
  427.       fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';
  429.   function fit() {
  430.     shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap;
  431.     shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap;
  432.     shapeContext.fillStyle = 'red';
  433.     shapeContext.textBaseline = 'middle';
  434.     shapeContext.textAlign = 'center';
  435.   }
  437.   function processCanvas() {
  438.     var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data;
  439.         dots = [],
  440.         pixels,
  441.         x = 0,
  442.         y = 0,
  443.         fx = shapeCanvas.width,
  444.         fy = shapeCanvas.height,
  445.         w = 0,
  446.         h = 0;
  448.     for (var p = 0; p < pixels.length; p += (4 * gap)) {
  449.       if (pixels[p + 3] > 0) {
  450.         dots.push(new S.Point({
  451.           x: x,
  452.           y: y
  453.         }));
  455.         w = x > w ? x : w;
  456.         h = y > h ? y : h;
  457.         fx = x < fx ? x : fx;
  458.         fy = y < fy ? y : fy;
  459.       }
  461.       x += gap;
  463.       if (x >= shapeCanvas.width) {
  464.         x = 0;
  465.         y += gap;
  466.         p += gap * 4 * shapeCanvas.width;
  467.       }
  468.     }
  470.     return { dots: dots, w: w + fx, h: h + fy };
  471.   }
  473.   function setFontSize(s) {
  474.     shapeContext.font = 'bold ' + s + 'px ' + fontFamily;
  475.   }
  477.   function isNumber(n) {
  478.     return !isNaN(parseFloat(n)) && isFinite(n);
  479.   }
  481.   function init() {
  482.     fit();
  483.     window.addEventListener('resize', fit);
  484.   }
  486.   // Init
  487.   init();
  489.   return {
  490.     imageFile: function (url, callback) {
  491.       var image = new Image(),
  492.           a = S.Drawing.getArea();
  494.       image.onload = function () {
  495.         shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  496.         shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6);
  497.         callback(processCanvas());
  498.       };
  500.       image.onerror = function () {
  501.         callback(S.ShapeBuilder.letter('What?'));
  502.       }
  504.       image.src = url;
  505.     },
  507.     circle: function (d) {
  508.       var r = Math.max(0, d) / 2;
  509.       shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  510.       shapeContext.beginPath();
  511.       shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false);
  512.       shapeContext.fill();
  513.       shapeContext.closePath();
  515.       return processCanvas();
  516.     },
  518.     letter: function (l) {
  519.       var s = 0;
  521.       setFontSize(fontSize);
  522.       s = Math.min(fontSize,
  523.                   (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize,
  524.                   (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);
  525.       setFontSize(s);
  527.       shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  528.       shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2);
  530.       return processCanvas();
  531.     },
  533.     rectangle: function (w, h) {
  534.       var dots = [],
  535.           width = gap * w,
  536.           height = gap * h;
  538.       for (var y = 0; y < height; y += gap) {
  539.         for (var x = 0; x < width; x += gap) {
  540.           dots.push(new S.Point({
  541.             x: x,
  542.             y: y,
  543.           }));
  544.         }
  545.       }
  547.       return { dots: dots, w: width, h: height };
  548.     }
  549.   };
  550. }());
  553. S.Shape = (function () {
  554.   var dots = [],
  555.       width = 0,
  556.       height = 0,
  557.       cx = 0,
  558.       cy = 0;
  560.   function compensate() {
  561.     var a = S.Drawing.getArea();
  563.     cx = a.w / 2 - width / 2;
  564.     cy = a.h / 2 - height / 2;
  565.   }
  567.   return {
  568.     shuffleIdle: function () {
  569.       var a = S.Drawing.getArea();
  571.       for (var d = 0; d < dots.length; d++) {
  572.         if (!dots[d].s) {
  573.           dots[d].move({
  574.             x: Math.random() * a.w,
  575.             y: Math.random() * a.h
  576.           });
  577.         }
  578.       }
  579.     },
  581.     switchShape: function (n, fast) {
  582.       var size,
  583.           a = S.Drawing.getArea();
  585.       width = n.w;
  586.       height = n.h;
  588.       compensate();
  590.       if (n.dots.length > dots.length) {
  591.         size = n.dots.length - dots.length;
  592.         for (var d = 1; d <= size; d++) {
  593.           dots.push(new S.Dot(a.w / 2, a.h / 2));
  594.         }
  595.       }
  597.       var d = 0,
  598.           i = 0;
  600.       while (n.dots.length > 0) {
  601.         i = Math.floor(Math.random() * n.dots.length);
  602.         dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);
  604.         if (dots[d].s) {
  605.           dots[d].move(new S.Point({
  606.             z: Math.random() * 20 + 10,
  607.             a: Math.random(),
  608.             h: 18
  609.           }));
  610.         } else {
  611.           dots[d].move(new S.Point({
  612.             z: Math.random() * 5 + 5,
  613.             h: fast ? 18 : 30
  614.           }));
  615.         }
  617.         dots[d].s = true;
  618.         dots[d].move(new S.Point({
  619.           x: n.dots[i].x + cx,
  620.           y: n.dots[i].y + cy,
  621.           a: 1,
  622.           z: 5,
  623.           h: 0
  624.         }));
  626.         n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));
  627.         d++;
  628.       }
  630.       for (var i = d; i < dots.length; i++) {
  631.         if (dots[i].s) {
  632.           dots[i].move(new S.Point({
  633.             z: Math.random() * 20 + 10,
  634.             a: Math.random(),
  635.             h: 20
  636.           }));
  638.           dots[i].s = false;
  639.           dots[i].e = 0.04;
  640.           dots[i].move(new S.Point({
  641.             x: Math.random() * a.w,
  642.             y: Math.random() * a.h,
  643.             a: 0.3, //.4
  644.             z: Math.random() * 4,
  645.             h: 0
  646.           }));
  647.         }
  648.       }
  649.     },
  651.     render: function () {
  652.       for (var d = 0; d < dots.length; d++) {
  653.         dots[d].render();
  654.       }
  655.     }
  656.   }
  657. }());
  660. S.init();

 以上就是我们跨年烟花的全部代码了，能否看懂呢？ 本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/156767

推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。