跑马灯设置多少个

最新推荐文章于 2024-05-20 22:08:52 发布

Zy_xxy

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量188

点赞数

文章标签： css html javascript

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

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯开关</title>
    <style>
        input{
            height: 40px;
        }
        button{
            width:86px;
            height: 46px;
            padding-top: 7px;
            background-color: cyan;
            border: 0;
            border-radius: 5px;
        }
        p{
            position: relative;
            top:-3px;
            left:10px;
            font-size: 10px;
            color:lightslategray;
            letter-spacing:17px;
        }
        ul{
            width:460px;

            margin-top: 10px;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
        li{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            list-style: none;
            background-color:lightgray;
        }
    </style>
</head>
<body>
<input type="text" placeholder="请输入你需要多少跑马灯">
<button>
    <p>确定</p>
</button>
<ul></ul>

<script>
    /**
     * 1首先把给输入框定义一个变量
     * 1.2给上面变量绑定点击事件
     * 1.3所以说这里是要创建li
     * 找到这个这个数字并打印
     * 然后点击绑定事件先做出效果
     */

    // 开启定时器
    let interval
    //然后给确定按钮绑定点击事件
    let button=document.querySelector('button')
    button.addEventListener('click',function () {
        //关掉定时器
        clearInterval(interval)
        //定义变量，找到ul选择器定义变变量内容为空
        document.querySelector('ul').innerHTML=''
        //定义变量，找到文档input选择器的值
        let input=document.querySelector('input').value

        //创建li，input里面有多少则，有多少li，li相当于灯
        for(let i=0;i<=parseInt(input)-1;i++){
            //创建li//这里能找到li
            const t=document.createElement('li')
            let ul=document.querySelector('ul')
            //找到ul子节点里面的li
                ul.appendChild(t)
        }

        //找到所有li
        const he=document.querySelectorAll('ul li')
        console.log(he)
        //定义一个变量为0
        let f1=0
        function f(f1){
            for(let i=0;i<he.length;i++){
                //i等不等于函数参数如果等于就是黄色，如果不等于则返回它原本的颜色
                if(i===f1){
                    he[i].style.background ='yellow'
                }
                else{
                    he[i].style.background ='lightgray'
                }
            }
        }
        //返回函数名称（函数参数）
        f(f1)

        interval=setInterval(function () {
            //调用上面的变量每次加一
            f1 +=1
            //调用上面的变量
            //判断如果大于6则返回原本的值进行判断，
            if(f1>he.length-1){
                f1=0
            }
            //返回函数参数进行运算
            f(f1)
            //    每500毫秒运算一次
        },1000)
    })
</script>
</body>
</html>