LED跑马灯效果

来源：互联网发布：淘宝有货到付款的产品编辑：程序博客网时间：2024/04/29 00:47

今天在百度知道上帮网友解决一些问题，看到了一个类似跑马灯的效果，这个以前也有想过要写，但是没有什么头绪和时间，现在顺便就一起解决了。

这个LED跑马灯的效果是怎么一个原理，现分析如下：

假设有一个要进行变化的对象数组，我们称之为A对象。如下：

这个等变化的数组长度为5，

有颜色数组，我们称之为B，如下：

这个长度为3。

要分析出原理，我们要根据事物的表象去分析得到事物内在的规律与原理，根据这个原理与规律我们才能得出解决办法。我们进行一次模拟：

（1）初始状态

（2）移动过程中的某一状态

我们可以写出这样的一个过程代码，这里用伪代码进行解释说明：

i是从指定的位置开始向低位变化的

j是从0开始进行遍历到高位，直至结束

for( i = 发生变化的游标位置， j=0; i>=0; i--, j++ ){
if( j < B数组长度 ){
将B数组的值赋给A对象的样式属性
}
else{
说明j已经将B数组遍历结束，则A对象此时样式属性应该被设置为默认值
}
}

//相应的实现代码

//颜色数组（简称B）

var colorArr = [ '#f00', '#09f', '#6f6', '#c33', '#cf0' ];

var liIndex = 0; //游标，用于进行变化的下标变量。

for( var i=liIndex, j=0; i>=0; i--, j++ ){
if( j<colorArr.length){
liArr[i].style.backgroundColor = colorArr[j];
}else{
liArr[i].style.backgroundColor = '#ccc'; //当超出时，设置为默认的颜色
}
}

这个过程都很正常，没有什么特别需要注意和处理的地方，关键是，当游标超出A对象的长度的时候，如何进行一个处理？

如图所示状态：

我们通过增加一个假想长度，让B能够继续完成它的遍历，但实际上对B而言，它面对的对象“A”是一个我们加了一个长度的假想对象A，目的只是让B完成它的遍历，而A对象仍然是不可能发生变化的，I游标的值，最大也是为A对象的长度，但变化游标的值却是可以移动到假想对象“A”的最后一个位置上的，所以liIndex是可以继续加大的，而liIndex与i的之间的距离，也就是offset偏移量的值，同时也是我们给A对象增加的假想长度。那么这个过程会持续到哪一个位置上结束？

对，没有错，就是当B完成了在A最后一个位置上的遍历时如下：

所以，可以得出，一次全程的过程的终结状态是在于offset的值=B数组的长度，而offset是由liIndex与i的差进行计算的，所以得到如下公式：

offset = liIndex - A.length;

判断结束状态为:

if( offset >= B.length ){ 结束，恢复回初始状态; }

至此，整个过程已经走完一次。所以，得到这个思路后，写代码就容易多了。

<!DOCTYPE html><html><head><title>Test4</title><meta http-equiv="Content-type" content="text/html;charset=utf-8" /><style type='text/css'>.box{ width:500px; margin:20px auto; }.box ul{list-style: none;}.box ul li { width:10px; height: 10px; background-color: #ccc; float:left;}</style></head><body><div id='box' class='box'><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></body><script type="text/javascript">//颜色数组（简称B）var colorArr = [ '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00' ];var liIndex = 0; //这里是一个数组游标，标记当前从哪个位置开始变化设置颜色var liArr = undefined; //进行变化的对象init();//初始化function init(){//我这里用的是li标签，如果你的是div，则将所有需要变化的div存在在一个变量中，我这里放的是liArr这个变量.liArr = document.getElementById('box').children[0].children;　//简称A对象//调用跑马灯函数fLEDScroller();}function fLEDScroller(){//偏移量var offset = 0;//当超出变化对象长度时，但我们仍然需要把后续的颜色给走完，此时，我们假想给变化对象(A)加长len个长度，这个len就是颜色数组(B)的长度，这样加长后，能够让B继续走完，而我们在看到时，因为是假想的，所以相当于隐藏掉超出的颜色，看到的是还未走完的颜色。if( liIndex - liArr.length + 1  > 0 ){offset = liIndex - liArr.length + 1;}//但是如果假想的长度超过颜色数组（B）的长度时，说明颜色数组（B）已经走完了，可以恢复到初始的位置重新进行一次变化。if( offset > colorArr.length ){liIndex = 0;offse = 0;}//i的初始值，分两种情况，1是当游标未超出对象A的长度时，offset=0，2是当游标超出对象A的长度,offset=游标-对象A长度(即得到偏移量),上面已经进行了处理，这里是再说明一下，j的值就等于偏移量的值for(  var i = liIndex - offset, j = offset; i>=0 ; i--, j++ ){//当偏移量并未超出颜色数组B的长度时，设置颜色if( j <colorArr.length ){liArr[i].style.backgroundColor = colorArr[j];}else{liArr[i].style.backgroundColor = '#ccc'; //当超出时，设置为默认的颜色}}//游标自增，进行移动liIndex++;//间隔100毫秒进行一次变化setTimeout( 'fLEDScroller()', 40 );}</script></html>

最后的效果如下：

0 0