jQuery旋转抽奖

3 篇文章 0 订阅
1 篇文章 0 订阅

轮盘抽奖最终样式

在这里插入图片描述
废话不多说先写静态样式:
html

	<section></section>
    <button id="Cz">充值两千万</button>

别问为什么,html样式就是这么少其他的都用jquery写

接下来写css

<style>
        section {
            width: 600px;
            height: 600px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            padding: 10px;
            background: rgb(165, 245, 7);
            border: 10px solid #757575;
        }

        section div {
            width: 170px;
            line-height: 170px;
            text-align: center;
            background-color: rgb(238, 119, 139);
            color: #f0f0f0;
            font-weight: 800;
            font-size: 18px;
            border: 10px solid rgba(131, 231, 17, 0.548);
        }

        .red {
            background-color: red;
        }

        #Cz {
            background: red;
            width: 640px;
            border: 10px solid #757575;
            font-size: 18px;
            color: #fff;
            font-weight: 800;
        }
    </style>

接下来重点来了

<script src="jquery-3.4.1.js"></script>
    <script>
        // 将抽奖的奖品放在数组里
        var items = ['兰博基尼', '法拉利', '星空魅影', '面包车', '开始抽奖', '高级自行车', '王者路由器', '滑板车', '小推车'];
        function layout() {
            // 记录拼接的 html
            var html = '';
            for (var i = 0; i < items.length; i++) {
                var div = `<div>${items[i]}</div>`;
                html += div;
            }
            $("section").html(html);
        }
        layout()

        // 定抽奖次数为全局 记录抽奖次数
        var clickCount = 0;

        $("#Cz").click(function () {
            clickCount -= 4;
            alert('恭喜您充值两千万成功')
        })
        var flge = true
        $("div:eq(4)").click(function () {
            if (flge === true) {
                clickCount++
                // 判断语句限制抽奖次数
                if (clickCount > 3) {
                    alert('您的抽奖次数已用完,请再去充值两千万')
                    return;
                }
                //抽奖
                lottery()
                flge = false;
            }
        })

        var sum = 0;
        // 抽奖逻辑
        function lottery() {
            var arr = [0, 1, 2, 5, 8, 7, 6, 3];
            var arrIndex = Math.floor(Math.random() * arr.length);
            var index = arr[arrIndex];
            var timer = setInterval(() => {
                var arr2 = sum
                var arr1 = arr[arr2]
                if (arr2 >= 8) {
                    arr1 = arr[arr2 - 8]
                }
                console.log(sum + "------" + arr1 + "=====" + (index + 8))
                $('section div').css('background', 'rgb(238, 119, 139)')
                $(`div:eq(${arr1})`).css('background', 'red')
                if (sum === arrIndex+8) {
                    clearInterval(timer);
                    setTimeout(() => {
                        alert(items[index]);
                        sum = sum-8;
                        flge = true;
                        return;
                    }, 500)
                }
                sum++
            }, 100);
        }
    </script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
内容介绍 项目结构: Controller层:使用Spring MVC来处理用户请求,负责将请求分发到相应的业务逻辑层,并将数据传递给视图层进行展示。Controller层通常包含控制器类,这些类通过注解如@Controller、@RequestMapping等标记,负责处理HTTP请求并返回响应。 Service层:Spring的核心部分,用于处理业务逻辑。Service层通过接口和实现类的方式,将业务逻辑与具体的实现细节分离。常见的注解有@Service和@Transactional,后者用于管理事务。 DAO层:使用MyBatis来实现数据持久化,DAO层与数据库直接交互,执行CRUD操作。MyBatis通过XML映射文件或注解的方式,将SQL语句与Java对象绑定,实现高效的数据访问。 Spring整合: Spring核心配置:包括Spring的IOC容器配置,管理Service和DAO层的Bean。配置文件通常包括applicationContext.xml或采用Java配置类。 事务管理:通过Spring的声明式事务管理,简化了事务的处理,确保数据一致性和完整性。 Spring MVC整合: 视图解析器:配置Spring MVC的视图解析器,将逻辑视图名解析为具体的JSP或其他类型的视图。 拦截器:通过配置Spring MVC的拦截器,处理请求的预处理和后处理,常用于权限验证、日志记录等功能。 MyBatis整合: 数据源配置:配置数据库连接池(如Druid或C3P0),确保应用可以高效地访问数据库。 SQL映射文件:使用MyBatis的XML文件或注解配置,将SQL语句与Java对象映射,支持复杂的查询、插入、更新和删除操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值