简单的抽奖功能的实现

最新推荐文章于 2024-04-07 09:15:26 发布

VIP灰太狼

最新推荐文章于 2024-04-07 09:15:26 发布

阅读量358

点赞数

文章标签： javascript css html css3 html5

本文链接：https://blog.csdn.net/qq_45437626/article/details/106033284

版权

一个简单王者荣耀抽奖功能的实现。

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王者荣耀</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/demo.js"></script>
</head>
<body class="back">
        <div class="detail">
            <div class="one">
                <img id="1" class="act active" src="img/01.jpg" alt="">
                <img id="2" class="act" src="img/02.jpg" alt="">
                <img id="3" class="act" src="img/03.jpg" alt="">
                <img id="4" class="act" src="img/04.jpg" alt="">
                <img id="5" class="act" src="img/05.jpg" alt="">
            </div>
            <div class="one">
                <img id="14" class="act" src="img/14.jpg" alt="">
                <img id="6" class="act" src="img/06.jpg" alt="">
            </div>
            <div class="one">
                <img id="13" class="act" src="img/13.jpg" alt="">
                <img id="7" class="act" src="img/07.jpg" alt="">
            </div>
            <div class="one">
                <img id="12" class="act" src="img/12.jpg" alt="">
                <img id="11" class="act" src="img/11.jpg" alt="">
                <img id="10" class="act" src="img/10.jpg" alt="">
                <img id="9" class="act" src="img/09.jpg" alt="">
                <img id="8" class="act" src="img/08.jpg" alt="">
            </div>
            <button class="btn" onclick="go()">
                点击抽奖
            </button>
        </div>
</body>
</html>

css部份

body, div {
    padding: 0;
    margin: 0;
}
.back {
    background: url('../img/bg.jpg') no-repeat;
    background-size: 100%;
}
.detail{
    width: 1000px;
    height: 550px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
}

.detail .one{
    display: flex;
    justify-content: space-between;
}

.detail img{
    opacity: 0.6;
}

.detail .active{
    opacity: 1;
}

.detail .btn{
    width: 200px;
    height: 68px;
    background: url('../img/btn_bg.jpg') no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color:#fff;
    text-align: center;
    font-size: 20px;
    line-height: 68px;
    border-radius: 1px;
    border: none;
    outline: none;
}

js部份

var i = 1;
var l = 100;
function go () {
        var inter = parseInt(Math.random()*14+1)+14;
        var num = setInterval(() => {
            inter--;
            if (inter==0){
                clearInterval(num);
            }
            var items = document.getElementsByClassName("act");
            for (var item of items){
                item.classList.remove("active");
            }
            var ele = document.getElementById(i);
            ele.classList.add("active");
            i++;
            if (i>14){
                i=1;
            }
        },l);

}