所以我编写了一个网站（使用 html、css 和 Spring）。
有一个带有多个按钮的表单，每次我按下按钮时，网站就会“闪烁”。 我不知道如何更好地描述这一点，但看起来网站的全部内容都消失了一毫秒。
有谁知道为什么会发生这种情况以及如何解决这个问题？
这是我网站的代码。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/LPCalc.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');
</style>
<title>YuGiOh LP Calculator</title>
<link rel="icon" type="image/x-icon" href="/images/YugiohLogoTransparent.png">
</head>
<body>
<video id="intro" th:if="${lpCalcFormData.intro_ended == false}" autoplay source src="/video/ItsTimeToDuel.mp4" type="audio/mpeg"></video>
<script language="javascript">
let audio = document.getElementById("intro");
audio.onended = function() {
document.getElementById("btn_intro_ended").click();
};
</script>
<form method="post" style="display:none">
<button id="btn_intro_ended" name="intro_ended" value="true" type="submit"></button>
</form>
<div id="calc_wrapper" th:if="${lpCalcFormData.intro_ended == true}">
<div id="players_wrapper">
<div class="player_wrapper" id="player1_wrapper">
<form method="post">
<p id="player1" class="player">Player 1</p>
<input class="lp" name="lp" type="text" th:object="${lpCalcFormData}" th:value="*{lpP1}" size="5" readonly>
</form>
</div>
<div class="player_wrapper" id="player2_wrapper">
<form method="post">
<p id="player2" class="player">Player 2</p>
<input class="lp" name="lp" type="text" th:object="${lpCalcFormData}" th:value="*{lpP2}" size="5" readonly>
</form>
</div>
</div>
<div id="operations_wrapper">
<div class="operations">
<form method="post">
<button class="button" name="action" value="half_p1" type="submit" method="post">HALF</button>
<br>
<button class="button" name="action" value="+_p1" type="submit">+</button>
<button class="button" name="action" value="-_p1" type="submit">-</button>
</form>
</div>
<div id="x_wrapper">
<form method="post">
<input id="x" class="digits" name="x" type="text" th:object="${lpCalcFormData}" th:value="*{x}" size="5" readonly>
</form>
</div>
<div class="operations">
<form method="post">
<button class="button" name="action" value="half_p2" type="submit" method="post">HALF</button>
<br>
<button class="button" name="action" value="+_p2" type="submit">+</button>
<button class="button" name="action" value="-_p2" type="submit">-</button>
</form>
</div>
</div>
<div class="digits_wrapper">
<form method="post">
<button class="button" name="digit" value="1" type="submit">1</button>
<button class="button" name="digit" value="2" type="submit">2</button>
<button class="button" name="digit" value="3" type="submit">3</button>
<button class="button" name="digit" value="4" type="submit">4</button>
<button class="button" name="digit" value="5" type="submit">5</button>
<button class="button" name="digit" value="6" type="submit">6</button>
<button class="button" name="digit" value="7" type="submit">7</button>
<button class="button" name="digit" value="8" type="submit">8</button>
<button class="button" name="digit" value="9" type="submit">9</button>
<button class="button" name="digit" value="0" type="submit">0</button>
<button class="button" name="action" value="del"type="submit">Del</button>
</form>
</div>
</div>
</body>
</html>
我正在动态更改网站的内容。 所以我有一个在第一次打开网站时播放的介绍视频。 视频结束后它将消失，网站的实际内容将变为可见。 我认为这可能是问题所在，并删除了视频和内容的可见性控制进行测试，但问题仍然存在。
正如评论中的许多人所说，我需要使用 JavaScript 并在客户端运行我的代码，以避免每次单击按钮后重建我的网站。 感谢您的评论。 （我知道这是一个愚蠢的菜鸟问题，但这是我第一次建立网站）