前端嘛

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>土豆吃薯条</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        overflow: hidden;
      }

      button {
        border: none;
        background: none;
        cursor: pointer;
        outline: none;
        padding: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }

      #display-canvas {
        width: 150vw;
        height: 150vh;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <button id="crazy-potato">
      <canvas id="display-canvas"></canvas>
    </button>

    <script type="module">
      import { DotLottie } from 'https://esm.sh/@lottiefiles/dotlottie-web@0.37.0';

      const dotLottie = new DotLottie({
        autoplay: true,
        loop: true,
        canvas: document.querySelector('#display-canvas'), // Targets the canvas element
        src: 'https://lottie.host/ea94c1e3-5cea-4846-81ff-395a2d016287/DjCvZcleUA.lottie',
      });

      const button = document.getElementById('crazy-potato');

      const themes = ['day', 'sunset', 'night', 'midnight', 'winter'];
      let currentThemeIndex = 1;

      button.addEventListener('click', () => {
        currentThemeIndex = (currentThemeIndex + 1) % themes.length;
        const newTheme = themes[currentThemeIndex];
        dotLottie.setTheme(newTheme);

        console.log(`Theme set to: ${newTheme}`);
      });
    </script>
  </body>
</html>