JavaScript模仿CF王者轮回_js怎么写cf外挂-CSDN博客

本文链接：https://blog.csdn.net/weixin_44567289/article/details/88552718
JavaScript模仿CF王者轮回

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ceshi12</title>
  
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #yuan {
            margin: 0 auto;
            position: relative;
        }

            #yuan div {
                /*background-color: red;*/
                width: 24.5%;
                height: 23%;
                display: inline-block;
            }

        #dian {
            position: absolute;
            top: 25%;
            left: 25%;
        }

        #t5 {
            position: absolute;
            top: 25%;
            right: 0;
            background: url('../../../../images/2/5.jpg') center;
        }

        #t6 {
            position: absolute;
            top: 50%;
            right: 0;
            background: url('../../../../images/2/6.jpg') center;
        }

        #t7 {
            position: absolute;
            bottom: 0;
            right: 0;
            background: url('../../../../images/2/7.jpg') center;
        }

        #t8 {
            position: absolute;
            bottom: 0;
            right: 25%;
            background: url('../../../../images/2/8.jpg')center ;
        }

        #t9 {
            position: absolute;
            bottom: 0;
            right: 50%;
            background: url('../../../../images/2/9.jpg')center;
        }

        #t10 {
            position: absolute;
            bottom: 0;
            right: 75%;
            background: url('../../../../images/2/10.jpg')center;
        }

        #t11 {
            position: absolute;
            top: 50%;
            left: 0;
            background: url('../../../../images/2/11.jpg')center;
        }

        #t12 {
            position: absolute;
            top: 25%;
            left: 0;
            background: url('../../../../images/2/12.jpg')center;
        }
        #t1 {
            background: url('../../../../images/2/13.jpg')center;
        }
        #t2 {
            background: url('../../../../images/2/2.jpg')center;
        }
        #t3 {
            background: url('../../../../images/2/3.jpg')center;
        }
        #t4 {
               position: absolute;
            top: 0;
            right: 0;
            background: url('../../../../images/2/41.png')center;
        }
        #anni{
            width:60%;
            height:20%;
             position: absolute;
              top: 60%;
            left: 20%;
            background-color:#ba190f;
        }
        .active {
            
            background-image: url('../../../../images/2/tu.jpg')!important;
        }
         .actives{
           background-color: yellow !important;
        }
    </style>
</head>
<body>
    <div id="yuan">
        <div id="t1">

        </div>
        <div id="t2">

        </div>
        <div id="t3">

        </div>
        <div id="t4">

        </div>
        <div id="t5">

        </div>
        <div id="t6">

        </div>
        <div id="t7">

        </div>
        <div id="t8">

        </div>
        <div id="t9">

        </div>
        <div id="t10">

        </div>
        <div id="t11">
            
        </div>
        <div id="t12">

        </div>
        <div id="dian">
            <button id="anni" class="btn btn-lg" type="button"onclick="anim()">点击抽奖</button>
        </div>
    </div>
    <script>
        window.onload = function () {
            tiao();
        }
        function tiao() {//调样式
            var width = window.innerWidth;
            var height = window.innerHeight;
            var body = document.getElementsByTagName('body')[0];
            body.style.width = width + 'px';
            body.style.height = height + 'px';
            var yuan = document.getElementById('yuan');
            yuan.style.width = parseInt(width * 0.8) + 'px';
            yuan.style.height = parseInt(height * 0.8) + 'px';
            yuan.style.backgroundColor = '#0e0905';
            var dian = document.getElementById('dian');
            dian.style.width = parseInt(yuan.offsetWidth * 0.5) + 'px';
            dian.style.height = parseInt(yuan.offsetHeight * 0.5) + 'px';
            dian.style.backgroundColor = '#0e0905';
            var Kwidth = screen.availWidth;
            yuan.style.zoom = width / Kwidth;
        }
        window.onresize = tiao;//屏幕改变事件

        var i = 1;//记录屏数
        var ji;//间隔性定时器
        var kai = false;//开关
        var shu = 0;//随机数
        var award = ["王者之影", "M4A1-雷神", "AK47-火麒麟", "巴雷特-苍龙", "斯泰尔-潜龙", "屠龙", "AK47-无影", "汤姆逊-烈龙", "斩神刀", "王者之啸", "王者之魄", "王者之魂"];//奖励
        function anim() {
            shu = parseInt(Math.random() * 38);
            if (shu<=12) {
                shu += 24;
            }           
            if (kai == false) {
                kai = true;           
            var yuan = document.getElementById('yuan').getElementsByTagName('div');
            ji = setInterval(function () {
                if (shu == 0) {
                    console.log(i)
                    clearInterval(ji);
                    shi();
                } else {
                    for (var j = 1; j < yuan.length; j++) {//清除上一个选中
                        if (document.getElementById("t" + j + "").className == "active") {
                            document.getElementById("t" + j + "").className = "";
                            break;
                        }
                    }
                    if (i == 13) {
                        i = 1;
                    } else {
                        document.getElementById("t" + i + "").className = "active";//选中
                        i++;
                    }
                    shu--;
                }              
           }, 100)
            }          
        }
        function shi() {                    
                for (var j = 1; j <= 12; j++) {
                    if (document.getElementById("t" + j + "").className == "active") {
                        document.getElementById("t" + j + "").className = "";
                        break;
                    }
                }               
                document.getElementById("t" + i + "").className = "active";     //选中   
                setTimeout(function () {
                    console.log(award)
                alert("恭喜你，获得" + award[i-1] + "");//输出
                kai = false;
                i = 1;//回到第一屏
                document.getElementById("t" + i + "").className = 'actives';
            }, 500)
        }
    </script>
</body>
</html>
效果图：
在这里插入图片描述