js原生写lol抽皮肤抽奖

作为洛克萨斯青铜玩家，我沉迷于抽奖无法自拔，自认技术菜，就想玩玩好看的皮肤，但是马爸爸抽奖五块一次，抽不起咋整，作为程序猿打算手写一个满足自己的氪金，此项目用的全是原生js，项目思路如下：

把皮肤路径当做数组元素，利用随机数实现随机抽皮肤效果，然后再把路径的图片添加到我们的展示区，另外加了一些皮肤数量的数据，和领取（点击领取删除该图片），代码如下，线上体验网址为,可以进网站试试

http://101.200.166.211/ye/web/chou/

项目初始化文件夹，文件夹里放皮肤图，图片名要与数组对应

index代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            background: url(./抽奖/bg4De2.jpg) no-repeat;
            background-size: 100%;
        }

        a {
            text-decoration: none;
            color: skyblue;
        }

        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {

            box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

            background-color: #eee;

            border-radius: 0;

        }

        ::-webkit-scrollbar-thumb {

            border-radius: 7px;

            box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

            background-color: skyblue;

        }


        .b {
            width: 100%;
            height: 420px;
            margin-bottom: 73px;
        }

        .b>button {
            margin-left: 255px;
            margin-top: 5px;
        }

        .box {
            float: right;
            width: 200px;
            height: 400px;
            border: 1px solid rgb(247, 237, 237);
            margin: 22px 258px 10px 100px;
            overflow: hidden;
        }

        .box1 {
            float: left;
            width: 660px;
            height: 350px;
            border: 1px solid rgb(247, 237, 237);
            background-color: transparent;
            margin: 22px 0 0 25px;
        }

        .pifu {
            width: 200px;
            height: 300px;
            background-color: transparent;
        }

        button {
            width: 200px;
            height: 50px;
            background: url(./抽奖/btn2.jpg);
            cursor: pointer;
        }

        img {
            width: 200px;
            height: 300px;
            vertical-align: middle;
        }

        .box1 img {
            width: 120px;
            height: 165px;
            margin: 5px 7px 5px 5px;
        }

        .user {
            width: 340px;
            height: 35px;
            margin: auto;
            margin-top: 80px;
        }

        .user span {
            color: #fff;
        }

        .user span:nth-child(5) {
            color: red;
            background-color: rgba(255, 255, 255, .08);
        }

        .nav {
            width: 100px;
            height: 30px;
            background-color: rgba(255, 255, 255, .08);
            color: #fff;
            line-height: 30px;
            text-align: center;
            margin: auto;
        }

        .jp {
            position: relative;
            width: 1068px;
            height: 932px;
            border: 1px solid rgb(248, 242, 242);
            margin: 20px auto;
            overflow: auto;
        }

        .jp div {
            position: relative;
            display: inline-block;
            width: 200px;
            height: 300px;
            background-color: pink;
            margin: 0 10px 40px 0;
        }

        .jp div a {
            display: block;
            position: absolute;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: pink;
            color: #000;
            text-decoration: none;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
        }

        .logo {
            position: absolute;
            top: 30px;
            left: 0;
            width: 200px;
            height: 72px;
        }

        .logo img {
            width: 200px;
            height: 72px;
        }

        h1 {
            position: absolute;
            top: 25px;
            right: 40px;
            color: #fff;
        }

        .allget {
            position: absolute;
            top: 591px;
            right: 96px;
            z-index: 1;
        }

        p {
            position: absolute;
            top: 591px;
            right: 320px;
            color: #fff;
        }

        p span {
            background-color: rgba(255, 255, 255, .08);
            color: red;
        }

        .kz {
            display: inline-block;
            width: 280px;
            height: 18px;
        }

        .user .xx {
            cursor: pointer;
            color: skyblue;
        }

        .user .zx {
            color: blue;
            cursor: pointer;
        }

        .dcp {
            position: fixed;
            display: none;
            top: 100px;
            left: 460px;
            width: 300px;
            height: 450px;
            z-index: 100;
        }

        .dcp img {
            width: 100%;
            height: 100%;
        }

        .dcp .cc1 {
            position: absolute;
            top: 0;
            right: -20px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            background-color: #fff;
        }

        .cc2 {
            position: fixed;
            top: 70px;
            right: 180px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            z-index: 100;
            display: none;
            background-color: #fff;
        }

        .dcp p {
            position: absolute;
            top: -75px;
            left: 0;
            width: 100%;
            text-align: center;
            margin: 0;
            font-size: 45px;
            color: #fff;
        }

        .gxn {
            position: fixed;
            top: 5px;
            left: 0;
            width: 100%;
            text-align: center;
            margin: 0;
            z-index: 100;
            display: none;
            font-size: 45px;
            color: #fff;
        }

        .lcp {
            position: fixed;
            top: 70px;
            left: 165px;
            width: 900px;
            height: 500px;
            z-index: 100;
            display: none;
        }

        .lcp img {
            width: 178px;
            height: 245px;
            margin: 0 2px 5px 0;
        }

        .mask {
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 1263px;
            height: 1612px;
            background-color: rgba(0, 0, 0, .7);
            z-index: 50;
        }
    </style>
