下列 JavaScript 特效均来源于网络，由笔者整理，仅用于学习参考。

一、动画特效

带刺的花

带刺的花.gif

  1. <canvas id="barbedFlowers"></canvas>
  1. // 函数主体
  2. function barbedFlowers(el, width, height) {
  3.     var createClass = function () {
  4.         function defineProperties(target, props) {
  5.             for (var i = 0; i < props.length; i++) {
  6.                 var descriptor = props[i];
  7.                 descriptor.enumerable = descriptor.enumerable || false;
  8.                 descriptor.configurable = true;
  9.                 if ('value' in descriptor) descriptor.writable = true;
  10.                 Object.defineProperty(target, descriptor.key, descriptor);
  11.             };
  12.         };
  13.         return function (Constructor, protoProps, staticProps) {
  14.             if (protoProps) defineProperties(Constructor.prototype, protoProps);
  15.             if (staticProps) defineProperties(Constructor, staticProps);
  16.             return Constructor;
  17.         };
  18.     }();
  20.     function _classCallCheck(instance, Constructor) {
  21.         if (!(instance instanceof Constructor)) {
  22.             throw new TypeError('Cannot call a class as a function');
  23.         }
  24.     };
  26.     var Scene = function () {
  27.         function Scene() {
  28.             var _this = this;
  30.             _classCallCheck(this, Scene);
  32.             this.PI = Math.PI;
  33.             this.TAU = this.PI * 2;
  34.             this.GOLDEN = (Math.sqrt(5) + 1) / 2;
  35.             this.canvas = document.querySelector(el);
  36.             this.ctx = this.canvas.getContext('2d');
  37.             this.dpr = window.devicePixelRatio;
  38.             this.reset();
  39.             window.addEventListener('resize', function () {
  40.                 return _this.reset();
  41.             });
  42.             this.loop();
  43.         };
  45.         createClass(Scene,
  46.             [
  47.                 {
  48.                     key: 'reset',
  49.                     value: function reset() {
  50.                         this.width = width || window.innerWidth;
  51.                         this.height = height || window.innerHeight;
  52.                         this.hwidth = this.width * 0.5;
  53.                         this.hheight = this.height * 0.5;
  54.                         this.canvas.width = this.width * this.dpr;
  55.                         this.canvas.height = this.height * this.dpr;
  56.                         this.ctx.scale(this.dpr, this.dpr);
  57.                         this.ctx.translate(~~this.hwidth, ~~this.hheight);
  58.                         this.ctx.globalCompositeOperation = 'lighter';
  59.                         this.tick = 320;
  60.                     }
  61.                 },
  62.                 {
  63.                     key: 'loop',
  64.                     value: function loop() {
  65.                         var _this2 = this;
  67.                         requestAnimationFrame(function () {
  68.                             return _this2.loop();
  69.                         });
  70.                         this.tick++;
  71.                         this.ctx.clearRect(-this.hwidth, -this.hheight, this.width, this.height);
  72.                         var count = 150;
  73.                         var angle = this.tick * -0.001;
  74.                         var amp = 0;
  75.                         for (var i = 0; i < count; i++) {
  76.                             angle += this.GOLDEN * this.TAU + Math.sin(this.tick * 0.03) * 0.001;
  77.                             amp += (i - count / 2) * 0.01 + Math.cos(this.tick * 0.015) * 1;
  78.                             var x = Math.cos(angle) * amp + Math.cos(this.tick * 0.0075) * (count - i) *
  79.                                 0.3;
  80.                             var y = Math.sin(angle) * amp + Math.sin(this.tick * 0.0075) * (count - i) *
  81.                                 0.3;
  82.                             var radius = 0.1 + i * 0.02;
  83.                             var scale = 0.1 + amp * 0.1;
  84.                             var hue = this.tick + angle / this.TAU * 0.4 + 60;
  85.                             var saturation = 90;
  86.                             var lightness = 60;
  87.                             var alpha = 0.7 + Math.cos(this.tick * 0.03 + i) * 0.3;
  89.                             this.ctx.save();
  90.                             this.ctx.translate(x, y);
  91.                             this.ctx.rotate(angle);
  92.                             this.ctx.scale(scale, 1);
  93.                             this.ctx.rotate(this.PI * 0.25);
  94.                             this.ctx.fillStyle = 'hsla(' + hue + ', ' + saturation + '%, ' + lightness +
  95.                                 '%, ' + alpha + ')';
  96.                             this.ctx.fillRect(-radius, -radius, radius * 2, radius * 2);
  97.                             this.ctx.restore();
  99.                             this.ctx.beginPath();
  100.                             this.ctx.arc(x, y, radius * 12, 0, this.TAU);
  101.                             this.ctx.fillStyle = 'hsla(' + hue + ', ' + saturation + '%, ' + lightness +
  102.                                 '%, ' + alpha * 0.05 + ')';
  103.                             this.ctx.fill();
  104.                         }
  105.                     }
  106.                 }
  107.             ]);
  109.         return Scene;
  110.     }();
  112.     var scene = new Scene();
  113. };
  115. // 调用函数
  116. barbedFlowers('#barbedFlowers', 500, 500);

