HTML+CSS+JS实现简单跑马灯效果 - 代码示例及详解 - 常规

<!DOCTYPE html>
<html>
<head>
<style>
  .red {
    background-color: red;
    width: 50px;
    height: 50px;
    display: inline-block;
  }

  .green {
    background-color: green;
    width: 50px;
    height: 50px;
    display: inline-block;
  }
</style>
<script>
  var sp = document.getElementsByTagName('span');
  var current = 0; // 当前红色色块的位置
  var dir = 0; // 移动方向，0表示从左到右，1表示从右到左

  function setColor() {
    for (var i = 0; i < sp.length; i++) {
      if (i === current)
        sp[i].className = 'red';
      else
        sp[i].className = 'green';
    }
  }

  function move() {
    if (dir === 0) {
      if (current === 9)
        dir = 1;
      else
        current++;
    } else {
      if (current === 0)
        dir = 0;
      else
        current--;
    }
    setColor(); // 改变色块颜色
  }

  setInterval(move, 500); // 每隔0.5秒调用move()函数
</script>
</head>
<body>
<center>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</center>
</body>
</html>

代码解析:

HTML 结构:
- 使用十个 <span> 标签创建十个色块。
- 使用 <center> 标签将色块居中显示。（建议使用CSS替代标签以符合HTML5标准）
CSS 样式:
- 定义了 .red 和 .green 两个类，分别设置红色和绿色色块的样式，包括背景颜色、宽度和高度。
JavaScript 逻辑:
- sp 变量存储所有 <span> 元素。
- current 变量表示当前红色色块的位置，初始值为 0。
- dir 变量表示移动方向，0 表示从左到右，1 表示从右到左，初始值为 0。
- setColor() 函数根据 current 的值设置相应 <span> 元素的类名，从而改变色块颜色。
- move() 函数更新 current 和 dir 的值，实现红色色块的移动，并调用 setColor() 函数更新颜色。
- setInterval(move, 500) 每隔 500 毫秒（0.5 秒）调用一次 move() 函数，实现动画效果。

这段代码简洁易懂，非常适合初学者学习如何使用 JavaScript 创建简单的动画效果。通过修改代码中的参数，你可以轻松地自定义跑马灯的速度、颜色和数量，打造个性化的网页元素。