九宫格随机抽奖（html篇）

实现九宫格随机抽奖的方法还是有很多的，博主的方法仅供小伙伴们参考，还请多多指教！🧐

一、代码思路

实现：当点击中间的马上抽奖按钮，会自动开始顺时针跳转，并且能够随机慢慢地停止，然后弹出当前停止所获得的奖品

1、CSS样式排版：

（1）500*500px的带class:banner属性的金色边框

（2）中间包裹一个460*460px的class:content内容（方便对九个格子进行排版）

（3）九个格子按常规顺序（从左到右，从上到下）放置，有统一的class:box属性，及各自放置图片的属性【除了中间的按钮class:btn，这样方便后面监听事件的与其他格子区分开来】

div class="banner">
    
    div class="content">
    
        div class="box box1">
    /div>
    
        div class="box box2">
    /div>
    
        div class="box box3">
    /div>
    
        div class="box box4">
    /div>
    
        div class="btn">
    /div>
    
        div class="box box5">
    /div>
    
        div class="box box6">
    /div>
    
        div class="box box7">
    /div>
    
        div class="box box8">
    /div>
    
    /div>
    
/div>
    

style>

    .banner {
    
        width: 500px;
    
        height: 500px;
    
        border: 8px solid rgb(227, 205, 162);
    
        margin: auto;
    
        position: relative;

    }

 
    .content {
    
        width: 460px;
    
        height: 460px;
    
        display: flex;
    
        flex-wrap: wrap;
    
        justify-content: space-between;
    
        align-content: space-between;
    
        position: absolute;
    
        top: 50%;
    
        left: 50%;

        transform: translate(-50%, -50%)
    }

 
    .box {
    
        height: 150px;
    
        width: 150px;
    
        background-size: cover;

    }

 
    .box1 {
    
        background-image: url('./imgs/default/0001.png');
    
        /* transition: 0.5s;
 */
    }

 
    .box2 {
    
        background-image: url('./imgs/default/0002.png');
    
        /* transition: 1s;
 */
    }

 
    .box3 {
    
        background-image: url('./imgs/default/0003.png');
    
        /* transition: 1.5s;
 */
    }

 
    .box4 {
    
        background-image: url('./imgs/default/0004.png');
    
        /* transition: 2s;
 */
    }

 
    .btn {
    
        height: 150px;
    
        width: 150px;
    
        background-size: cover;
    
        background-image: url('./imgs/active/btn.45112134.png');

    }

 
    .box5 {
    
        background-image: url('./imgs/default/0005.png');
    
        /* transition: 2.5s;
 */
    }

 
    .box6 {
    
        background-image: url('./imgs/default/0006.png');
    
        /* transition: 3s;
 */
    }

 
    .box7 {
    
        background-image: url('./imgs/default/0007.png');
    
        /* transition: 3.5s;
 */
    }

 
    .box8 {
    
        background-image: url('./imgs/default/0008.png');
    
        /* transition: 4s;
 */
    }
    
/style>
    

2、js模块：

（1）变量的定义

①用两个数组arr1、arr2存储变化前后八个格子的图片

②index：实时记录当前值

③timer：定时器、span：时间间隔

④count：记录当前次数、random：随机产生需要走的次数

⑤award：数组记录所有获奖商品文本

⑥isclick：当前是否可再点击

//记录当前值
var index = 0
var arr1 = ['./imgs/default/0001.png',
    './imgs/default/0002.png',
    './imgs/default/0003.png',
    './imgs/default/0004.png',
    './imgs/default/0005.png',
    './imgs/default/0006.png',
    './imgs/default/0007.png',
    './imgs/default/0008.png']
var arr2 = ['./imgs/active/0001.png',
    './imgs/active/0002.png',
    './imgs/active/0003.png',
    './imgs/active/0004.png',
    './imgs/active/0005.png',
    './imgs/active/0006.png',
    './imgs/active/0007.png',
    './imgs/active/0008.png']
var n = [0,1,2,4,7,6,5,3]
//定时器
var timer;
    
//时间间隔
span = 100
//次数
var count = 0;
    
//随机
var random = 0;

//奖品
var award = ['毛巾',
    '10元',
    '2积分',
    '杯子',
    '3元',
    '置物架',
    '5元',
    '满99减10']
//是否可再点击
isclick = 0

（2）监听事件的定义

①开始按钮的监听

②八个商品格子的的监听

//监听
var box = document.querySelectorAll('.box')
var btn = document.querySelector('.btn')

（3）整体变化操作

①点击事件：为了实现无限次抽奖及抽奖过程中无法再点击抽奖按钮，注意需要在点击开始抽奖按钮后进行部分值的重新初始化

//点击事件
btn.onclick = function () {

    if(isclick == 0){
    
        count = 0
        span = 100
        random = Math.floor(Math.random()*20+30);
//随机产生需要变化的次数（在30-50之间）
        time()//定时器函数的调用
        isclick = 1//设置不可再点击
    }

}

②定时器：实现八个格子的变化效果，每次变化后就加一次次数

//定时器
function time() {

    
    timer = setTimeout(function () {
    
    
    //清除
    box[n[index]].style.backgroundImage = 'url('+arr1[n[index]]+')'
    
    //记录
    index++;

    if(index==8){

        index = 0
    }
    
    //新
    box[n[index]].style.backgroundImage = 'url('+arr2[n[index]]+')'
    //次数
    count++;

    
    stop()
    
    }
, span)
}