矩阵

矩阵.gif

  1. <canvas id="matrix"></canvas>
  1. // 函数主体
  2. function matrix(el, width, height) {
  3.     var canvas,
  4.         ctx,
  5.         width,
  6.         height,
  7.         size,
  8.         lines,
  9.         tick;
  11.     function line() {
  12.         this.path = [];
  13.         this.speed = rand(10, 20);
  14.         this.count = randInt(10, 30);
  15.         this.x = width / 2, +1;
  16.         this.y = height / 2 + 1;
  17.         this.target = {
  18.             x: width / 2,
  19.             y: height / 2
  20.         };
  21.         this.dist = 0;
  22.         this.angle = 0;
  23.         this.hue = tick / 5;
  24.         this.life = 1;
  25.         this.updateAngle();
  26.         this.updateDist();
  27.     };
  29.     line.prototype.step = function (i) {
  30.         this.x += Math.cos(this.angle) * this.speed;
  31.         this.y += Math.sin(this.angle) * this.speed;
  33.         this.updateDist();
  35.         if (this.dist < this.speed) {
  36.             this.x = this.target.x;
  37.             this.y = this.target.y;
  38.             this.changeTarget();
  39.         }
  41.         this.path.push({
  42.             x: this.x,
  43.             y: this.y
  44.         });
  45.         if (this.path.length > this.count) {
  46.             this.path.shift();
  47.         }
  49.         this.life -= 0.001;
  51.         if (this.life <= 0) {
  52.             this.path = null;
  53.             lines.splice(i, 1);
  54.         }
  55.     };
  57.     line.prototype.updateDist = function () {
  58.         var dx = this.target.x - this.x,
  59.             dy = this.target.y - this.y;
  60.         this.dist = Math.sqrt(dx * dx + dy * dy);
  61.     };
  63.     line.prototype.updateAngle = function () {
  64.         var dx = this.target.x - this.x,
  65.             dy = this.target.y - this.y;
  66.         this.angle = Math.atan2(dy, dx);
  67.     };
  69.     line.prototype.changeTarget = function () {
  70.         var randStart = randInt(0, 3);
  71.         switch (randStart) {
  72.             case 0: // up
  73.                 this.target.y = this.y - size;
  74.                 break;
  75.             case 1: // right
  76.                 this.target.x = this.x + size;
  77.                 break;
  78.             case 2: // down
  79.                 this.target.y = this.y + size;
  80.                 break;
  81.             case 3: // left
  82.                 this.target.x = this.x - size;
  83.         }
  84.         this.updateAngle();
  85.     };
  87.     line.prototype.draw = function (i) {
  88.         ctx.beginPath();
  89.         var rando = rand(0, 10);
  90.         for (var j = 0, length = this.path.length; j < length; j++) {
  91.             ctx[(j === 0) ? 'moveTo' : 'lineTo'](this.path[j].x + rand(-rando, rando), this.path[j].y + rand(-rando, rando));
  92.         }
  93.         ctx.strokeStyle = 'hsla(' + rand(this.hue, this.hue + 30) + ', 80%, 55%, ' + (this.life / 3) + ')';
  94.         ctx.lineWidth = rand(0.1, 2);
  95.         ctx.stroke();
  96.     };
  98.     function rand(min, max) {
  99.         return Math.random() * (max - min) + min;
  100.     };
  102.     function randInt(min, max) {
  103.         return Math.floor(min + Math.random() * (max - min + 1));
  104.     };
  106.     function init() {
  107.         canvas = document.querySelector(el);
  108.         ctx = canvas.getContext('2d');
  109.         size = 30;
  110.         lines = [];
  111.         reset();
  112.         loop();
  113.     };
  115.     function reset() {
  116.         canvas.width = Math.ceil((width || window.innerWidth) / 2) * 2;
  117.         canvas.height = Math.ceil((height || window.innerHeight) / 2) * 2;
  118.         lines.length = 0;
  119.         tick = 0;
  120.     };
  122.     function create() {
  123.         if (tick % 10 === 0) {
  124.             lines.push(new line());
  125.         }
  126.     };
  128.     function step() {
  129.         var i = lines.length;
  130.         while (i--) {
  131.             lines[i].step(i);
  132.         };
  133.     };
  135.     function clear() {
  136.         ctx.globalCompositeOperation = 'destination-out';
  137.         ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1';
  138.         ctx.fillRect(0, 0, width, height);
  139.         ctx.globalCompositeOperation = 'lighter';
  140.     };
  142.     function draw() {
  143.         ctx.save();
  144.         ctx.translate(width / 2, height / 2);
  145.         ctx.rotate(tick * 0.001);
  146.         var scale = 0.8 + Math.cos(tick * 0.02) * 0.2;
  147.         ctx.scale(scale, scale);
  148.         ctx.translate(-width / 2, -height / 2);
  149.         var i = lines.length;
  150.         while (i--) {
  151.             lines[i].draw(i);
  152.         }
  153.         ctx.restore();
  154.     };
  156.     function loop() {
  157.         requestAnimationFrame(loop);
  158.         create();
  159.         step();
  160.         clear();
  161.         draw();
  162.         tick++;
  163.     };
  165.     function onresize() {
  166.         reset();
  167.     };
  169.     window.addEventListener('resize', onresize);
  171.     init();
  172. };
  174. // 调用函数
  175. matrix('#matrix', 500, 500);

