简单的抽奖

最新推荐文章于 2021-11-01 17:09:04 发布

原创最新推荐文章于 2021-11-01 17:09:04 发布 · 580 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何利用layui插件创建一个简单的抽奖程序。主要涉及JavaScript代码，通过初始化设置，利用layui的动画效果和弹窗功能。抽奖过程中，根据九宫格的隐藏值判断中奖情况，并限制抽奖次数。在中奖后更新界面状态，防止重复抽奖。当达到最大抽奖次数时，会询问用户是否开启新的抽奖轮次。整个过程中，HTML结构、CSS样式和JavaScript交互紧密配合，确保抽奖体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里用到了layui的插件，使用了其中的动画效果和弹窗

一定要初始化

var layer;

var index;

var intcishu=0;  //为已抽次数

var intkaishicishu = 5;  //每轮最高抽奖次数

var boolsate = false;    //抽奖状态

var intin = @ViewBag.strValideCode;   //判断抽奖的一个随机值

其中Index为页面九宫格的隐藏值

在这里插入图片描述

其中大部分代码为JS

然后将九宫格的隐藏值，赋值给index，以便于判断，是否中奖

index
= othis[0].value;

因为该数据是数组，所以使用数字的方式获取，不然无法获取到值，如果不确定值为什么类型,建议先到页面输出一遍。

当我抽中大奖时（index=intin），就不可在本轮抽奖中继续抽奖，只能开启新一轮的抽奖

	if (anim === 'layui-anim-fadeout on') {

                        setTimeout(function () {

                           
			othis.removeClass(anim);

                            othis.addClass("red")

                        }, 500);

}

并且移除动画效果这个类，添加一个突出中奖的格子的类

在中奖后将boolsate的值改为true 就防止继续抽奖

在这里插入图片描述

当我抽奖次数到达了5次就会提示你没有抽奖次数了，然后询问用户是否开启新一轮的抽奖，开启后才能继续抽奖

每抽奖一次intcishu++;如果当intcishu等于intkaishicishu则没有抽奖次数了

在这里插入图片描述

如果当我抽奖次数大于5次时，就不会再弹窗提示框，所以为了防止这一个bug

加了一个条件，这样当我再次点击时，九宫格不会消失，而弹出提示框，让我重新开始新一轮的抽奖
在这里插入图片描述

当我每点击一次，页面的九宫格就会少一个，因为九个格子都是用的li

所以当我点击时，就删除一个li

在这里插入图片描述

当我鼠标移入格子时，鼠标会变成手状

并将有一个随机的伪类，比如放大，旋转，缩小

并且每一个询问，都要点击确定后才能开始下轮抽奖

Html：

固定的写法

                <li class="one layui-anim" data-anim="layui-anim-fadeout on" value="1"><span>^_^</span></li>

                <li class="two layui-anim" value="2" data-anim="layui-anim-fadeout on"><span>^_^</span></li>

                <li class="three layui-anim" value="3" data-anim="layui-anim-fadeout on"><span>^_^</span></li>

                <li class="four layui-anim" data-anim="layui-anim-fadeout on" value="4"><span>^_^</span></li>

                <li class="five layui-anim" value="5" data-anim="layui-anim-fadeout on"><span>^_^</span></li>

                <li class="six layui-anim" value="6" data-anim="layui-anim-fadeout on"><span>^_^</span></li>

                <li class="seven layui-anim" value="7" data-anim="layui-anim-fadeout on"><span>^_^</span></li>

                <li class="eight layui-anim" value="8" data-anim="layui-anim-fadeout on"><span>^_^</span></li>

                <li class="nine layui-anim" value="9" data-anim="layui-anim-fadeout on"><span>^_^</span></li>

这样简单的抽奖就完成了