双色球选项卡实践

双色球部分

html:

 <div class="bt" onclick="play()">抽奖</div>
    <div class="box"></div>

css

 <style>
        .bt{
        background-color: red;
        color: aliceblue;
        font-size: 30px;
        border-radius: 10px;
        width: 200px;
        margin-left: 50px;
        text-align: center;
        margin-bottom: 30px;
    }
    .box {
        display: grid;
        grid-template-columns: repeat(auto-fill, 30px);
        grid-auto-rows: 30px;
        gap: 5px;
    }
    .box>div {
        border-radius: 50%;
        display: grid;
        place-items: center;
        background-color: red;
        color: white;
        box-shadow: 2px 2px 2px #666;
    }
    .box>div:last-of-type {
        background-color: blue;
    }
   </style>

js:

 function play(){
            // 临时数组: 放红球
            let arr = [];
            // 中奖数组,6个红球,1个蓝球
            let res = [];
            // 1. 生成1-33个红球
            for (let i = 1; i <= 33; i++) {
                arr.push(i);
            }
            // 2、在33个红球中随机不重复取出6个数
            for (let i = 0; i < 6; i++) {
                // 原理：取到一个，原数组就删掉对应的数
                let index = Math.floor(Math.random() * arr.length);
                res.push(arr[index]);
                arr.splice(index,1);
            }
            // 将取出的6个红球进行排序
            res.sort((a, b) => a - b);
            // 3、在1-16中随机取出一个蓝球
            let blue = Math.floor(Math.random() * 16) + 1;
            res.push(blue);
            // 4、显示双色球数组
            const box = document.querySelector('.box');
            res.forEach(item=>{
                const ball = document.createElement('div');
                ball.textContent = item;
                box.append(ball);
            });
        }
    </script>

选项卡

HTML:

 <div class="box">
        <!-- 1. 标签 -->
        <!-- 子元素上的点击事件会冒泡到父元素,利用这个特点,只需要给父元素添加点击事件就可以了 -->
        <ul class="menu" onclick="show()">
            <!-- 先给默认显示的标签和对应的内容添加 class="active"处于激活状态/可见 -->
            <!-- 使用自定义属性data-index使标签和与之对应的内容进行绑定 -->
            <li data-index="1" class="active">本省</li>
            <li data-index="2">全国</li>
            <li data-index="3">防疫</li>
        </ul>
        <!-- 2. 内容 -->
        <ul class="content active" data-index="1">
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
        </ul>
        <ul class="content" data-index="2">
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
        </ul>
        <ul class="content" data-index="3">
            <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
            <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
            <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
            <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
            <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
        </ul>
    </div>

css

<style>
        .box {
            width: 28em;
            display: grid;
            grid-template-columns: 3em 1fr;
        }
        .box ul {
            margin: 0;
            padding: 0;
        }
        .box li {
            list-style: none;
        }
        .box li a {
            text-decoration: none;
        }
        .box li:hover {
            cursor: pointer;
        }
        .box .content {
            background-color: rgb(131, 201, 191);
            display: none;
            place-self: center start;
        }
        .box .content.active {
            display: block;
        }
        .box .menu li.active {
            background-color: rgb(137, 180, 174);
        }
    </style>

JS:

 <script>
        function show() {
            // 绑定事件
            // console.log(event.currentTarget);
            // 事件主体
            // console.log(event.target);
            const ul = event.currentTarget;
            const li = event.target;
            // 1. 将原高亮的标签去掉active,并把当前的标签设置为active
            [...ul.children].forEach(li => li.classList.remove('active'));
            li.classList.add('active');
            // 2. 根据标签的data-index进行查询,获取与它对应的列表
            const content = document.querySelectorAll('.content');
            // document.querySelectorAll()
            console.log(content);
            content.forEach(li => li.classList.remove('active'));
            console.log([...content].filter(ul => ul.dataset.index === li.dataset.index)[0]);
            //    filter(ul => ul.dataset.index === li.dataset.index)[0]
            [...content].find(ul => ul.dataset.index === li.dataset.index).classList.add('active');
        }
    </script>