粒子漩涡

粒子漩涡.gif

  1. <canvas id="particleVortex"></canvas>
  1. // 函数主体
  2. function particleVortex(el, width, height) {
  3.     function project3D(x, y, z, vars) {
  4.         var p, d;
  5.         x -= vars.camX;
  6.         y -= vars.camY - 8;
  7.         z -= vars.camZ;
  8.         p = Math.atan2(x, z);
  9.         d = Math.sqrt(x * x + z * z);
  10.         x = Math.sin(p - vars.yaw) * d;
  11.         z = Math.cos(p - vars.yaw) * d;
  12.         p = Math.atan2(y, z);
  13.         d = Math.sqrt(y * y + z * z);
  14.         y = Math.sin(p - vars.pitch) * d;
  15.         z = Math.cos(p - vars.pitch) * d;
  16.         var rx1 = -1000;
  17.         var ry1 = 1;
  18.         var rx2 = 1000;
  19.         var ry2 = 1;
  20.         var rx3 = 0;
  21.         var ry3 = 0;
  22.         var rx4 = x;
  23.         var ry4 = z;
  24.         var uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);
  25.         var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;
  26.         var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;
  27.         if (!z) z = 0.000000001;
  28.         if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {
  29.             return {
  30.                 x: vars.cx + (rx1 + ua * (rx2 - rx1)) * vars.scale,
  31.                 y: vars.cy + y / z * vars.scale,
  32.                 d: (x * x + y * y + z * z)
  33.             };
  34.         } else {
  35.             return {
  36.                 d: -1
  37.             };
  38.         }
  39.     };
  41.     function elevation(x, y, z) {
  42.         var dist = Math.sqrt(x * x + y * y + z * z);
  43.         if (dist && z / dist >= -1 && z / dist <= 1) return Math.acos(z / dist);
  44.         return 0.00000001;
  45.     };
  47.     function rgb(col) {
  48.         col += 0.000001;
  49.         var r = parseInt((0.5 + Math.sin(col) * 0.5) * 16);
  50.         var g = parseInt((0.5 + Math.cos(col) * 0.5) * 16);
  51.         var b = parseInt((0.5 - Math.sin(col) * 0.5) * 16);
  52.         return '#' + r.toString(16) + g.toString(16) + b.toString(16);
  53.     };
  55.     function interpolateColors(RGB1, RGB2, degree) {
  56.         var w2 = degree;
  57.         var w1 = 1 - w2;
  58.         return [w1 * RGB1[0] + w2 * RGB2[0], w1 * RGB1[1] + w2 * RGB2[1], w1 * RGB1[2] + w2 * RGB2[2]];
  59.     };
  61.     function rgbArray(col) {
  62.         col += 0.000001;
  63.         var r = parseInt((0.5 + Math.sin(col) * 0.5) * 256);
  64.         var g = parseInt((0.5 + Math.cos(col) * 0.5) * 256);
  65.         var b = parseInt((0.5 - Math.sin(col) * 0.5) * 256);
  66.         return [r, g, b];
  67.     };
  69.     function colorString(arr) {
  70.         var r = parseInt(arr[0]);
  71.         var g = parseInt(arr[1]);
  72.         var b = parseInt(arr[2]);
  73.         return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2);
  74.     };
  76.     function process(vars) {
  77.         if (vars.points.length < vars.initParticles)
  78.             for (var i = 0; i < 5; ++i) spawnParticle(vars);
  79.         var p, d, t;
  81.         p = Math.atan2(vars.camX, vars.camZ);
  82.         d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
  83.         d -= Math.sin(vars.frameNo / 80) / 25;
  84.         t = Math.cos(vars.frameNo / 300) / 165;
  85.         vars.camX = Math.sin(p + t) * d;
  86.         vars.camZ = Math.cos(p + t) * d;
  87.         vars.camY = -Math.sin(vars.frameNo / 220) * 15;
  88.         vars.yaw = Math.PI + p + t;
  89.         vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
  91.         var t;
  92.         for (var i = 0; i < vars.points.length; ++i) {
  94.             x = vars.points[i].x;
  95.             y = vars.points[i].y;
  96.             z = vars.points[i].z;
  97.             d = Math.sqrt(x * x + z * z) / 1.0075;
  98.             t = .1 / (1 + d * d / 5);
  99.             p = Math.atan2(x, z) + t;
  100.             vars.points[i].x = Math.sin(p) * d;
  101.             vars.points[i].z = Math.cos(p) * d;
  102.             vars.points[i].y += vars.points[i].vy * t * ((Math.sqrt(vars.distributionRadius) - d) * 2);
  103.             if (vars.points[i].y > vars.vortexHeight / 2 || d < .25) {
  104.                 vars.points.splice(i, 1);
  105.                 spawnParticle(vars);
  106.             }
  107.         };
  108.     };
  110.     function drawFloor(vars) {
  111.         var x, y, z, d, point, a;
  112.         for (var i = -25; i <= 25; i += 1) {
  113.             for (var j = -25; j <= 25; j += 1) {
  114.                 x = i * 2;
  115.                 z = j * 2;
  116.                 y = vars.floor;
  117.                 d = Math.sqrt(x * x + z * z);
  118.                 point = project3D(x, y - d * d / 85, z, vars);
  119.                 if (point.d != -1) {
  120.                     size = 1 + 15000 / (1 + point.d);
  121.                     a = 0.15 - Math.pow(d / 50, 4) * 0.15;
  122.                     if (a > 0) {
  123.                         vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d / 26 - vars.frameNo / 40), [0, 128, 32], .5 +
  124.                             Math.sin(d / 6 - vars.frameNo / 8) / 2));
  125.                         vars.ctx.globalAlpha = a;
  126.                         vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
  127.                     }
  128.                 }
  129.             }
  130.         };
  131.         vars.ctx.fillStyle = '#82f';
  132.         for (var i = -25; i <= 25; i += 1) {
  133.             for (var j = -25; j <= 25; j += 1) {
  134.                 x = i * 2;
  135.                 z = j * 2;
  136.                 y = -vars.floor;
  137.                 d = Math.sqrt(x * x + z * z);
  138.                 point = project3D(x, y + d * d / 85, z, vars);
  139.                 if (point.d != -1) {
  140.                     size = 1 + 15000 / (1 + point.d);
  141.                     a = 0.15 - Math.pow(d / 50, 4) * 0.15;
  142.                     if (a > 0) {
  143.                         vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d / 26 - vars.frameNo / 40), [32, 0, 128], .5 +
  144.                             Math.sin(-d / 6 - vars.frameNo / 8) / 2));
  145.                         vars.ctx.globalAlpha = a;
  146.                         vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
  147.                     }
  148.                 }
  149.             }
  150.         };
  151.     };
  153.     function sortFunction(a, b) {
  154.         return b.dist - a.dist;
  155.     };
  157.     function draw(vars) {
  158.         vars.ctx.globalAlpha = .15;
  159.         vars.ctx.fillStyle = '#000';
  160.         vars.ctx.fillRect(0, 0, vars.canvas.width, vars.canvas.height);
  162.         drawFloor(vars);
  164.         var point, x, y, z, a;
  165.         for (var i = 0; i < vars.points.length; ++i) {
  166.             x = vars.points[i].x;
  167.             y = vars.points[i].y;
  168.             z = vars.points[i].z;
  169.             point = project3D(x, y, z, vars);
  170.             if (point.d != -1) {
  171.                 vars.points[i].dist = point.d;
  172.                 size = 1 + vars.points[i].radius / (1 + point.d);
  173.                 d = Math.abs(vars.points[i].y);
  174.                 a = .8 - Math.pow(d / (vars.vortexHeight / 2), 1000) * .8;
  175.                 vars.ctx.globalAlpha = a >= 0 && a <= 1 ? a : 0;
  176.                 vars.ctx.fillStyle = rgb(vars.points[i].color);
  177.                 if (point.x > -1 && point.x < vars.canvas.width && point.y > -1 && point.y < vars.canvas.height)
  178.                     vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
  179.             }
  180.         };
  181.         vars.points.sort(sortFunction);
  182.     };
  184.     function spawnParticle(vars) {
  185.         var p, ls;
  186.         pt = {};
  187.         p = Math.PI * 2 * Math.random();
  188.         ls = Math.sqrt(Math.random() * vars.distributionRadius);
  189.         pt.x = Math.sin(p) * ls;
  190.         pt.y = -vars.vortexHeight / 2;
  191.         pt.vy = vars.initV / 20 + Math.random() * vars.initV;
  192.         pt.z = Math.cos(p) * ls;
  193.         pt.radius = 200 + 800 * Math.random();
  194.         pt.color = pt.radius / 1000 + vars.frameNo / 250;
  195.         vars.points.push(pt);
  196.     };
  198.     function frame(vars) {
  199.         if (vars === undefined) {
  200.             var vars = {};
  201.             vars.canvas = document.querySelector(el);
  202.             vars.ctx = vars.canvas.getContext('2d');
  203.             vars.canvas.width = width || document.documentElement.clientWidth;
  204.             vars.canvas.height = height || document.documentElement.clientHeight;
  206.             window.addEventListener('resize', function () {
  207.                 vars.canvas.width = width || document.documentElement.clientWidth;
  208.                 vars.canvas.height = height || document.documentElement.clientHeight;
  209.                 vars.cx = vars.canvas.width / 2;
  210.                 vars.cy = vars.canvas.height / 2;
  211.             }, true);
  212.             vars.frameNo = 0;
  214.             vars.camX = 0;
  215.             vars.camY = 0;
  216.             vars.camZ = -14;
  217.             vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
  218.             vars.yaw = 0;
  219.             vars.cx = vars.canvas.width / 2;
  220.             vars.cy = vars.canvas.height / 2;
  221.             vars.bounding = 10;
  222.             vars.scale = 500;
  223.             vars.floor = 26.5;
  225.             vars.points = [];
  226.             vars.initParticles = 700;
  227.             vars.initV = .01;
  228.             vars.distributionRadius = 800;
  229.             vars.vortexHeight = 25;
  230.         }
  232.         vars.frameNo++;
  233.         requestAnimationFrame(function () {
  234.             frame(vars);
  235.         });
  237.         process(vars);
  238.         draw(vars);
  239.     };
  241.     frame();
  242. };
  244. // 调用函数
  245. particleVortex('#particleVortex', 500, 500);

