简单的抽奖

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

唐鑫tx

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

阅读量494

点赞数

本文链接：https://blog.csdn.net/weixin_44545501/article/details/89969889

版权

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

摘要由CSDN通过智能技术生成

在这里用到了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);

}

并