zoukankan      html  css  js  c++  java
  • 前端开发-九宫格抽奖组件示例

    提供简单四宫格示例,可自行拓展

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport"
        />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>四宫格抽奖</title>
      </head>
    
      <style>
        html,
        body {
          width: 100%;
          height: 100%;
          max-width: 750px;
          margin: auto;
        }
    
        .outBox {
          width: 100%;
          height: 60%;
          background: gray;
          position: relative;
          display: flex;
          flex-flow: row wrap;
        }
    
        .prize {
          width: 44%;
          height: 40%;
          margin: 5% 3%;
          text-align: center;
          font-size: xx-large;
          color: #fff;
          padding-top: 15%;
          box-sizing: border-box;
          border: 6px double #ab945e;
        }
    
        .prize.active {
          background: goldenrod;
        }
    
        .btn {
          position: absolute;
          left: 30%;
          bottom: -20%;
          width: 40%;
          text-align: center;
          height: 12%;
          font-size: xx-large;
        }
      </style>
    
      <body>
        <div class="outBox" id="lotteryBoxs">
          <div class="prize prize-0 one">一等奖</div>
          <div class="prize prize-1 two">二等奖</div>
          <div class="prize prize-3 four">谢谢参与</div>
          <div class="prize prize-2 three">三等奖</div>
    
          <button class="btn">开启好运</button>
        </div>
      </body>
    
      <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
      <script>
        $(document).ready(function () {
          // 转盘的初定义
          var lottery = {
            index: 0, //当前转动到哪个位置,起点位置
            count: 0, //总共有多少个位置
            timer: 0, //setTimeout的ID,用clearTimeout清除
            speed: 10, //初始转动速度
            times: 0, //转动次数
            cycle: 30, //转动基本次数:即至少需要转动多少次再进入抽奖环节
            prize: 0, //中奖位置
            init: function (id) {
              if ($("#" + id).find(".prize").length > 0) {
                $lottery = $("#" + id);
                $units = $lottery.find(".prize");
                this.obj = $lottery;
                this.count = $units.length;
              }
            },
            roll: function () {
              var index = this.index;
              var count = this.count;
              var lottery = this.obj;
              $(lottery).find(".prize").removeClass("active");
              index += 1;
              if (index > count - 1) {
                index = 0;
              }
              $(lottery)
                .find(".prize-" + this.index)
                .addClass("active");
              this.index = index;
              return false;
            },
            stop: function (index) {
              this.prize = index;
              return false;
            },
          };
    
          // 中奖转动事件
          function roll() {
            lottery.times += 1;
            debugger
            lottery.roll();
            var prize_site = $("#lotteryBoxs").attr("prize_site");
            if (lottery.times > lottery.cycle + 10 && lottery.index == prize_site) {
              var prize_id = $("#lotteryBoxs").attr("prize_id");
              var prize_name = $("#lotteryBoxs").attr("prize_name");
              console.log(prize_site + "结果");
              //中奖情况的判断--模态框
              if (prize_site == 1 || prize_site == 2 || prize_site == 3) {
                //已中奖
                setTimeout(function () {
                  console.log("恭喜你获得" + prize_name);
                }, 500);
              } else {
                //未中奖
                setTimeout(function () {
                  console.log("中奖结果:" + prize_name);
                }, 500);
              }
    
              clearTimeout(lottery.timer);
              lottery.prize = -1;
              lottery.times = 0;
              click = false;
            } else {
              if (lottery.times < lottery.cycle) {
                lottery.speed -= 20;
              } else if (lottery.times == lottery.cycle) {
                var index = (Math.random() * lottery.count) | 0;
                lottery.prize = index;
              } else {
                if (
                  lottery.times > lottery.cycle + 10 &&
                  ((lottery.prize == 0 && lottery.index == lottery.count - 1) ||
                    lottery.prize == lottery.index + 1)
                ) {
                  lottery.speed += 90;
                } else {
                  lottery.speed += 30;
                }
              }
              if (lottery.speed < 30) {
                lottery.speed = 30;
              }
              lottery.timer = setTimeout(roll, lottery.speed);
            }
            return false;
          }
    
          var click = false;
    
          // 后台数据的调用
          $(function () {
            lottery.init("lotteryBoxs");
            $(".btn").click(function () {
              if (click) {
                return false;
              } else {
                lottery.speed = 100;
    
                //此处数据应该从接口获取
                var prizeArr = ["谢谢参与", "一等奖", "二等奖", "三等奖"];
                var prizeId = Math.floor(Math.random() * (3 - 0 + 1) + 0);
                var prize_site = prizeId;
                console.log("位置" + prizeId);
                $("#lotteryBoxs").attr("prize_site", prize_site);
                $("#lotteryBoxs").attr("prize_name", prizeArr[prizeId]);
                roll();
                click = true;
                return false;
              }
            });
          });
        });
      </script>
    </html>
  • 相关阅读:
    Go接口特性
    go递归函数
    K8S部署Redis Cluster集群(三主三从模式) 部署笔记
    Jenkins密码忘记重置方法
    inode满了处理
    Linux 系统日常巡检脚本
    垃圾代码评析——关于《C程序设计伴侣》6.2(三)
    CRITICAL THINGKING笔记——ad hominem
    垃圾代码评析——关于《C程序设计伴侣》6.2(二)
    垃圾代码评析——关于《C程序设计伴侣》6.2(一)
  • 原文地址:https://www.cnblogs.com/527xyz/p/14885949.html
Copyright © 2011-2022 走看看