<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
    <style type="text/css">
      html,body{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
      }
      #app{
        width: 100%;
        height: 100%;
      }
      button {
          padding: 15px 30px;
          font-size: 18px;
          cursor: pointer;
          background-color: #4CAF50;
          color: white;
          border: none;
          border-radius: 5px;
          transition: background-color 0.3s;
      }
      
      button:hover {
          background-color: #45a049;
      }
    </style>
    
   <!-- <script src="./js/js-confetti.browser.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
	</head>
	<body>
		<h1>点击按钮触发彩屑效果</h1>
		<button id="confettiButton1" style="margin-bottom: 10px;">释放彩屑1！</button>
    <button id="confettiButton2" style="margin-bottom: 10px;">释放彩屑2！</button>
    <button id="confettiButton3" style="margin-bottom: 10px;">释放彩屑3！</button>
    <script>
      // 创建 JSConfetti 实例
      var jsConfetti = new JSConfetti();
      
      // 获取按钮元素
      var confettiButton = document.getElementById('confettiButton1');
      // 为按钮添加点击事件
      confettiButton.addEventListener('click', () => {
          // 基本彩屑效果
          jsConfetti.addConfetti();
      });
      
      var confettiButton2 = document.getElementById('confettiButton2');
      // 为按钮添加点击事件
      confettiButton2.addEventListener('click', () => {
          jsConfetti.addConfetti({
            emojis: ['🎉', '🎊', '🎈', '✨'], // 使用表情符号作为彩屑
            // confettiRadius: 6,
            // confettiNumber: 300,
          });
      });
      
      var confettiButton3 = document.getElementById('confettiButton3');
      // 为按钮添加点击事件
      confettiButton3.addEventListener('click', () => {
          jsConfetti.addConfetti({
            emojis: ['a', 'b', 'c', 'd'], // 使用表情符号作为彩屑
            // confettiRadius: 6,
            // confettiNumber: 300,
          });
      });
    </script>
	</body>
</html>