如何使用JavaScript实现两辆汽车屏幕移动 修复赛车页面不动问题

代码问题整理 #

• 你给#Move1、#Move2两个父div设置left属性，但这两个div没有设置position: absolute定位，偏移属性不生效，而且你本身把绝对定位加在了子元素img上，改父容器的left不会作用到图片上
• 你生成了两个随机数ArandomNumber和BrandonNumber，但实际移动距离还是写死的固定加10，完全没用上随机数逻辑
• 缺少PauseRace、ResetRace两个按钮绑定的函数实现，点击对应按钮会触发JS报错
• 三个按钮id重复，不符合HTML规范
• 没有实现800像素终点判断逻辑，跑过终点不会自动停止比赛

修正后的JavaScript.js代码 #

var timer;
var ArandomNumber;
var BrandonNumber;
// 记录两辆车的当前偏移量
var car1Offset = 0
var car2Offset = 0

function GatherData() {
  ArandomNumber = GetRandomNumA();
  BrandonNumber = GetRandomNumB();

  // 直接获取img元素修改偏移
  var car1 = document.getElementById("Car1");
  car1Offset += ArandomNumber;
  car1.style.left = car1Offset + 'px';
  var car2 = document.getElementById("Car2");
  car2Offset += BrandonNumber;
  car2.style.left = car2Offset + 'px';

  // 终点判断
  if(car1Offset >= 800 || car2Offset >=800) {
    clearInterval(timer)
    let winner = car1Offset >= 800 ? "1号车" : "2号车"
    alert(`${winner}获胜！`)
  }
}

function StartRace() {
  // 避免重复点击启动多个定时器
  if(timer) return
  timer = setInterval(GatherData, 1000);
}

// 新增暂停函数
function PauseRace() {
  clearInterval(timer)
  timer = null
}

// 新增重置函数
function ResetRace() {
  clearInterval(timer)
  timer = null
  car1Offset = 0
  car2Offset = 0
  document.getElementById("Car1").style.left = '0px'
  document.getElementById("Car2").style.left = '0px'
}

function GetRandomNumA() {
  // 生成1-10的随机移动距离，可自行调整范围
  return Math.ceil(Math.random() * 10);
}

function GetRandomNumB() {
  return Math.ceil(Math.random() * 10);
}

修正后的CarRace.html代码 #

<!DOCTYPE html>
<html>
<head>
<title>Race</title>
<script src="JavaScript.js"></script>
<style>
  .moveable {
    position: absolute;
    height: 100px;
    width: 200px;
  }
</style>
</head>

<body>
  <b>First to 800 pixels wins!</b>
  <br>
  <br>
  <b>Both cars start at 0 pixels.</b>
  <br>
  <br>
  <!-- 修正重复id -->
  <input id="startBtn" type="button" value="Start Race" onclick="StartRace()" />
  <input id="pauseBtn" type="button" value="Pause Race" onclick="PauseRace()" />
  <input id="resetBtn" type="button" value="Reset Cars" onclick="ResetRace()" />
  <br>
  <br>
  <div id="Move1">
    <img id="Car1" class="moveable" src="delorean.jpeg" alt="1号车" />
  </div>
  <br><br><br><br><br><br>
  <div id="Move2">
    <img id="Car2" class="moveable" src="duster.jpg" alt="2号车" />
  </div>

</body>
</html>

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