每月两个小小项目——简易九宫格抽奖

最新推荐文章于 2023-10-18 11:46:47 发布

YF-SOD

最新推荐文章于 2023-10-18 11:46:47 发布

阅读量274

点赞数

分类专栏：小小项目文章标签： JS+HTML+CSS 网页版简易九宫格抽奖小小项目网页九宫格抽奖 CSS3网页九宫格抽奖 JavaScript9宫格抽奖

本文链接：https://blog.csdn.net/AIWWY/article/details/116046868

版权

小小项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

项目实现图片GIF

项目思想

设置9个li标签为inline-block属性，组成9宫格，设置开关，监听中间li点击事件，每次点击关闭开关（防止运行时再次点击），运行抽奖，抽奖是通过将当前li的子标签div清除class名，并设置下一个li的class名为active，然后匀速的抽奖通过setInterval执行，先加速中运输后减速的通过setInterval执行，最后执行完毕打开开关。

详细版（带大量解释）

HTML代码

<!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>
    <link rel="stylesheet" href="drawLottery.css">
</head>
<body>
    <div class="wrap">
        <li>
            <img src="1.jpg" alt="">
            <div class="mask"></div>
            <!-- mask用于抽中后的显示状态，以display：none存在，当抽中时修改class名为active，并将active的display改为inline-block -->
        </li>
        <li>
            <img src="2.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li>
            <img src="3.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li>
            <img src="4.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li>
            <img src="9.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li>
            <img src="5.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li>
            <img src="6.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li>
            <img src="7.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li>
            <img src="8.jpg" alt="">
            <div class="mask"></div>
        </li>
    </div>
    <script src="drawLottery.js"></script>
</body>
</html>

CSS代码

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrap{
    width: 600px;
    height: 600px;
    font-size: 0;
    /* 去掉html中li之间的回车符导致的文字分割距离 */
    border: 5px solid red;
    margin: 0 auto;
    /* 水平居中 */
}
li,
img{
    width: 200px;
    height: 200px;
    display: inline-block;
}

li{
    position: relative;
    /* 用于给抽中的显示状态定位 */
}
.mask{
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    /* 使mask覆盖在图片上，并不占位 */
    box-shadow: 0px -5px 10px 0px wheat inset, -5px 0px 10px 0px wheat inset,
    5px 0px 10px 0px wheat inset, 0px 5px 10px 0px wheat inset;
    /* 阴影本身是存在box的padding下的即刚好是padding+content内容不包括margin，有5个参数，前2个是必须的参数，第一个代表阴影向右水平
    偏移多少像素（负为反向）。第二个代表向下偏移多少像素。第三个代表模糊距离，从阴影边框向外模糊。第四个代表扩大像素，使整个阴影
    宽高扩大。第五个代表阴影颜色，第六个代表模糊方向，inset会使第三个值阴影边框向内部模糊。 */
    display: none;
    /* 先不显示，当激活时显示 */
}
.wrap .active .mask{
    display: inline-block;
    /* 抽中的给li添加class='active';由于css权重大于.mask 将会覆盖display属性。css权重属性详细解释https://blog.csdn.net/AIWWY/article/details/113886828 */
}

JS代码

var liArr = document.getElementsByTagName('li'),
    lotteryArr = [0, 1, 2, 5, 8, 7, 6, 3],// 抽奖一圈的对应liArr中的顺序数组
    lotteryLi,
    index = 0,
    onOff = true;
function runOne() {
    // 抽奖走一格时，将当前格子class名清除，将下一格子class='active'。
    liArr[lotteryArr[index]].className = '';
    index++;
    if (index == 8) {
        index = 0;
    }
    liArr[lotteryArr[index]].className = 'active';
}
liArr[4].onclick = function () {
    // 给第5个li绑定抽奖事件。
    if (onOff) {
        onOff = false;
        // 关闭开关防止再次点击
        var tim = setInterval(function () {
            runOne();
        }, 50);
        // 匀速抽奖，每个200毫秒运行一次事件
        setTimeout(function () {
            clearInterval(tim);
            onOff = true;
            // 运行完成打开开关可以再次点击。
        }, Math.random() * 2000 + 4000)
        // 间隔6~8秒运行该函数，将setInterval停止。
        if (index == 0) {
            liArr[lotteryArr[index]].className = '';
            liArr[lotteryArr[index + 1]].className = 'active';
        }
        // 防止抽中大奖，即避免抽中第lotteryArr[index]格，改为抽中下一个。注意这样放置会失效，因为setTimeout和setInterval
        // 是在任务队列中，而普通代码会现在执行栈中先运行完，再执行任务队列。应把这一段放在setTimeout内部，clearInterval下面。
        //先加速中匀速后减速版，见简洁版中。
    }
}

