随机数，选项卡（排他思想），flag（标杆）

憨憨404

已于 2023-02-22 11:00:00 修改

阅读量135

点赞数

分类专栏：随笔Js 文章标签： css javascript html

于 2022-12-25 00:05:18 首次发布

本文链接：https://blog.csdn.net/qq_60839348/article/details/128425480

版权

随笔Js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

随机数：

// 生成随机数（更新：更好的获取随机数）
const a = Math.floor(Math.random() * (max - min + 1)) + min;

弃用：：：


// 生成随机数（这个好用）更新
const a = Math.floor(Math.random() * (max - min + 1)) + min;

        // 随机数的公式:var res = Math.round(Math.random() * (max-min)+min)
        // 索引的最小是:0
        // 索引的对大值:arr.length-1


        // 随机数，a到 b之间任意数,a>b
        function random(a,b) {
            // a > b
            if (a > b) {
                var res = Math.round(Math.random() * (a-b) + b)
                return res
            } 
            // b > a
            else if (b > a) {
                var res = Math.round(Math.random() * (b-a) + a)
                return res
            } 
            else {
                return '请输入正确数字'
            }
        }
        var res =random(100,100)
        console.log(res)


        // 随机点名
        // var arr = ['张','徐' ,'王' ,'赵' ,'刘']
        // var index = Math.round(Math.random()*(arr.length-1-0),0)
        // console.log(arr[index])

选项卡（排他思想）：

<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 500px;
            height: 400px;
            border: 5px solid #000;
            margin: 100px auto;
        }

        ul,
        li {
            list-style: none;
        }

        ol {
            display: flex;
            justify-content: space-between;
        }

        ol li {
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: aqua;
            border: 1px solid red;
            flex: 1;
            cursor: pointer;
        }

        ul {
            position: relative;
        }

        ul li {
            width: 100%;
            height: 350px;
            background-color: pink;
            text-align: center;
            line-height: 350px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        ul li:nth-child(2) {
            background-color: green;
        }

        ul li:nth-child(2) {
            background-color: orange;
        }

        ol li.active {
            background-color: purple;
        }

        ul .active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
        <ul>
            <li class="active">1。。。。</li>
            <li>2。。。</li>
            <li>3。。。。。</li>
        </ul>
    </div>
</body>

</html>
<script>
    /* 
        需求：点击按钮之后要实现的效果
            1）点哪个按钮，就让哪个按钮有active类名
            2）让所有的盒子中，和这个按钮配套的盒子有active类名
            意思就是比如你点了第一个按钮，就让ol下的li[0]有active类名,ul下的[0]有active类名
        步骤：
            0.获取到所有的按钮和盒子
            1.需要给每个按钮绑定点击事件
            2.点击之后，点到哪个按钮，哪个按钮就有active类名
                我怎么知道我点到哪个了？(点击事件中有一个this，就代表当前你点击的那个东西)
                其他按钮没有active类名
            3.点到那个按钮就让哪个按钮对应的盒子有active类名
                我怎么知道该按钮对应的盒子是哪个？
                我只要能知道该按钮是第几个，就可以知道盒子是第几个。
                可以在遍历按钮的时候给按钮添加一个自定义属性做记录
    */
    var btns = document.querySelectorAll('ol>li')
    var boxs = document.querySelectorAll('ul>li')
    //   1.
    for (var i = 0; i < btns.length; i++) {
        console.log(i);

        btns[i].dataset.index = i
        btns[i].onclick = function () {
            /* 
                排他思想:删除所有，再添加
            */
            // 清除掉active类名
            for (var j = 0; j < btns.length; j++) {
                btns[j].classList.remove('active')
                boxs[j].classList.remove('active')
            }
            this.classList.add('active')
            // this.dataset.index就是你点击的按钮的编号，让对应的盒子也有active类名
            boxs[this.dataset.index].classList.add('active')

        }
    }
</script>

flag（标杆）：

<!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>Document</title>
    <style>
        button {
            width: 200px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: 700;
            background-color: pink;
            margin: 20px auto;
        }
    </style>
</head>
 
<body>

    <!-- 开关灯 -->
    <button class="btn1">开关灯</button>

    <!-- 获取验证码 -->
    <button class="btn2"> 点击获取验证码 </button>


   <script>
        // 获取元素
        var btn1Ele = document.querySelector('.btn1')
        var btn2Ele = document.querySelector('.btn2')

        // 定义一个标杆：只要设计两种状态的切换就都可以使用标杆来实现
        var flag = 1

        // 绑定点击事件
        // 开关灯
        btn1Ele.onclick = function () {
            if (flag) {
                flag = 0    // flag是false，执行此段判断代码
                document.body.style.backgroundColor = 'black'

            } else {
                flag = 1    // flaf是true，也就是原始状态，反着状态，执行此段代码。
                document.body.style.backgroundColor = 'white'
            }
        }


        // 获取验证码
        var flag = true
        btn2Ele.onclick = function () {
            if (flag == false) return  //点击一个后，不执行新开定时器，
            flag = false
            var count = 5   //声明时间5s,计时
            btn2Ele.innerHTML = `${count}秒后验证码过期`
            // 定时器，实现验证码输入倒计时
            var timeStop = setInterval(() => {
                count--
                btn2Ele.innerHTML = `${count}秒后验证码过期`
                
                // 判断count小于0时定时器停止
                if (count <= 0) {
                    clearInterval(timeStop)
                    btn2Ele.innerHTML = `点击获取验证码`
                    flag = true   // 未改变，改变回去，执行此段
                }
            }, 1000);

        }



    </script>
</body>

</html>