取模（隔行变色、鼠标离开还原每行的颜色）

最新推荐文章于 2022-04-07 18:26:22 发布

原创最新推荐文章于 2022-04-07 18:26:22 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

98 篇文章

订阅专栏

本文介绍了取模运算的基本概念及其在网页设计中的应用，通过两个具体的示例展示了如何使用JavaScript实现隔行变色效果及鼠标移出后恢复原有颜色的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

取模：就是取余数

5%2=1
6%2=0
0%3=0
1%3=1
2%3=2

取模一般应用于：隔行变色

例1.隔行变色

这里写图片描述

html：

<ul>
    <li></li>
    <li></li>
    ...
</ul>

js：

var lis = document.getElementsByTagName('li');
var arr = ['red','yellow','blue'];
for(var i=0;i<lis.length;i++){
    lis[i].style.backgroundColor = arr[i%arr.length];//arr.length即自动获取数组长度，i%3就是0、1、2的循环
}

例2. 鼠标离开还原每行的颜色

这里写图片描述

html和上面一样不变；
css：

li {
    height: 24px;
    margin-bottom: 3px;
    list-style: none;
}

方法一：
js：

var lis = document.getElementsByTagName('li');
var arr = ['red','yellow','blue'];
for(var i=0;i<lis.length;i++){
    // 给所有的li建一个索引值，那么每个li就有一个数字了
    lis[i].index = i;
    lis[i].style.backgroundColor = arr[i%arr.length];//i%3就是0、1、2的循环
    // 鼠标移入变个颜色
    lis[i].onmouseover = function(){
        this.style.backgroundColor = 'gray';
    }
    // 鼠标移开变回原来的颜色
    lis[i].onmouseout = function(){
        this.style.backgroundColor = arr[this.index%arr.length];//this.index就是数字1、2、3、4、5、6、7、8....this.index%arr.length是数字就把他放在对应的数组中去
    }
}

方法二：
js：

var lis = document.getElementsByTagName('li');
var arr = ['red','yellow','blue'];
var str = '';//放一个空字符串用来存储颜色
for(var i=0;i<lis.length;i++){
    // 给所有的li建一个索引值，那么每个li就有一个数字了
    lis[i].index = i;
    lis[i].style.backgroundColor = arr[i%arr.length];//i%3就是0、1、2的循环
    // 鼠标移入变个颜色
    lis[i].onmouseover = function(){
        str = this.style.backgroundColor;//先存当前鼠标所在的背景颜色
        this.style.backgroundColor = 'gray';
    }
    // 鼠标移开变回原来的颜色
    lis[i].onmouseout = function(){
        this.style.backgroundColor = str;//离开的时候再把存储的颜色还回去
    }
}