写一个而水出还 初始打开页面时，小球上显示文字为“单击移动”，效果如图3.11所示。当单击小球之后，小球开 始从左向右移动，并且小球上显示的文字为“单击停止”，效果如图312所示。当再次单击小球时，小 球停止移动并且小球上显示的文字为“单击移动”。

HTML部分：

<div class="ball" onclick="moveBall()">单击移动</div>

CSS部分：

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  position: relative;
  left: 0;
  transition: all 1s linear;
}

JavaScript部分：

let isMoving = false;
const ball = document.querySelector('.ball');

function moveBall() {
  if (isMoving) {
    ball.style.left = '0';
    ball.textContent = '单击移动';
  } else {
    ball.style.left = 'calc(100% - 100px)';
    ball.textContent = '单击停止';
  }
  isMoving = !isMoving;
}

在代码中，我们首先定义了一个变量 `isMoving` 来记录小球是否正在移动。然后，我们通过 `document.querySelector()` 方法获取到小球的 DOM 元素，并将其保存在变量 `ball` 中。在 `moveBall()` 函数中，我们首先判断小球是否正在移动，如果正在移动，则让小球回到原来的位置，并将文字改为“单击移动”；如果没有移动，则让小球从左向右移动，并将文字改为“单击停止”。在最后一行，我们将 `isMoving` 取反，以便下次单击时能够执行相反的操作。