原生js实现简单开奖

最新推荐文章于 2023-02-07 09:49:01 发布

_心之所向_

最新推荐文章于 2023-02-07 09:49:01 发布

阅读量275

点赞数

分类专栏： JavaScript案例文章标签： js开奖原生js开奖简单开奖

本文链接：https://blog.csdn.net/gl18792296581/article/details/100636168

版权

JavaScript案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述
html + css

   <style>
        * {
            margin: 0;
            padding: 0;
        }

        input {
            width: 70px;
            margin: 10px;
        }

        .box {
            width: 308px;
            height: 560px;
            background: url(1.jpg);
            margin: 0px auto;
            position: relative;
        }

        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 18px;
            height: 18px;
            background: #aaa;
        }
    </style>
</head>

<body>
    <input type="button" value="重置" class="reset">
    <input type="button" value="开奖" class="open">
    <input type="button" value="偷窥" class="see">
    <div class="box">

    </div>
</body>

  function Open() {
        this.reset = document.querySelector(".reset");
        this.open = document.querySelector(".open");
        this.see = document.querySelector(".see");
        this.box = document.querySelector(".box");
        this.init();
    }
    //初始为按钮添加单击事件
    Open.prototype.init = function () {
        this.reset.onclick = function () { this.oReset(); }.bind(this);
        this.open.onclick = function () { this.oOpen(); }.bind(this);
        this.see.onclick = function () { this.oSee(); }.bind(this);
    }
    //创建遮罩
    Open.prototype.create = function () {
        console.log();
        var maskW = 18;
        for (var j = 0; j < this.box.offsetHeight / maskW; j++) {
            for (var i = 0; i < this.box.offsetWidth / maskW; i++) {
                var div = document.createElement("div");
                div.className = "mask";
                div.style.left = i * maskW + "px";
                div.style.top = j * maskW + "px";
                this.box.appendChild(div);
            }
        }
    }
    //移除所有遮罩
    Open.prototype.oReset = function () {
        // console.log(1);
        var mask = document.querySelectorAll(".mask");
        for (var i = 0; i < mask.length; i++) {
            mask[i].remove();
        }
    }
    //鼠标移入时当前遮罩消失
    Open.prototype.oOpen = function () {
        this.oReset();
        this.create();
        var mask = document.querySelectorAll(".mask");
        for (let i = 0; i < mask.length; i++) {
            mask[i].onmouseenter = function () {
                mask[i].remove();
            }
        }
    }
    //鼠标移入时当前遮罩变透明，移开恢复
    Open.prototype.oSee = function () {
        this.oReset();
        this.create();
        var mask = document.querySelectorAll(".mask");
        for (let i = 0; i < mask.length; i++) {
            mask[i].onmouseenter = function () {
                mask[i].style.opacity = "0";
            }
            mask[i].onmouseleave = function () {
                mask[i].style.opacity = "1";
            }
        }

    }
    new Open();