点击Shuffle按钮时如何仅刷新指定<div>（骰子区域）而非整页？

一、重构JavaScript代码为可调用函数 #

将原有的随机骰子逻辑封装成独立函数，实现局部更新而无需整页刷新：

function rollDice() {
  // 生成Player1的随机骰子
  var randomNumber1 = Math.floor(Math.random() * 6) + 1;
  var randomImageSource = "https://raw.githubusercontent.com/JallaJaswanth/Dice-Game/main/images/dice" + randomNumber1 + ".png";
  document.querySelector(".img1").setAttribute("src", randomImageSource);

  // 生成Player2的随机骰子
  var randomNumber2 = Math.floor(Math.random() * 6) + 1;
  var randomImageSource2 = "https://raw.githubusercontent.com/JallaJaswanth/Dice-Game/main/images/dice" + randomNumber2 + ".png";
  document.querySelector(".img2").setAttribute("src", randomImageSource2);

  // 更新胜负结果文本
  var resultHeading = document.querySelector("h1");
  if (randomNumber1 > randomNumber2) {
    resultHeading.innerHTML = "Player 1 Wins!";
  } else if (randomNumber2 > randomNumber1) {
    resultHeading.innerHTML = "Player 2 Wins!";
  } else {
    resultHeading.innerHTML = "Draw!";
  }
}

// 页面加载完成后自动执行一次，初始化随机骰子
window.addEventListener("DOMContentLoaded", rollDice);

二、修改按钮点击事件 #

将按钮的整页刷新逻辑替换为调用上述函数，同时修正按钮文字拼写：

<button class="button" onClick="rollDice()"><span>Shuffle</span></button>

三、完善HTML结构（可选优化） #

将CSS和JS代码放到标准位置，确保样式和脚本正常加载：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Let's Play Dice</title>
  <!-- 嵌入所有CSS样式代码 -->
  <style>
    /* 原有的CSS代码全部放在这里 */
  </style>
</head>
<body>
  <div class="area">
    <ul class="circles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <div class="context">
    <div class="container">
      <h1>Refresh Me</h1>
      <div class="dice">
        <p>Player 1</p>
        <img class="img1" src="images/dice6.png">
      </div>
      <div class="dice">
        <p>Player 2</p>
        <img class="img2" src="images/dice6.png">
      </div>
    </div>
    <div class="container">
      <main>
        <button class="button" onClick="rollDice()"><span>Shuffle</span></button>
      </main>
    </div>
  </div>

  <!-- 嵌入重构后的JavaScript代码 -->
  <script>
    // 这里放入rollDice函数及初始化代码
  </script>
</body>
</html>

修改核心说明 #

• 移除window.location.reload()整页刷新逻辑，改为直接操作DOM更新骰子图片和结果文本
• 背景动画因未触发页面重载，会保持持续运行状态
• 页面加载时自动执行一次骰子生成函数，实现初始随机效果

内容的提问来源于stack exchange，提问作者Jaswanth