如何阻止JS代码立即执行，使页面加载时h1显示指定文本？

你的问题出在当前JS代码会页面一加载就自动执行，直接修改了h1的内容。要实现页面加载时h1保持“Refresh Page”，同时能触发游戏逻辑，只需要把游戏代码封装成函数，让它在用户操作（比如点击标题）时才执行，步骤如下：

1. 修改JavaScript代码 #

把所有游戏逻辑封装成函数，并给h1添加点击触发的事件：

// 封装游戏逻辑到函数里
function playGame() {
  let randomNumber1 = Math.floor(Math.random() * 6 + 1);
  let randomNumber2 = Math.floor(Math.random() * 6 + 1);

  // 修改骰子图片
  document.getElementsByClassName("dice-1")[0].src = "Images/dice" + randomNumber1 + ".png";
  document.getElementsByClassName("dice-2")[0].src = "Images/dice" + randomNumber2 + ".png";

  // 判断胜负并修改标题
  if (randomNumber1 > randomNumber2) {
    document.querySelector("h1").innerHTML = "🎉 Player 1 wins 🎉";
  } else if (randomNumber1 < randomNumber2) {
    document.querySelector("h1").innerHTML = "🎉 Player 2 wins 🎉";
  } else {
    document.querySelector("h1").innerHTML = "Draw!!";
  }
}

// 给h1添加点击事件，点击时触发游戏
document.querySelector("h1").addEventListener("click", function() {
  playGame();
});

补充说明：原来的代码里把图片src的赋值结果存在变量里做比较，实际比较的是URL字符串，这会导致逻辑错误（比如dice6.png的字符串排序比dice10.png靠前，但点数6是小于10的），所以直接比较生成的随机点数才是正确的做法。

2. 保持HTML代码不变 #

你的现有HTML代码无需修改，初始的h1已经设置为“Refresh Page”，页面加载时不会被JS自动修改，只有用户点击h1标题时才会触发游戏、更新标题内容。

现在页面加载完成后h1会稳定显示“Refresh Page”，点击标题即可运行游戏并展示结果，刷新页面后会回到初始状态。

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