</head>

<body>
    <div class="mask"></div>
    <div class="dcp">
        <img src="" alt="" class="dcpp">
        <div class="cc1">X</div>
        <p>恭喜您获得</p>
    </div>
    <div class="lcp"></div>
    <p class="gxn">恭喜您获得</p>
    <div class="cc2">X</div>
    <div class="logo">
        <img src="./抽奖/logo.png" alt="">
    </div>
    <h1>青青子衿,悠悠我心</h1>
    <div class="user">
        <span>账号：</span>
        <div class="kz"> <span class="xx">登录</span> <span class="zx"></span></div> <br> <span>您的余额为：</span><span
            id="xs"></span><span>元</span>
    </div>
    <div class="b">
        <div class="box">
            <div class="pifu">
                <img src="" alt="" id="pifu">
            </div>
            <button id="btn">抽奖</button>
            <button id="cz">充值</button>
        </div>
        <div class="box1"></div>
        <button id="btn10">十连抽</button>
    </div>
    <button id="allget" class="allget">全部领取</button>
    <div class="nav">我的奖品</div>
    <p>暂存箱皮肤数：<span id="gs">0个</span></p>
    <div class="jp"></div>
    <script>
        var arr = ['./抽奖/1.png', './抽奖/2.png', './抽奖/3.png', './抽奖/4.png', './抽奖/5.png', './抽奖/6.png', './抽奖/7.png', './抽奖/8.png', './抽奖/9.png', './抽奖/10.png', './抽奖/11.png', './抽奖/12.png', './抽奖/13.png', './抽奖/14.png', './抽奖/15.png', './抽奖/16.png', './抽奖/17.png', './抽奖/18.png', './抽奖/19.png', './抽奖/20.png', './抽奖/21.png', './抽奖/22.png', './抽奖/45.png', './抽奖/46.png', './抽奖/47.png', './抽奖/48.png', './抽奖/49.png', './抽奖/50.png', './抽奖/23.png', './抽奖/24.png', './抽奖/25.png', './抽奖/26.png', './抽奖/27.png', './抽奖/28.png', './抽奖/29.png', './抽奖/30.png', './抽奖/31.png', './抽奖/32.png', './抽奖/33.png', './抽奖/34.png', './抽奖/35.png', './抽奖/36.png', './抽奖/37.png', './抽奖/38.png', './抽奖/39.png', './抽奖/40.png', './抽奖/41.png', './抽奖/42.png', './抽奖/43.png', './抽奖/44.png',]
        var pifu = document.getElementById('pifu');
        var btn = document.getElementById('btn');
        var cz = document.getElementById('cz');
        var xs = document.getElementById('xs');
        var jp = document.querySelector('.jp');
        var shi = document.getElementById('btn10');
        var shibox = document.querySelector('.box1')
        var allget = document.getElementById('allget');
        var gs = document.getElementById('gs');
        var xx = document.querySelector('.xx');
        var zx = document.querySelector('.zx');
        var dcp = document.querySelector('.dcp');
        var lcp = document.querySelector('.lcp');
        var dcpp = document.querySelector('.dcpp');
        var cc1 = document.querySelector('.cc1');
        var cc2 = document.querySelector('.cc2');
        var mask = document.querySelector('.mask');
        var gxn = document.querySelector('.gxn');
        var x = new URLSearchParams(location.search)
        var qqh = x.get('qqh');
        var user = x.get('user');
        var daqu = x.get('daqu');
        if (location.search != '') {
            xx.innerHTML = qqh + '(' + user + ')' + '大区:' + daqu;
            zx.innerHTML = '注销';
        }

        xx.addEventListener('click', function () {
            if (xx.innerHTML == '登录') {
                location.href = './login.html';
            } else {
                xx.onclick = null;
            }
        })
        zx.addEventListener('click', function () {
            location.href = './index.html';
        })
        var yue = 0;
        xs.innerHTML = yue;
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var re = getRandom(0, 49);
        cz.onclick = function () {
            if (xx.innerHTML == '登录') {
                alert('请登录');
            } else {
                var cq = +prompt('请输入充值金额');
                if (cq > 0) {
                    yue += cq;
                    alert('充值成功，充值金额' + cq + '元');
                    xs.innerHTML = yue;
                } else {
                    alert('充值失败')
                }
            }
        }
        btn.onclick = function () {
            if (xx.innerHTML == '登录') {
                alert('请登录');
            } else {
                if (yue == 0) {
                    alert('您的余额不足，请充值,一元抽一次');
                } else if (yue >= 1) {
                    pifu.src = arr[re];
                    dcp.style.display = 'block';
                    dcpp.src = arr[re];
                    mask.style.display = 'block';
                    cc1.addEventListener('click', function () {
                        dcp.style.display = 'none';
                        mask.style.display = 'none';
                    })
                    yue = yue - 1;
                    xs.innerHTML = yue;
                    var wjd = document.createElement('div');
                    jp.appendChild(wjd);
                    var wjp = document.createElement('img');
                    wjp.src = arr[re];
                    wjd.innerHTML = '<a href="javascript:;" >领取</a>';
                    wjd.appendChild(wjp);
                    re = getRandom(0, 49);
                    var numall = document.querySelectorAll('a');
                    gs.innerHTML = numall.length + '个';


                }
                var del = document.querySelectorAll('a');
                for (i = 0; i < del.length; i++) {
                    del[i].onclick = function () {
                        this.parentNode.remove();
                        alert('领取成功')
                        var numall = document.querySelectorAll('a');
                        gs.innerHTML = numall.length + '个';
                    }
                }
            }

        }
        var flag = 0;
        shi.onclick = function () {
            if (xx.innerHTML == '登录') {
                alert('请登录');
            } else {
                if (yue < 10) {
                    alert('余额不足十元，请充值');
                } else {
                    if (flag == 1) {
                        for (j = 0; j < 10; j++) {
                            shibox.removeChild(shibox.children[0]);
                        }
                    }
                    for (i = 0; i < 10; i++) {
                        yue = yue - 1;
                        xs.innerHTML = yue;
                        var wjpp = document.createElement('img');
                        wjpp.src = arr[re];
                        shibox.appendChild(wjpp);

                        var wjd = document.createElement('div');
                        jp.appendChild(wjd);
                        var wjp = document.createElement('img');
                        wjp.src = arr[re];
                        wjd.innerHTML = '<a href="javascript:;" >领取</a>';
                        wjd.appendChild(wjp);

                        var wjppp = document.createElement('img');
                        wjppp.src = arr[re];
                        gxn.style.display = 'block';
                        lcp.style.display = 'block';
                        lcp.appendChild(wjppp);
                        mask.style.display = 'block';
                        cc2.style.display = 'block';
                        cc2.addEventListener('click', function () {
                            lcp.style.display = 'none';
                            mask.style.display = 'none';
                            cc2.style.display = 'none'
                            gxn.style.display = 'none';
                            for (j = 0; j < 10; j++) {
                                lcp.removeChild(lcp.children[0]);
                            }
                        })
                        re = getRandom(0, 49);
                        var numall = document.querySelectorAll('a');
                        gs.innerHTML = numall.length + '个';
                    }
                    flag = 1;
                }
            }

            var del = document.querySelectorAll('a');
            for (k = 0; k < del.length; k++) {
                del[k].onclick = function () {
                    this.parentNode.remove();
                    alert('领取成功')
                    var numall = document.querySelectorAll('a');
                    gs.innerHTML = numall.length + '个';
                }
            }
        }
        allget.onclick = function () {
            if (xx.innerHTML == '登录') {
                alert('请登录');
            } else {
                var delall = document.querySelectorAll('a');
                if (delall.length == 0) {
                    alert('暂存箱暂无皮肤');
                } else {
                    for (k = 0; k < delall.length; k++) {
                        delall[k].parentNode.remove();
                    }
                    alert('全部领取成功');
                }
                gs.innerHTML = 0 + '个';
            }
        }
    </script>