二、点击特效

点击出现爱心

鼠标点击出现爱心.gif

  1. (function (win, doc) {
  2.     let hearts = [];
  3.     let heartStyle =
  4.         `.heart{position:fixed;width:10px;height:10px;background-color:#fff;transform:rotate(45deg);z-index:9}.heart::before,.heart::after{position:absolute;width:inherit;height:inherit;content:'';background-color:inherit;border-radius:50%}.heart::before{top:-5px}.heart::after{left:-5px}`;
  6.     // 定义不同浏览器下的requestAnimationFrame函数实现，若都没有则用setTimeout实现
  7.     window.requestAnimationFrame = (function () {
  8.         return win.requestAnimationFrame ||
  9.             win.webkitRequestAnimationFrame ||
  10.             win.mozCancelAnimationFrame ||
  11.             win.oRequestAnimationFrame ||
  12.             win.msCancelRequestAnimationFrame ||
  13.             function (callback) {
  14.                 setTimeout(callback, 1000 / 60);
  15.             };
  16.     })();
  18.     // 生成随机颜色
  19.     function randomColor() {
  20.         return `rgb(${~~(Math.random() * 255)},${~~(Math.random() * 255)},${~~(Math.random() * 255)})`;
  21.     };
  23.     // 生成样式
  24.     function css(css) {
  25.         let style = doc.createElement('style');
  26.         style.type = 'text/css';
  27.         try {
  28.             style.appendChild(doc.createTextNode(css));
  29.         } catch (err) {
  30.             style.stylesheet.cssText = css;
  31.         }
  32.         doc.getElementsByTagName('head')[0].appendChild(style);
  33.     };
  35.     // 创建爱心
  36.     function createHeart(event) {
  37.         let div = doc.createElement('div');
  38.         div.className = 'heart';
  40.         // 给hearts数组添加heart对象
  41.         hearts.push({
  42.             el: div,
  43.             x: event.clientX - 5, // 鼠标当前位置x轴 - 5
  44.             y: event.clientY - 5, // 鼠标当前位置y轴 - 5
  45.             scale: 1, // 缩放
  46.             alpha: 1, // 透明度
  47.             color: randomColor() // 颜色(随机颜色)
  48.         });
  49.         doc.body.appendChild(div);
  50.     };
  52.     // 移除已生成爱心
  53.     function removeHeart() {
  54.         for (let i = 0; i < hearts.length; i++) {
  55.             if (hearts[i].alpha <= 0) { // 若当前heart对象的透明度小于等于0
  56.                 doc.body.removeChild(hearts[i].el); // 从body中移除当前heart对象
  57.                 hearts.splice(i, 1); // 从heart数组中移除当前heart对象
  58.                 continue;
  59.             }
  61.             hearts[i].y--;
  62.             hearts[i].scale += 0.004;
  63.             hearts[i].alpha -= 0.013;
  64.             hearts[i].el.style.cssText =
  65.                 `top:${hearts[i].y}px;left:${hearts[i].x}px;background-color:${hearts[i].color};opacity:${hearts[i].alpha};transform:scale(${hearts[i].scale},${hearts[i].scale}) rotate(45deg)`;
  66.         }
  67.         requestAnimationFrame(removeHeart);
  68.     };
  70.     // 点击事件
  71.     function clickEvent() {
  72.         let click = typeof win.onclick === 'function' && win.onclick;
  73.         win.onclick = function (event) {
  74.             click && click();
  75.             createHeart(event);
  76.         };
  77.     };
  79.     // 初始化
  80.     function init() {
  81.         css(heartStyle); // 添加爱心样式
  82.         clickEvent(); // 添加点击事件(生成爱心)
  83.         removeHeart(); // 移除已生成爱心
  84.     };
  86.     init();
  87. })(window, document);