Vscode 配置

用 var 声明变量的作用域是其当前的执行上下文，即如果是在任何函数之外，则是全球执行上下文，如果是在函数中，则是当前函数执行上下文。换句话说，var 声明变量的作用域只能是全局或整个函数块。

而 let 声明的变量作用域是其当前的代码块，即其作用域可以是全局或整个函数块，也可以是 if、while、switch等用{}有限的代码块。

另外，var 和 let 功能域规则相同，声明的变量只能用于声明的块或子块。

部分转载(内容优化):好看又酷的网页特效例子

<script> (function () { 
           let a_idx = 0; window.onclick = function (event) { 
           const a = ["?富强?", "?民主?", "?文明?", "?和谐?", "?自由?", "?平等?", "?公正?", "?法治?", "?爱国?", "?敬业?", "?诚信?", "?友善?"]; const heart = document.createElement("b"); //创建b元素 heart.onselectstart = new Function('event.returnValue=false'); //防止拖动 document.body.appendChild(heart).innerHTML = a[a_idx]; ///在页面上添加b元素 a_idx = (a_idx   1) % a.length; heart.style.cssText = "position: fixed;left:-100%;"; 
         
          //给p元素设置样式
          let f = 14, // 字体大小 x = event.clientX - f / 2, // 横坐标 y = event.clientY - f, // 纵坐标 c = randomColor(), // 随机颜色 openness = 0.85, // 透明度 s = 1.2; // 放大缩小 const timer = setInterval(function () { 
          //添加定时器 if (openness <= 0) { 
          document.body.removeChild(heart); clearInterval(timer); } else { 
          heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + openness + ";transform:scale(" + s + ");"; y--; openness -= 0.016; s += 0.002; } }, 15); } // 随机颜色 function randomColor() { 
          return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math .random() * 255)) + ")"; } }()); script>

<script type="text/javascript">
    ! function (e, t, a) { 
        
        function r() { 
        
            for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
                e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
                "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
                    .scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
            requestAnimationFrame(r)
        }

        function n() { 
        
            var t = "function" == typeof e.onclick && e.onclick;
            e.onclick = function (e) { 
        
                t && t(), o(e)
            }
        }

        function o(e) { 
        
            var a = t.createElement("div");
            a.className = "heart", s.push({ 
        
                el: a,
                x: e.clientX - 5,
                y: e.clientY - 5,
                scale: 1,
                alpha: 1,
                color: c()
            }), t.body.appendChild(a)
        }

        function i(e) { 
        
            var a = t.createElement("style");
            a.type = "text/css";
            try { 
        
                a.appendChild(t.createTextNode(e))
            } catch (t) { 
        
                a.styleSheet.cssText = e
            }
            t.getElementsByTagName("head")[0].appendChild(a)
        }

        function c() { 
        
            return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
                .random()) + ")"
        }
        var s = [];
        e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
            .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { 
        
            setTimeout(e, 1e3 / 60)
        }, i(
            ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
        ), n(), r()
    }(window, document);
</script>

<script type="text/javascript">
function clickEffect() { 
        
  let balls = [];
  let longPressed = false;
  let longPress;
  let multiplier = 0;
  let width, height;
  let origin;
  let normal;
  let ctx;
  const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
  const pointer = document.createElement("span");
  pointer.classList.add("pointer");
  document.body.appendChild(pointer);
 
  if (canvas.getContext && window.addEventListener) { 
        
    ctx = canvas.getContext("2d");
    updateSize();
    window.addEventListener('resize', updateSize, false);
    loop();
    window.addEventListener("mousedown", function(e) { 
        
      pushBalls(randBetween(10, 20), e.clientX, e.clientY);
      document.body.classList.add("is-pressed");
      longPress = setTimeout(function(){ 
        
        document.body.classList.add("is-longpress");
        longPressed = true;
      }, 500);
    }, false);
    window.addEventListener("mouseup", function(e) { 
        
      clearInterval(longPress);
      if (longPressed == true) { 
        
        document.body.classList.remove("is-longpress");
        pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
        longPressed = false;
      }
      document.body.classList.remove("is-pressed");
    }, false);
    window.addEventListener("mousemove", function(e) { 
        
      let x = e.clientX;
      let y = e.clientY;
      pointer.style.top = y + "px";
      pointer.style.left = x + "px";
    }, false);
  } else { 
        
    console.log("canvas or addEventListener is unsupported!");
  }
 
 
  function updateSize() { 
        
    canvas.width = window.innerWidth * 2;
    canvas.height = window.innerHeight * 2;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
    ctx.scale(2, 2);
    width = (canvas.width = window.innerWidth);
    height = (canvas.height = window.innerHeight);
    origin = { 
        
      x: width / 2,
      y: height / 2
    };
    normal = { 
        
      x: width / 2,
      y: height / 2
    };
  }
  class Ball { 
        
    constructor(x = origin.x, y = origin.y) { 
        
      this.x = x;
      this.y = y;
      this.angle = Math.PI * 2 * Math.random();
      if (longPressed == true) { 
        
        this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
      } else { 
        
        this.multiplier = randBetween(6, 12);
      }
      this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
      this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
      this.r = randBetween(8, 12) + 3 * Math.random();
      this.color = colours[Math.floor(Math.random() * colours.length)];
    }
    update() { 
        
      this.x += this.vx - normal.x;
      this.y += this.vy - normal.y;
      normal.x = -2 / window.innerWidth * Math.sin(this.angle);
      normal.y = -2 / window.innerHeight * Math.cos(this.angle);
      this.r -= 0.3;
      this.vx *= 0.9;
      this.vy *= 0.9;
    }
  }
 
  function pushBalls(count = 1, x = origin.x, y = origin.y) { 
        
    for (let i = 0; i < count; i++) { 
        
      balls.push(new Ball(x, y));
    }
  }
 
  function randBetween(min, max) { 
        
    return Math.floor(Math.random() * max) + min;
  }
 
  function loop() { 
        
    ctx.fillStyle = "rgba(255, 255, 255, 0)";
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < balls.length; i++) { 
        
      let b = balls[i];
      if (b.r < 0) continue;
      ctx.fillStyle = b.color;
      ctx.beginPath();
      ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
      ctx.fill();
      b.update();
    }
    if (longPressed == true) { 
        
      multiplier += 0.2;
    } else if (!longPressed && multiplier >= 0) { 
        
      multiplier -= 0.4;
    }
    removeBall();
    requestAnimationFrame(loop);
  }
 
  function removeBall() { 
        
    for (let i = 0; i < balls.length; i++) { 
        
      let b = balls[i];
      if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) { 
        
        balls.splice(i, 1);
      }
    }
  }
}
clickEffect();//调用特效函数
</script>