小项目跑马灯前端代码写的哦后面会加升级版-CSDN博客

本文链接：https://blog.csdn.net/Zy_xxy/article/details/121639172

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            padding: 0;
            list-style: none;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            border: 1px solid lightgray;
            float: left;
            margin-left:20px;
            background-color:lightgray;
        }
    </style>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    /**
     * 1.0首先把div数组
     * 1.1找到之后一个一个亮

     */
//    找到li数组
    const div=document.querySelectorAll('ul li')
    //定义一个变量
    let f1=0
    //编写一个函数名称函数参数
    function mc(f1){
        for(let i=0;i<div.length;i++){
            //帮段i等不等于函数参数等于则变成黄色，不等于返回原本的值
            if(i===f1){
                div[i].style.background ='yellow'
            }
            else{
                div[i].style.background='lightgray'
            }
        }
    }
    //返回函数参数，函数名称
    mc(f1)
    //给时间定义一个函数
    setInterval(function () {
        // 每秒加一
        f1 +=1
        // 判断如果大于div则返回原值继续循环
        if(f1>div.length-1){
            f1=0
        }
        mc(f1)
    },500)
</script>
</body>