当前位置: 首页 > article >正文

JS无限执行隔行变色

代码:

<!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>

效果图:


http://www.kler.cn/news/366392.html

相关文章:

  • demo说明
  • 【每日一题】LeetCode - 盛最多水的容器
  • Android中的epoll机制
  • 【Java网络编程】从套接字(Socket)概念到UDP与TCP套接字编程
  • 深入剖析 C 与 C++ 动态内存管理之术
  • 凸轮应用实例(带进料装置的伺服压机控制)
  • 这是一篇vue3 的详细教程
  • 机器学习5
  • Flume的安装及使用
  • 中国人寿财险青岛市分公司践行绿色金融,助力可持续发展
  • 【mysql】转义字符反斜杠,正则表达式
  • LabVIEW换流变换器智能巡检系统
  • 三周精通FastAPI:13 响应状态码status_code
  • 2024.10月25日- SpringBoot整合Thymeleaf
  • 深度学习杂乱知识
  • 【论文速读】| 攻击图谱:从实践者的角度看生成式人工智能红队测试中的挑战与陷阱
  • Mysql查询表的结构信息 把列名 数据类型 等变成列数据(适用于生成数据库表结构文档) (三)
  • 一分钟学会MATLAB-数值计算
  • 怎样安装 three.js
  • Python依赖库的几种离线安装方法
  • 【Linux】-----进程控制
  • IDEA如何将一个分支的代码合并到另一个分支(当前分支)
  • PyCharm 2023 版本之后使用本地 conda 已存在环境的方法
  • Golang 怎么高效处理ACM模式输入输出
  • 实验一 嵌入式开发基础 4-6学时实践
  • 【ubuntu20联网】ubuntu20.04正常使用网络,解决校园以太网无法连接问题