【用js实现随机点名和导航切换效果】

亿元亿元

于 2022-11-14 18:34:29 发布

阅读量216

点赞数

文章标签： javascript css css3 html5

本文链接：https://blog.csdn.net/fover7/article/details/127852593

版权

随机点名：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: cornsilk;
        }

        #dv {
            width: 800px;
            margin: 20px auto;
            border: 4px solid darkviolet;
            text-align: center;
            padding: 20px 20px 40px;
        }

        h1 {
            border-bottom: 2px solid pink;
            font-weight: normal;
        }

        ul li {
            vertical-align: top;
            display: inline-block;
            width: 100px;
            height: 50px;
            border-radius: 35%;
            border: 3px dashed palevioletred;
            text-align: center;
            line-height: 50px;
            margin: 5px 5px;
        }

        li.change {
            background-color: greenyellow;
            font-size: 15px;
            font-weight: bolder;
        }

        #btu,
        #btu1 {
            width: 100px;
            height: 50px;
            font-size: 15px;
            border-radius: 10px;
            cursor: pointer;
            margin: 10px 50px 0 50px;
            background-color: pink;
            border: none;
        }

        #btu:hover,
        #btu1:hover {
            background-color: #f28fa1;
        }

        .ch {
            position: relative;
            width: 150px;
            height: 50px;
            line-height: 50px;
            /* border-radius: 10px; */
            margin: 30px auto;
            border-bottom: 2px solid pink;
        }

        .luc {
            font-size: 20px;
            font-weight: bold;
            margin: 10px auto;
            text-align: center;
            color: green;
        }

        .name {
            font-size: 40px;
            font-family: '华文行楷';
        }
    </style>
</head>

<body>
    <div id="dv">
        <h1>王者荣耀本命英雄</h1>
        <button type="button" id="btu">开始</button>
        <button type="button" id="btu1">停止</button>
        <div class="luc">你的本命英雄是？请看大屏幕</div>
        <div class="ch">
            <span class="name">? ? ?</span>
        </div>
        <ul>
            <li class="change">李白</li>
            <li>赵云</li>
            <li>张飞</li>
            <li>哪吒</li>
            <li>吕布</li>
            <li>貂蝉</li>
            <li>典韦</li>
            <li>孙尚香</li>
            <li>刘禅</li>
            <li>夏洛特</li>
        </ul>
    </div>
    <script>
        //插入数组
        let arr = [
            '李白',
            '赵云',
            '张飞',
            '哪吒',
            '吕布',
            '貂蝉',
            '典韦',
            '孙尚香',
            '刘禅',
            '夏洛特'
        ];

        let btuEle = document.querySelector("#btu");
        let btu1Ele = document.querySelector("#btu1");
        let nameEle = document.querySelector(".name");
        let liEle = document.querySelectorAll("li");

        let t;
        let index;
        btuEle.addEventListener("click", function () {
            // 3.3 计时器
            t = setInterval(function () {
                //  3.1 随件索引位置获取
                index = Math.floor(Math.random() * arr.length);
                for (let i = 0; i < liEle.length; i++) {
                	// 先清除有change类的li标签
                    liEle[i].classList.remove("change");
                }
                // 再赋给随机到的li标签添加change类
                liEle[index].classList.add("change");
                // 3.2 将随机的数据放到span中
                nameEle.innerText = arr[index];
            }, 50)
        })
        btu1Ele.addEventListener("click", function () {
            clearInterval(t);
        });
    </script>
</body>

</html>

菜单切换:

HTML样式板块:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漂亮的导航栏动画效果</title>
    <link rel="stylesheet" href="index.css">
     <!-- 引入字体图标 -->
     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div class="tabbar">
        <ul>
            <li class="item active">
                <a href="#">
                    <span class="icon">
                        <i class="fa fa-home" aria-hidden="true"></i>
                    </span>
                    <span class="text">首页</span>
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <span class="icon">
                        <i class="fa fa-heart" aria-hidden="true"></i>
                    </span>
                    <span class="text">动态</span>
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <span class="icon">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i>
                    </span>
                    <span class="text">发布</span>
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <span class="icon">
                        <i class="fa fa-bell" aria-hidden="true"></i>
                    </span>
                    <span class="text">消息</span>
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <span class="icon">
                        <i class="fa fa-user" aria-hidden="true"></i>
                    </span>
                    <span class="text">我的</span>
                </a>
            </li>
            <div class="active-bg"></div>
        </ul>
    </div>
</body>
</html>

CSS样式板块:

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
}

.tabbar{
    /* 相对定位 */
    position: relative;
    width: 350px;
    height: 70px;
}

.tabbar ul{
    /* 让li横向显示 */
    display: flex;
}

.tabbar ul li{
    list-style: none;
    width: 70px;
    height: 70px;
    position: relative;
    z-index: 1;

}


.tabbar ul li a{
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 垂直排列 */
    flex-direction: column;
    color: #fff;
    text-align: center;
}

.tabbar ul li a .icon{
    line-height: 70px;
    font-size: 30px;
    /* 过渡时间 */
    transition: 0.5s;
}
.tabbar ul li a .text{
    /* 绝对定位 */
    position: absolute;
    font-size: 12px;
    bottom: 13px;
    /* 设置过渡 */
    transition: 0.5s;
    /* 默认隐藏 */
    transform: scale(0);
}

.tabbar ul li.active a .icon{
    font-size: 23px;
    /* 图标上移 */
    transform: translateY(-10px);
}

.tabbar ul li.active a .text{
    /* 选中,文字显示 */
    transform: scale(1);
}

.active-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* --c,--cc为CSS中的自定义属性,通过var函数可对其调用 */
    background-color: var(--c);
    box-shadow: 0 10px 15px var(--cc);
    transition: 0.5s;
}

/* 分别为每一个.active-bg设置颜色,阴影,位移 */
.tabbar ul li:nth-child(1).active ~ .active-bg{
    --c:#ffa502;
    --cc:#ffa50299;
    left: 0;
}
.tabbar ul li:nth-child(2).active ~ .active-bg{
    --c:#ff6348;
    --cc:#ff634899;
    left: calc(1 * 70px);
}
.tabbar ul li:nth-child(3).active ~ .active-bg{
    --c:#2ed573;
    --cc:#2ed57399;
    left: calc(2 * 70px);
}
.tabbar ul li:nth-child(4).active ~ .active-bg{
    --c:#1e90ff;
    --cc:#1e90ff99;
    left: calc(3 * 70px);
}
.tabbar ul li:nth-child(5).active ~ .active-bg{
    --c:#ff6b81;
    --cc:#ff6b8199;
    left: calc(4 * 70px);
}

JavaScript:

<script>
        //获取所以的.item元素对象
        let items = document.querySelectorAll(".item");
        //设置当前选中样式的方法
        function setActive(){
            // 遍历所有.item元素,移除active样式
            items.forEach(function(item){
                item.classList.remove("active");
            })
            // 为当前选中项添加active样式
            this.classList.add("active");
        }
        // 遍历所有.item元素,分别为其设置点击事件
        items.forEach(function(item){
            item.addEventListener("click",setActive);
        })
    </script>