前端学习-DOM：清空输入框，输入框内容的显示与隐藏，双色球（获取不重复的随机数）

1.清空输入框

 <style>
        div {
            position: relative;
            width: 180px;
        }
        span {
            display: none;
            position: absolute;
            right: 20px;
            top: 3px;
        }
        .active {
            display: block;
        }
    </style>
<div>
        <input type="text">
        <span>X</span>
    </div>
    <script>
        var input = document.querySelector('input');
        var span = document.querySelector("span");
        input.oninput = function () {
            event.target.value ? span.classList.add("active") : span.classList.remove("active");
        }
        span.onclick = function () {
            input.value = "";
            this.classList.remove("active");
            // focus() 让元素处于激活状态
            input.focus();
        }
        // 默认情况下body 根据内容填充 
        // 此时点击无法响应 因为有可能点击到body之外了 
        // document.body.onclick = function () {

        //     span.classList.remove("active");
        // }
        // 如果设置document 则不需要考虑高度的问题
        document.onclick = function () {
            span.classList.remove("active");
        }
        input.onclick = function () {
            event.stopPropagation();
            if (this.value)
                span.classList.add("active");
        }
    </script>

2.输入框内容的显示与隐藏

通过iconfont添加图标

通过input的 type 属性值（text/password）来判断是否切换显示隐藏图标

    <div>
        <input type="password">
        <span class="iconfont icon-yanjing_yincang"></span>
    </div>
    <script>
        var input = document.querySelector('input');
        var span = document.querySelector('span');

        span.onclick = function () {
            var yc = this.classList.contains("icon-yanjing_yincang");

            yc ? this.classList.replace("icon-yanjing_yincang","icon-yanjing_xianshi") : this.classList.replace("icon-yanjing_xianshi","icon-yanjing_yincang");
            yc ?  input.type = "text" :input.type = "password";

            // if(yc){
            //     this.classList.replace("icon-yanjing_yincang","icon-yanjing_xianshi");
            //     input.type = "text";
            // }
            // else{
            //     this.classList.replace("icon-yanjing_xianshi","icon-yanjing_yincang");
            //     input.type = "password";
            // }
        }
        
        

    </script>

3.双色球

    随机 得到几个不重复的数据

function getRandom(min, max, countNum) {

            var array = [];

            for (var i = 0; i < countNum; i++) {

                var num = Math.floor(Math.random() * (max - min + 1) + min);

                if (array.indexOf(num) === -1) {

                    array.push(num);

                }

                else {

                    i--;

                }

            }

            return array;

        }

 <style>
        .wrap {
            overflow: hidden;
        }

        .left {
            background: lightblue;
            width: 60%;
        }

        .right {
            width: 40%;
            background: lightgreen;

        }

        .left,
        .right {
            box-sizing: border-box;
            padding: 30px;
            overflow: hidden;
            float: left;
        }

        .left span {
            color: red;
        }

        p {
            text-align: center;
        }

        .right span {
            color: blue;
        }

        .qiu {
            float: left;
            width: 50px;
            line-height: 50px;
            border-radius: 50%;
            text-align: center;
            margin: 10px;
        }

        .redfull {
            background: red;
        }

        .bluefull {
            background: blue;
        }

        .random,
        .clear,
        .add {
            width: 100px;
            line-height: 50px;
            background: gray;
            margin: 10px;
            text-align: center;
        }

        .fn {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column wrap;

        }

        .fnbox {
            display: flex;
            justify-content: center;
        }
    </style>
<body>
    <div class="wrap">
        <div class="left">
            <p><span>红色球区</span> 至少选择6个红球</p>
            <div class="box"></div>
        </div>
        <div class="right">
            <p><span>蓝色球区</span> 至少选择1个红球</p>
            <div class="box"></div>

        </div>
    </div>

    <div class="fn">
        <div class="fnbox">
            <div class="random">机选</div>
            <div class="clear">清除</div>
        </div>
        <div class="add">添加号码</div>
    </div>

    <div></div>
    <script>
        var leftBox = document.querySelector('.left .box');
        var righttBox = document.querySelector('.right .box');
        var randomBtn = document.querySelector('.random');
        var clearBtn = document.querySelector('.clear');

        // 生产球
        function productBall(count, parentNode, bColor, select) {
            for (var i = 0; i < count; i++) {
                var div = document.createElement('div');
                div.classList.add("qiu");
                div.classList.add(bColor);
                div.style.border = `solid 1px ${bColor}`;
                div.innerText = i + 1;
                div.checked = false; // 记录是否被选中
                parentNode.appendChild(div);

                div.onclick = function () {
                    if (!this.checked) {
                        if (select <= 0) {
                            alert("不能再选了");
                            return;
                        }
                        select--;
                        this.classList.add(`${bColor}full`);
                    }
                    else {
                        select++;
                        this.classList.remove(`${bColor}full`);
                    }
                    this.checked = !this.checked;
                }
            }
        }

        productBall(33, leftBox, "red", 6);
        productBall(16, righttBox, "blue", 1);


        // 随机的事件
        randomBtn.onclick = function () {
            var redBalls = document.querySelectorAll(".red");
            var blueBalls = document.querySelectorAll(".blue");
            // 移除之前的
            removeAllClass(redBalls,blueBalls);
            var indexArr = getRandom(0, 32, 6);
            for(var i = 0;i < indexArr.length;i++){
                redBalls[indexArr[i]].classList.add("redfull");
            }

            blueBalls[Math.floor(Math.random()*16)].classList.add("bluefull");

        }
        // 清除事件
        clearBtn.onclick = function () {
            var redBalls = document.querySelectorAll(".red");
            var blueBalls = document.querySelectorAll(".blue");
            removeAllClass(redBalls,blueBalls);
        }
        // 移除所有类的事件  自己封装的函数
        function removeAllClass(redBalls,blueBalls) {
            redBalls.forEach(element => {
                element.classList.remove("redfull");
            });

            blueBalls.forEach(element => {
                element.classList.remove("bluefull");
            });
        }

        // 随机  得到6个不重复的数据
        function getRandom(min, max, countNum) {
            var array = [];
            for (var i = 0; i < countNum; i++) {
                var num = Math.floor(Math.random() * (max - min + 1) + min);
                if (array.indexOf(num) === -1) {
                    array.push(num);
                }
                else {
                    i--;
                }
            }

            return array;
        }

    </script>
</body>