流畅播放视频 - WebCat - 常规

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>WebCat</title>
    <style>
      * {
       margin: 0;
        padding: 0;
       }
      img {
        width: 100vw;
       }
     #inp {
       text-align: center;
       font-size: 10vw;
       }
    </style>
    <script src="js/jquery.min.js"></script>
  </head>
  <body>	
	<img src="img2/1.jpg" id="img" />
    <div id="inp">播放视频</div>
    <script>
      const audio = new Audio('mp3/2.mp3');
      let fps = 1;
      function bofang() {
        img.src = `img2/${fps}.jpg`;
        $("#inp").text(fps);
        fps++;
        if (fps > 1196) {
          fps = 1;
          audio.currentTime = 0;
          audio.play();
        }
      }
      inp.onclick = function() {
        audio.play();
        setInterval(bofang, 10);
      }
    </script>
  </body>
</html>