KonishiLee's Blog

跑马灯实现

背景

最近因为有同学问了一些简单的 JS 实现小功能,所以也 Coding 讲解了,这里就写在博客里面以供参考。

主题

这一篇文章主要讲的是用 Js 实现一个跑马灯的小功能(类似于红绿灯的概念)

效果图

代码

1
2
3
4
5
6
7
<div class="light-container">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
body{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.light{
height: 50px;
width: 50px;
border-radius: 50%;
display: inline-block;
margin-left: 5px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
// idx 记录当前需要亮哪个灯
var idx = 0, colors = ['indianred', 'goldenrod', 'lightseagreen', 'darkturquoise', 'coral'];
// 计时器
var lightTimer = window.setInterval(function(){
run()
}, 300);
window.setTimeout(function(){
this.clearInterval(lightTimer);
}, 20000)
function run(){
off(); // 关闭所有的灯
on(idx); // 开灯
idx = idx === 4? 0: idx + 1;
}
function on(idx){
$('light')[idx].style = 'background-color:' + colors[idx] + ';width: 55px; height: 55px; box-shadow: 0 0 3px 2px ' + colors[idx];
}
function off(){
for (var i = 0; i < $('light').length ; i++) {
$('light')[i].style = 'background-color:white;'
}
}
function $(className){
return document.getElementsByClassName(className);
}
</script>
如果喜欢这个分享,就帮忙买杯咖啡吧