专栏首页移动大前端JS示例15-模运算应用(隔行变色)

JS示例15-模运算应用(隔行变色)

一、知识要点

1、%运算

二、源码参考

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>求模运算的应用</title>
    <script>
        window.onload = function () {
            var aLi = document.getElementsByTagName('li');

            for (var i = 0; i < aLi.length; i++) {
                //i 0 1 2 3 4 5 6....
                if (i % 2 == 0) {
                    //0 2 4 6 8 10
                    aLi[i].style.background = '#CCC';
                } else {
                    //1 3 5 7 9
                    aLi[i].style.background = '';
                }
            }
        };
    </script>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

三、运行效果

image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS示例23-隔行换色(li列表)

    专注APP开发
  • JS示例20-如何读取父节点parentNode

    专注APP开发
  • JS示例30-列表排序sort

    专注APP开发
  • 常见闭合百叶窗

    李才哥
  • jQuery简单实现二级下拉菜单

    下拉菜单原理:滑过一级的li才让第二层的li显示,利用jq简单的抓取元素,让一级下的二级li显示就能解决,使用jq比css的思路更加明确!

    十月梦想
  • PHP之多条件混合筛选功能的实现方法

    以上这篇PHP之多条件混合筛选功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • Pug迭代

    听着music睡
  • pyhon 列表的增删改查

    py3study
  • 第3章 排列清单控制标记

    排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另外一种列表。对于概况因特网上的内容,列表特别重要。

    py3study
  • js 为 li 循环添加 class

    前段时间有个小伙伴想在新闻列表页面的 ul 里面为每个 class 循环添加带 1  2  3  4的 class,正巧昨天做一个站也用到了类似 for 循环,...

    Savalone

扫码关注云+社区

领取腾讯云代金券