优化网页代码流畅度：提高性能和可读性

<!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>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <img src="img2/1.jpg" id="img" alt="视频封面">
    <div id="inp">播放视频</div>
    <script src="js/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>
<!-- style.css -->
<p>*{<br />
margin: 0;
padding: 0;
}
img {
width: 100vw;
}
#inp {
text-align: center;
font-size: 10vw;
}</p>
<!-- script.js -->
<p>'use strict';
const audio = new Audio('mp3/2.mp3');
const img = document.getElementById('img');
const inp = document.getElementById('inp');</p>
<p>function bofang(fps) {
img.src = <code>img2/${fps}.jpg</code>;
inp.textContent = fps;
console.log(fps);
}</p>
<p>const playVideo = () =&gt; {
let tyt = 1;
audio.play();
setInterval(() =&gt; {
if (tyt === 1196) {
tyt = 1;
audio.currentTime = 0;
audio.play();
} else {
bofang(tyt);
tyt++;
}
}, 10);
};</p>
<p>inp.addEventListener('click', playVideo);</p>