简洁版（不带解释）

HTML代码

<!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>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div class="wrap">
        <ul>
            <li>
                <img src="1.jpg" alt="">
                <div class="mask"></div>
            </li>
            <li>
                <img src="2.jpg" alt="">
                <div class="mask"></div>
            </li>
            <li>
                <img src="3.jpg" alt="">
                <div class="mask"></div>
            </li>
            <li>
                <img src="4.jpg" alt="">
                <div class="mask"></div>
            </li>
            <a><img src="9.jpg" alt=""></a>
            <li>
                <img src="5.jpg" alt="">
                <div class="mask"></div>
            </li>
            <li>
                <img src="6.jpg" alt="">
                <div class="mask"></div>
            </li>
            <li>
                <img src="7.jpg" alt="">
                <div class="mask"></div>
            </li>
            <li>
                <img src="8.jpg" alt="">
                <div class="mask"></div>
            </li>
        </ul>             
    </div>
    <script src="demo.js"></script>
</body>
</html>

CSS代码

* {
  padding: 0;
  margin: 0;
}
ul {
  margin: 0 auto;
  padding: 0;
  width: 575px;
  height: 513px;
  border: 4px solid red;
  font-size: 0;
}
li,
a {
  position: relative;
  display: inline-block;
  width: 190px;
  height: 170px;
  border: 0.5px solid red;
}
ul li .mask {
  width: 190px;
  height: 170px;
  position:absolute;
  left: 0;
  top: 0;
  display: none;
  box-shadow: 0px -5px 10px 0px black inset, -5px 0px 10px 0px black inset,
    5px 0px 10px 0px black inset, 0px 5px 10px 0px black inset;
}
ul .active .mask {
  display: inline-block;
}
img {
  height: 170px;
  width: 190px;
}

JS代码

var arr = [0, 1, 2, 4, 7, 6, 5, 3],
    arrLi = document.getElementsByTagName('li'),
    oBtn = document.getElementsByTagName('a')[0],
    time,
    index = 0,
    speed,
    roundSum,
    ran,
    swh = true;
function runOne() {
    arrLi[arr[index]].className = '';
    index++;
    if (index >= 8) {
        index = 0;
    }
    arrLi[arr[index]].className = 'active';
}
oBtn.onclick = function () {
    if (swh) {
        // 匀速模式
        // swh=false;
        // time=setInterval(function(){
        //     runOne();
        // },50);
        // setTimeout(function(){
        //     clearInterval(time);
        //     if(index==0){
        //         arrLi[arr[index]].className='';
        //         arrLi[arr[index+1]].className='active';
        //     }
        //     swh=true;
        // },Math.random()*500+1000);
        //开头加速，末尾减速模式
        speed = 1000;
        roundSum = 0;
        swh = false;
        ran = 40 + Math.random()*20;
        function luck(speed) {
            if (roundSum <= ran) {
                if (speed > 50) {
                    speed -= 50;
                }
            } else{
                if(speed!=1000){
                    speed+=50;
                }else{
                    swh = true;
                    return;
                }
            }
            roundSum++;
            runOne();
            setTimeout(function(){luck(speed)},speed)
        }
        luck(speed);
    }
}

YF-SOD

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
每月两个小小项目——简易九宫格抽奖

目录项目实现图片GIF项目思想详细版（带大量解释）HTML代码CSS代码JS代码简洁版（不带解释）HTML代码CSS代码JS代码项目实现图片GIF项目思想设置9个li标签为inline-block属性，组成9宫格，设置开关，监听中间li点击事件，每次点击关闭开关（防止运行时再次点击），运行抽奖，抽奖是通过将当前li的子标签div清除class名，并设置下一个li的class名为active，然后匀速的抽奖通过setInterval执行，先加速中运输后
复制链接

扫一扫