首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

html5实现九宫格抽奖可固定抽中某项奖品

Posted in HTML / CSS onJune 15, 2020

原生js写的一个九宫格抽奖程序 （周末在家闲着也是闲着）
我写的这个抽奖是拿来整蛊我女朋友， 因为每次抽奖的结果都是同一个。。
哈哈哈哈哈哈哈哈哈哈哈哈哈
我会附上正常抽奖的的代码和固定只能抽到某一个的代码；

HTML代码如下 ⤵️

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html,
        body,
        .modal-cover {
            width: 100%;
            height: 100%;
        }

        body {
            background: url('./img/background.jpg') no-repeat center;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .container {
            width: 90%;
            height: 300px;
            /* width: 831px; */
            height: 336px;
            /* border: 1px solid; */
            display: flex;
            flex-wrap: wrap;
            margin: 100px auto;
            border-radius: 6px;
            background: #fff;
            padding: 5px 0 5px 10px;
        }

        .item {
            width: 30%;
            height: 30%;
            /* outline: 1px solid black; */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18;
            border-radius: 2px;
            /* border: 1px solid; */
            margin: 4px;
            box-shadow: 1px 1px 14px #ccc;
            position: relative;
        }

        .cover {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            top: 0;
            left: 0;
            border-radius: 2px;
        }

        .item-box {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .btn-box {
            background-color: #faa5b6;
            cursor: pointer;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 100px;
        }

        .modal {
            width: 80%;
            height: 150px;
            position: fixed;
            top: 50%;
            left: 50%;
            background: rgba(255, 255, 255, 255);
            border-radius: 4px;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 20px 10px 10px;
            z-index: 2;
        }

        .modal .confirm-btn {
            background: pink;
            width: 170px;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            margin: 0 auto;
            margin-top: 20px;
            cursor: pointer;
            border-radius: 4px;
        }

        .modal-cover {
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
            z-index: 1;
            display: none;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="btn-box item">
            <div class="cover" style="background: none;"></div>
            <div class="item-box">
                开始抽奖
            </div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
    </div>
    <div class="modal-cover"></div>
    <div class="modal" style="display: none;">
        <span></span>
        <div class="confirm-btn">不信邪！再试一次！</div>
    </div>
</body>
<script src="./index.js"></script>

</html>

js代码?

// 封装工具函数
const util = {
    getELe: (str) => {
        return document.querySelector(str)
    },
    getELes: (str) => {
        return document.querySelectorAll(str)
    }
}
let items = util.getELes(".item-box"),
    covers = util.getELes('.cover'),
    imgArr = ['CHANEL', 'Dior', 'givenchy', 'dabao', 'empty', 'lamer', 'lancome', 'yashilandai', 'YSL', ]

for (let i = 0; i < items.length; i++) {
    if (imgArr[i] === 'empty') continue;
    let el = items[i];
    el.style.backgroundImage = `url(./img/${imgArr[i]}.png)`
}
let modal = util.getELe('.modal'),
    mask = util.getELe('.modal-cover'),
    modalInner = util.getELe('.modal span');
let tryBtn = util.getELe('.confirm-btn');
// 存放每一个奖项的下标
let arr = [0, 1, 2, 5, 8, 7, 6, 3],
    i = 0,
    count = 0,
    stopTimer;
let rand = Math.floor(Math.random() * 8 + 50);
const rotate = () => {
    // 先给所有的奖项盒子加蒙层
    for (let j = 0; j < arr.length; j++) {
        covers[arr[j]].style.background = 'rgba(0, 0, 0, 0.3)';
    }
    // 将当前奖项的遮罩层去除
    covers[arr[i]].style.background = 'none';
    i++;
    if (i === arr.length) {
        i = 0;
    }
     // 通过count调整旋转速度
    count++;
    // 根据count 重新调整计时器速度
    if (count === 5 || count === 45) {
        clearInterval(stopTimer);
        stopTimer = setInterval(rotate, 200);
    }
    if (count === 10 || count === 35) {
        clearInterval(stopTimer);
        stopTimer = setInterval(rotate, 100);
    }
    if (count === 15) {
        clearInterval(stopTimer);
        stopTimer = setInterval(rotate, 50);
    }
    // 固定抽中某个奖项
    // if (count === 40) {
    //     clearInterval(stopTimer);
    //     count = 0;
    //     rand = 0;
    //     setTimeout(() => {
    //         modalInner.innerText = '亲！恭喜你中奖大宝SOD蜜一瓶！^_^ ?';
    //         modal.style.display = 'block'
    //         mask.style.display = 'block'
    //     }, 500);
    // }

    // 当等于上面的随机数时
    if (count === rand) {
        clearInterval(stopTimer);
    }
    // 点击再试一次
    tryBtn.addEventListener('click', () => {
        modal.style.display = 'none'
        mask.style.display = 'none'
    })


}
// 给开始按钮绑定点击事件 点击后执行 rotate 
const start = () => {
    console.log(count)
    clearInterval(stopTimer);
    stopTimer = setInterval(rotate, 300);
}
covers[4].addEventListener("click", start);

如果想设置固定抽中某个奖项，// if (count === 40) 这个count的值需要你自己去算一下，图片自己选几个。
代码copy可直接运行。
最终效果，有点丑。你们想玩的自己发挥下吧。

html5实现九宫格抽奖可固定抽中某项奖品

到此这篇关于html5实现九宫格抽奖可固定抽中某项奖品的文章就介绍到这了,更多相关html5九宫格抽奖内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！

html5实现九宫格抽奖可固定抽中某项奖品

- Author -

Damon

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
css3弹性盒模型（Flexbox）详细介绍
Oct 08 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
HTML5探秘：用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 #HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 #HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 #HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 #HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 #HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 #HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 #HTML / CSS
S900(1) 晶体管(2) MOTOROLA(1) 77A(2) 66-XI(1) 摩托罗拉(1) ETON(1) VOLVO(1) 沃尔沃(1) 军机(1)
You might like
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
ThinkPHP之getField详解
2014/06/20 PHP
phplot生成图片类用法详解
2015/01/06 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
理解javascript函数式编程中的闭包（closure）
2016/03/08 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
Django forms组件的使用教程
2018/10/08 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python开头的coding设置方法
2019/08/08 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
Banggood官网：面向全球客户的综合商城
2017/04/19 全球购物
美国购买隐形眼镜网站：Lenses For Less
2020/07/05 全球购物
刑事辩护授权委托书格式
2014/10/13 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
安全教育培训制度
2015/08/06 职场文书
《鲸》教学反思
2016/02/23 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
Python中request的基本使用解决乱码问题
2022/04/12 Python