③停止：控制结束前变化速度的时间间隔，通过递归的方式循环定时器函数，以及最后的判断是否停止定时器，及重新设置为可再点击抽奖

//停止
function stop() {
    
    //当快结束的时候，八个格子的变化速度减慢
    if(count>
random-10){
    
        span += 100;
    
        // console.log(span);

    }
    
    time()  //递归
    console.log(count,random);

    if(count == random){

        clearTimeout(timer)//清除定时器
        setTimeout(function(){
    
            // console.log(award[index]);
    
            alert(award[index]);
//延迟弹窗显示获得的奖品
        }
,200)
        isclick = 0//设置为可再点击抽奖
    }

}
    

二、完整代码展示

图片及完整代码包，小伙伴们可以去博主的资源去下载🧐

注意：图片包与代码文件的相对地址

!DOCTYPE html>
    
html lang="en">
    
 
head>
    
    meta charset="UTF-8">
    
    meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    title>
    Document/title>
    
    style>

        .banner {
    
            width: 500px;
    
            height: 500px;
    
            border: 8px solid rgb(227, 205, 162);
    
            margin: auto;
    
            position: relative;

        }

 
        .content {
    
            width: 460px;
    
            height: 460px;
    
            display: flex;
    
            flex-wrap: wrap;
    
            justify-content: space-between;
    
            align-content: space-between;
    
            position: absolute;
    
            top: 50%;
    
            left: 50%;

            transform: translate(-50%, -50%)
        }

 
        .box {
    
            height: 150px;
    
            width: 150px;
    
            background-size: cover;

        }

 
        .box1 {
    
            background-image: url('./imgs/default/0001.png');
    
            /* transition: 0.5s;
 */
        }

 
        .box2 {
    
            background-image: url('./imgs/default/0002.png');
    
            /* transition: 1s;
 */
        }

 
        .box3 {
    
            background-image: url('./imgs/default/0003.png');
    
            /* transition: 1.5s;
 */
        }

 
        .box4 {
    
            background-image: url('./imgs/default/0004.png');
    
            /* transition: 2s;
 */
        }

 
        .btn {
    
            height: 150px;
    
            width: 150px;
    
            background-size: cover;
    
            background-image: url('./imgs/active/btn.45112134.png');

        }

 
        .box5 {
    
            background-image: url('./imgs/default/0005.png');
    
            /* transition: 2.5s;
 */
        }

 
        .box6 {
    
            background-image: url('./imgs/default/0006.png');
    
            /* transition: 3s;
 */
        }

 
        .box7 {
    
            background-image: url('./imgs/default/0007.png');
    
            /* transition: 3.5s;
 */
        }

 
        .box8 {
    
            background-image: url('./imgs/default/0008.png');
    
            /* transition: 4s;
 */
        }
    
    /style>
    
/head>
    
 
body>
    
    div class="banner">
    
        div class="content">
    
            div class="box box1">
    /div>
    
            div class="box box2">
    /div>
    
            div class="box box3">
    /div>
    
            div class="box box4">
    /div>
    
            div class="btn">
    /div>
    
            div class="box box5">
    /div>
    
            div class="box box6">
    /div>
    
            div class="box box7">
    /div>
    
            div class="box box8">
    /div>
    
        /div>
    
    /div>
    
    script>
    
//记录当前值
var index = 0
var arr1 = ['./imgs/default/0001.png',
    './imgs/default/0002.png',
    './imgs/default/0003.png',
    './imgs/default/0004.png',
    './imgs/default/0005.png',
    './imgs/default/0006.png',
    './imgs/default/0007.png',
    './imgs/default/0008.png']
var arr2 = ['./imgs/active/0001.png',
    './imgs/active/0002.png',
    './imgs/active/0003.png',
    './imgs/active/0004.png',
    './imgs/active/0005.png',
    './imgs/active/0006.png',
    './imgs/active/0007.png',
    './imgs/active/0008.png']
var n = [0,1,2,4,7,6,5,3]
//监听
var box = document.querySelectorAll('.box')
var btn = document.querySelector('.btn')
//定时器
var timer;
    
//时间间隔
span = 100
//次数
var count = 0;
    
//随机
var random = 0;

//奖品
var award = ['毛巾',
    '10元',
    '2积分',
    '杯子',
    '3元',
    '置物架',
    '5元',
    '满99减10']
//是否可再点击
isclick = 0
//点击
btn.onclick = function () {

    if(isclick == 0){
    
        count = 0
        span = 100
        random = Math.floor(Math.random()*20+30);

        time()
        isclick = 1
    }

    
}

 
//定时器
function time() {

    
    timer = setTimeout(function () {
    
    
    //清除
    box[n[index]].style.backgroundImage = 'url('+arr1[n[index]]+')'
    
    //记录
    index++;

    if(index==8){

        index = 0
    }
    
    //新
    box[n[index]].style.backgroundImage = 'url('+arr2[n[index]]+')'
    //次数
    count++;

    
    stop()
    
    }
, span)
}

//停止
function stop() {
    
    if(count>
random-10){
    
        span += 100;
    
        // console.log(span);

    }
    
    time()  //递归
    console.log(count,random);

    if(count == random){

        clearTimeout(timer)
        setTimeout(function(){
    
            // console.log(award[index]);
    
            alert(award[index]);

        }
,200)
        isclick = 0
    }

}
    
 
 
    /script>
    
/body>
    
 
/html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！