JS无限执行隔行变色

代码:

javascript 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>随机变色</li>
        <li>随机变色</li>
        <li>随机变色</li>
        <li>随机变色</li>
        <li>随机变色</li>
        <li>随机变色</li>
        <li>随机变色</li>
        <li>随机变色</li>
        <li>随机变色</li>
        <li>随机变色</li>
    </ul>
    <script>
        let li = document.getElementsByTagName('li')[0]
        let ul = li.parentNode
        let ulson = ul.children
        let i=0
        function sj(){
            return Math.floor(Math.random()*256)
        }
        setInterval(o=>{
            ulson[i].style.backgroundColor=`rgb(${sj()},${sj()},${sj()})`
            i++
            if(i==ulson.length){
                i=0
            }
        },1000)     
        
    </script>
</body>
</html>

效果图:

相关推荐
前端工作日常11 分钟前
我理解的eslint配置
前端·eslint
前端工作日常37 分钟前
项目价值判断的核心标准
前端·程序员
_君落羽_44 分钟前
C语言 —— 指针(4)
c语言·开发语言
weixin_448617051 小时前
疏老师-python训练营-Day30模块和库的导入
开发语言·python
90后的晨仔1 小时前
理解 Vue 的列表渲染:从传统 DOM 到响应式世界的演进
前端·vue.js
望星空听星语1 小时前
C语言自定义数据类型详解(四)——联合体
c语言·开发语言
壹立科技2 小时前
Java源码构建智能名片小程序
java·开发语言·小程序
OEC小胖胖2 小时前
性能优化(一):时间分片(Time Slicing):让你的应用在高负载下“永不卡顿”的秘密
前端·javascript·性能优化·web
烛阴2 小时前
ABS - Rhomb
前端·webgl
植物系青年2 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(下)
前端·低代码