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>

效果图:

相关推荐
低头专研17 分钟前
Markdown标题序号处理工具——用 C 语言实现
c语言·开发语言·typora·markdown文件标题编号·md文件标题序号
程序猿John20 分钟前
ES6 新增特性 箭头函数
前端·javascript·es6
百锦再1 小时前
五种常用的web加密算法
前端·算法·前端框架·web·加密·机密
@大迁世界1 小时前
彻底改变我 React 开发方式的组件模式
前端·javascript·react.js·前端框架·ecmascript
刚入门的大一新生2 小时前
C++初阶-C++入门基础
开发语言·c++
你是理想2 小时前
wait 和notify ,notifyAll,sleep
java·开发语言·jvm
William Dawson2 小时前
【Vue 3 + Element Plus 实现产品标签的动态添加、删除与回显】
前端·javascript·vue.js
拉不动的猪2 小时前
项目基础搭建时的一些基本注意点
前端·javascript·面试
forestsea2 小时前
Python进阶编程总结
开发语言·python·notepad++
蕉君桑2 小时前
vue2使用vue-echarts
前端·vue.js·echarts