JavaScript 跑马灯代码示例：实现圆点左右移动效果
<p>以下是 JavaScript 代码实现一个简单的跑马灯效果，代码中使用 CSS 样式设置了红色和绿色颜色，通过 JavaScript 控制圆点的位置和颜色变化，实现红色圆点在多个绿色圆点之间左右移动循环的效果。</p>
<pre><code class="language-html"><head>
<style>
.red {
color:red;
}
.green {
color:green;
}
</style>
<script type="text/javascript">
var current = 0;
var dir=0;
function setColor() {
var sp = document.getElementsByTagName("span");
for(i=0; i<10; 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();
}
function ready()
{
setColor();
window.setInterval("Move()", 500);
}
</script>
</head>
<!-- **********Found********** -->
<body onload="ready()">
<center>
<span>●</span>
<span>●</span>
<span>●</span>
<span>●</span>
<span>●</span>
<span>●</span>
<span>●</span>
<span>●</span>
<span>●</span>
<span>●</span>
</center>
</body>
</html>
</code></pre>
<p>代码的思路如下：</p>
<ul>
<li>在 `<style>` 标签中设置了 `.red` 和 `.green` 的颜色样式。</li>
<li>在 JavaScript 部分，定义了 `setColor()` 函数用于设置每个 `<span>` 元素的类名，以实现红色圆点和绿色圆点的显示效果。</li>
<li>`Move()` 函数用于控制红色圆点的移动，并通过改变 `current` 和 `dir` 变量的值来实现左右移动和循环反复的效果。</li>
<li>`ready()` 函数用于初始化色块颜色并设置定时器，以便每隔 0.5 秒调用 `Move()` 函数来更新圆点的位置和颜色。</li>
<li>在 `<body>` 标签中使用 `onload` 事件调用 `ready()` 函数，以确保页面加载完成后自动开始动画效果。</li>
</ul>
<p>整体代码实现了一个简单的跑马灯效果。</p>
原文地址: https://www.cveoy.top/t/topic/N8K 著作权归作者所有。请勿转载和采集!