JS实现简单九宫格抽奖


Posted in Javascript onJune 28, 2022

用JavaScript写一个九宫格的抽奖盘,供大家参考,具体内容如下

点击中间的块,选中奖品的亮块会在边缘的8个块循环;

选中后,弹出选中的内容;

代码参考:

HTML文件:

<body>
<div class="box">
    <ul id="jiangPin">
        <li><a href="javascript:viod(0);" ><span>奖品 1</span></a></li>
        <li><a href="javascript:viod(0);" ><span>奖品 2</span></a></li>
        <li><a href="javascript:viod(0);" ><span>奖品 3</span></a></li>
        <li><a href="javascript:viod(0);" ><span>奖品 4</span></a></li>
        <li><a href="javascript:viod(0);" ><span>奖品 5</span></a></li>
        <li><a href="javascript:viod(0);" ><span>奖品 6</span></a></li>
        <li><a href="javascript:viod(0);" ><span>奖品 7</span></a></li>
        <li><a href="javascript:viod(0);" ><span>奖品 8</span></a></li>
    </ul>
    <button type="button" class="btn" id="beginBtn">点击开始</button>
    <div class="tishi" id="tishi">
        <span>恭喜您获得:</span>
        <p></p>
        <button>确定</button>
    </div>
</div>
</body>

通过position定位来固定奖盘各个板块的位置,将有奖品的8个块分散在九宫格的边缘,开始按钮在九宫格正中间,将弹出的提示框放于整个奖盘的上层显示,初始将其隐藏。

CSS文件:

.box{
    width: 450px;
    height: 450px;
    background-color: #9a6e3a;
    border: 2px solid #990055;
    position: relative;
    z-index: 10;
}
.box>ul>li{
    position: absolute;
    width: 148px;
    height: 148px;
    border: 1px #222222 solid;
    background-color: #ad889d;
}
.box>ul>li>a{
    display: block;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 148px;
}
/* 开始按钮 */
.btn{
    position: absolute;
    top: 150px;
    left: 150px;
    width: 150px;
    height: 150px;
    border: 1px #222222 solid;
    background-color: #7d53c7;
    outline: none;
    cursor: pointer;
    color: #fff;
    font-size: 25px;
    transition: all 0.5s;
    z-index: 20;
}
.btn:hover{
    background-color: #df04ff;
    font-size: 30px;
}
.btn:active{
    background-color: #7d53c7;
}
.box>ul>li.on{
    background-color: #f00;
}
/* 开始按钮 end */

/* 奖品定位 */
.box>ul>li:nth-child(1){
    top: 0;
    left: 0;
}
.box>ul>li:nth-child(2){
    top: 0;
    left: 150px;
}
.box>ul>li:nth-child(3){
    top: 0;
    left: 300px;
}
.box>ul>li:nth-child(4){
    top: 150px;
    left: 300px;
}
.box>ul>li:nth-child(5){
    top: 300px;
    left: 300px;
}
.box>ul>li:nth-child(6){
    top: 300px;
    left: 150px;
}
.box>ul>li:nth-child(7){
    top: 300px;
    left: 0;
}
.box>ul>li:nth-child(8){
    top: 150px;
    left: 0;
}
/* 奖品定位 end */

/* 提示框 */
.tishi{
    width: 300px;
    height: 146px;
    border: 2px #990055 solid;
    background: #92EC1F;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -75px;
    margin-left: -150px;
    z-index: 30;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    display: none;
    animation: tishiAni 0.5s both;
    transition: all 0.5s;
}
.tishi>p{
    color: red;
    font-size: 28px;
    margin-top: 20px;
}
.tishi>button{
    width: 60px;
    height: 30px;
    border:none;
    outline: none;
    cursor: pointer;
    position: absolute;
    right: 30px;
    bottom: 20px;
}
@keyframes tishiAni {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
/* 提示框 end */

通过计时器来实现奖品亮块的循环

JavaScript文件:

{
    let jiangPinChi = [
        "奖品1",
        "奖品2",
        "奖品3",
        "奖品4",
        "奖品5",
        "奖品6",
        "奖品7",
        "奖品8",
    ];

    let index = 0;
    let times = Math.round( Math.random()*20 ) +20 ;
    let jiangPin = document.getElementById("jiangPin");
    let beginBtn = document.getElementById("beginBtn");
    let tishi = document.getElementById("tishi");
    let cont = tishi.children;
    let jPLi = jiangPin.children;

    let liBro = function (tag) {
        let fat = tag.parentNode;
        let tagLi = fat.children;
        let othLis = [];
        for (let jPLi of tagLi) {
            if (jPLi === tag) {
                continue;
            }
            othLis.push(jPLi);
        }
        return othLis;
    };

    let showing = function( index ) {
        let othLis = liBro( jPLi[index] );
        for( let i = 0; i<=othLis.length-1 ; i++ ){
            othLis[i].classList.remove("on");
        }
        // othLis.forEach(function( value,i ){
        //     value.classList.remove("on");
        // });
        jPLi[index].classList.add("on");
    };

    let changeFun = function( event ){
        let myset = setInterval(function(){
            index++;
            times--;
            if( index > jPLi.length-1 ){
                index = 0;
            }
            showing( index );
            if( times <= 0 ){
                clearInterval(myset);
                times = Math.round( Math.random()*20 ) +20;
                tishi.style.display = "block";
                cont[1].innerHTML = jiangPinChi[index];
            }
        },100);
    };
    beginBtn.addEventListener("click",changeFun);
    cont[2].addEventListener("click",function( event ){
        tishi.style.display = "none";
    });
}

当然,这个可以扩展成更多的类型,实现不止九宫格的奖盘抽奖模式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。


Tags in this post...

Javascript 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 #Javascript
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
小程序自定义轮播图圆点组件
Jun 25 #Javascript
微信小程序实现轮播图指示器
Jun 25 #Javascript
create-react-app开发常用配置教程
Jun 25 #Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 #Javascript
You might like
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
php MySQL与分页效率
2008/06/04 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
require.js的用法详解
2015/10/20 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python删除某个目录文件夹的方法
2020/05/26 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
自愿离婚协议书范本
2014/09/13 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL