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 相关文章推荐
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
数据库的日期格式转换
2006/10/09 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Django如何自定义分页
2018/09/25 Python
python pandas模块基础学习详解
2019/07/03 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
个人自我鉴定范文
2013/10/04 职场文书
生产现场工艺工程师岗位职责
2013/11/28 职场文书
上班迟到检讨书
2014/01/10 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
法律进社区实施方案
2014/03/21 职场文书
售房委托书
2014/08/30 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书