</body>

</html>

login代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 350px;
            margin: 80px auto;
            border: 1px solid #ccc;
            padding: 0 80px;
            box-sizing: border-box;
        }

        h1 {
            text-align: center;
        }

        span {
            display: inline-block;
            width: 100px;
        }

        input {
            width: 220px;
            margin-bottom: 30px;
            border: 1px solid #ccc;
        }

        .tj {
            width: 200px;
            height: 30px;
            background-color: skyblue;
            border: none;
            margin: 50px auto;
            margin-left: 80px;
            color: #fff;
        }

        .nnn {
            width: 0;
            height: 0;
            border: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>请登录</h1>
        <form action="./index.html">
            <input type="text" name="nn" class="nnn">
            <div class="qq">
                <span>QQ号：</span> <input type="number" required name="qqh" class="q">
            </div>
            <div class="username">
                <span>用户名：</span> <input type="text" required name="user" class="w">
            </div>
            <div class="qu">
                <span>大区：</span>
                <select name="daqu">
                    <option value="艾欧尼亚">艾欧尼亚</option>
                    <option value="洛克萨斯">洛克萨斯</option>
                    <option value="黑色玫瑰">黑色玫瑰</option>
                    <option value="祖安">祖安</option>
                    <option value="男爵领域">男爵领域</option>
                    <option value="钢铁烈阳">钢铁烈阳</option>
                </select>
            </div>
            <input type="submit" class="tj" value="立即登录">
        </form>
    </div>
    <script>
        var q = document.querySelector('.q');
        var w = document.querySelector('.w');
        var login = document.querySelector('.tj');

        login.addEventListener('click', function () {
            if (q.value == '' || w.value == '') {
                alert('请输入账号信息');
            } else {
                location.href = "./index.html"
            }
        })


    </script>
</body>

</html>

js原生写lol抽皮肤抽奖

推荐阅读