Frontend——》Mobile phone H5 page nine square grid draw (including probability and prize configuration)

Page effect

: The page has 6 chances to draw a lottery. After each draw, a small pop-up window will pop up (you can choose not to), and the list of prizes won will be displayed in the list of prizes below.


 

 

The first step, core js: comments are on the code

Core code one: lottery.js

This lottery.js is the core js, which contains events for loading pictures and texts related to the Jiugongge on the page, lottery events, lottery stall events, prize collection events, and so on. The prize picture, the jump link, and the winning probability are all taken from the js returned by the background interface. Four method names are exposed for page calls.

function lotteryService() {

    var lottery = {
        index: -1,    //当前转动到哪个位置,起点位置
        count: 0,    //总共有多少个位置
        timer: 0,    //setTimeout的ID,用clearTimeout清除
        speed: 20,    //初始转动速度
        times: 0,    //转动次数
        cycle: 50,    //转动基本次数:即至少需要转动多少次再进入抽奖环节
        prize: -1,    //中奖位置
        init: function () {
            if ($("#lottery-unit").find(".grid-draw-item").length > 0) {
                $units = $("#lottery-unit").find(".grid-draw-item");
                this.obj = $("#lottery-unit");
                this.count = $units.length - 1;
                $("#lottery-unit").find(".unit-" + this.index).addClass("grid-draw-item-active");
            }
            ;
        },
        roll: function () {
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            $(lottery).find(".unit-" + index).removeClass("grid-draw-item-active");
            index += 1;
            if (index > count - 1) {
                index = 0;
            };
            $(lottery).find(".unit-" + index).addClass("grid-draw-item-active");
            this.index = index;
            return false;
        },
        stop: function (index) {
            this.prize = index;
            return false;
        }
    };

    /*手机号*/
    var mobile = '';

    /*抽奖按钮是否可以点击,false 为可以点击*/
    var click = false;

    /*抽奖总次数*/
    var count=6;

    /*已抽次数*/
    var doneCount=0;

    /*所有奖品列表*/
    var pricesJosn=[];

    /*点击抽奖后滚动的效果*/
    function roll() {
        lottery.times += 1;
        lottery.roll();//转动过程调用的是lottery的roll方法,这里是第一次调用初始化
        /*当跑马灯停的时候*/
        if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
            clearTimeout(lottery.timer);
            lottery.prize = -1;
            lottery.times = 0;
            click = false;
            var cacheCountLength=0;
            /*每次抽奖停下来的时候先从cookie中获取之前的抽奖次数*/
            var cacheCount=utilService().getCookie(mobile + "cacheCount");
            if(cacheCount!=null&&cacheCount!=undefined){
                if(cacheCount==''){
                    cacheCountLength=0;
                }else{
                    cacheCountLength=cacheCount.split(",").length;
                }
                /*若之前有抽过奖,那么已抽次数在之前的基础上+1*/
                doneCount=cacheCountLength+1;
            }else{
                doneCount=6;
            }
            /*总次数-已抽次数=剩余次数 大于零,防止出现抽奖次数为负数的情况*/
            if(count-doneCount>=0){
                $("#surplusNum").html(count-doneCount);
                showPriceDetails(lottery.index);
                $('.grid-draw-modal').show()
            }
        } else {
            if (lottery.times < lottery.cycle) {
                lottery.speed -= 10;
            } else if (lottery.times == lottery.cycle) {
                /*根据各奖品概率获取中奖位置*/
                 apiService().findIndexByRate().then(function (res){
                     lottery.prize = res;
                });
            } else {
                if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                    lottery.speed += 110;
                } else {
                    lottery.speed += 20;
                }
            }
            if (lottery.speed < 40) {
                lottery.speed = 40;
            };
            lottery.timer = setTimeout(roll, lottery.speed);//循环调用
        }
        return false;
    }

    /*领取奖品*/
    function openNewPage(url) {
        window.location.href = url;
        sessionStorage.setItem(JSON.parse(sessionStorage.formMap).mobile + "-openNewPage", "true");
    }

    /*加载九宫格小图片*/
    function loadLottryImgMini() {
        apiService().getLotteryJson().then(function (res){
            pricesJosn=res;
        });
        for(var i=0;i<8;i++){
            var priceimgDiv='<img src="'+pricesJosn[i].imgsrcMini+'" alt="">';
            $("#price-imgMini-"+i).html("");
            $("#price-imgMini-"+i).append(priceimgDiv);
        }
    }

    /*加载九宫格抽奖停转时弹窗中的图片文字及链接内容*/
    function loadLottryImgBig(index) {
        if (index == 0) {
            $("#price-name").html(pricesJosn[0].title);
            $("#price-img").append('<img src="'+pricesJosn[0].imgsrcBig+'" alt="">');
            $("#receiveprice").attr("onclick", "lotteryService().openNewPage('"+pricesJosn[0].link+"')")
        } else if (index == 1) {
            $("#price-name").html(pricesJosn[1].title);
            $("#price-img").append('<img src="'+pricesJosn[1].imgsrcBig+'" alt="">');
            $("#receiveprice").attr("onclick", "lotteryService().openNewPage('"+pricesJosn[1].link+"')")
        } else if (index == 2) {
            $("#price-name").html(pricesJosn[2].title);
            $("#price-img").append('<img src="'+pricesJosn[2].imgsrcBig+'" alt="">');
            $("#receiveprice").attr("onclick", "lotteryService().openNewPage('"+pricesJosn[2].link+"')")
        } else if (index == 3) {
            $("#price-name").html(pricesJosn[3].title);
            $("#price-img").append('<img src="'+pricesJosn[3].imgsrcBig+'" alt="">');
            $("#receiveprice").attr("onclick", "lotteryService().openNewPage('"+pricesJosn[3].link+"')")
        } else if (index == 4) {
            $("#price-name").html(pricesJosn[4].title);
            $("#price-img").append('<img src="'+pricesJosn[4].imgsrcBig+'" alt="">');
            $("#receiveprice").attr("onclick", "lotteryService().openNewPage('"+pricesJosn[4].link+"')")
        } else if (index == 5) {
            $("#price-name").html(pricesJosn[5].title);
            $("#price-img").append('<img src="'+pricesJosn[5].imgsrcBig+'" alt="">');
            $("#receiveprice").attr("onclick", "lotteryService().openNewPage('"+pricesJosn[5].link+"')")
        } else if (index == 6) {
            $("#price-name").html(pricesJosn[6].title);
            $("#price-img").append('<img src="'+pricesJosn[6].imgsrcBig+'" alt="">');
            $("#receiveprice").attr("onclick", "lotteryService().openNewPage('"+pricesJosn[6].link+"')")
        } else if (index == 7) {
            $("#price-name").html(pricesJosn[7].title);
            $("#price-img").append('<img src="'+pricesJosn[7].imgsrcBig+'" alt="">');
            $("#receiveprice").attr("onclick", "lotteryService().openNewPage('"+pricesJosn[7].link+"')")
        }
    }

    /*加载所有奖品*/
    function loadPrizeItems() {
        for(var i=0;i<8;i++){
            var priceItemDiv='<img src="'+pricesJosn[i].imgsrcMini+'" onclick="lotteryService().openNewPage('+pricesJosn[i].link+')" alt="">';
            $("#itemunit-"+i).html("");
            $("#itemunit-"+i).append(priceItemDiv);
        }
    }

    /*加载已获奖品*/
    function showPrizeItems(mobile) {
        var cacheCountArray=[];
        var cacheCount = utilService().getCookie(mobile + "cacheCount");
        if(cacheCount != ""&& cacheCount != undefined){
            $("#prize-show").show();
            cacheCountArray=cacheCount.split(",");
            var notUniqueArr=cacheCountArray;
            cacheCountArray=utilService().ListUnique(cacheCountArray);
            $("#scroll-box").html("");
            for(var i=0;i<cacheCountArray.length;i++){
                if(cacheCountArray[i]==undefined){
                    continue;
                }
                var link="'"+pricesJosn[cacheCountArray[i]].link+"'";
                var priceItemDiv=
                    '<div class="item" id="itemunit-'+cacheCountArray[i]+'">' +
                    '<img src="'+pricesJosn[cacheCountArray[i]].imgsrcMini+'" onclick="lotteryService().openNewPage('+link+')" alt="">' +
                    '</div>';
                $("#scroll-box").append(priceItemDiv);
            }
            return notUniqueArr.length;
        }else{
            return 0;
        }
    }

    /*九宫格跑马灯停转时的函数*/
    function showPriceDetails(index) {
        /*展示已获奖列表*/
        $("#prize-show").show();
        var cacheCount = utilService().getCookie(mobile + "cacheCount");
        if (cacheCount != "") {
            utilService().setCookie((mobile + "cacheCount"), cacheCount + "," + index, 30);
        } else {
            utilService().setCookie((mobile + "cacheCount"), index, 30);
        }
        /*先清空已获奖品列表*/
        $("#price-img").html("");
        /*再重新加载已获奖品列表*/
        showPrizeItems(mobile);
        /*加载九宫格抽奖停转时弹窗中的图片文字及链接内容*/
        loadLottryImgBig(index);
        /*后台记录抽奖结果*/
        var lotteryRequest={
            mobile:mobile,
            lotteryIndex:index,
            lotteryTitle:pricesJosn[index].title,
            pipeCode:JSON.parse(sessionStorage.ylUser).pipeCode
        };
        apiService().recordLotteryLog(lotteryRequest);
    }

    /*抽奖主方法*/
    function loadLottery() {
        apiService().getLotteryJson().then(function (res){
            pricesJosn=res;
        });
        if (sessionStorage && sessionStorage.formMap) {
            var userInfo = JSON.parse(sessionStorage.formMap);
            mobile = userInfo.mobile;
            if (mobile != "" && mobile != undefined && mobile != null) {
                /*页面加载或刷新时先加载已获奖品并获得已抽奖次数*/
                var doneCount=showPrizeItems(mobile);
                /*true标识页面是否是从奖品页面回退到当前页面
                *false 标识页面刚首次加载或刷新*/
                if (sessionStorage.getItem(mobile + "-openNewPage") == "true") {
                    $("#surplusNum").html(Number(count)-Number(doneCount));
                    sessionStorage.setItem(mobile + "-openNewPage", "false");
                } else {
                    $("#surplusNum").html((Number(count)-Number(doneCount)));
                    if ((Number(count)-Number(doneCount)) > 0) {
                        click = false;
                    }
                }
            } else {
                click = true;
                return false;
            }
        }
        lottery.init();
        $("#drawBtn").click(function () {
            if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮,后面的点击不响应
                return false;
            } else {
                if (document.getElementById("surplusNum").innerHTML > 0) {
                    lottery.speed = 100;
                    roll();    //转圈过程不响应click事件,会将click置为false
                    click = true; //一次抽奖完成后,设置click为true,可继续抽奖
                } else {
                    popup.msg("抽奖机会已用完", {time: 2000});
                }
            }
        });
    }

    return {
        loadLottery:loadLottery,
        openNewPage:openNewPage,
        loadLottryImgMini:loadLottryImgMini,
        loadPrizeItems:loadPrizeItems
    };
}

 

 Core code two: util.js

This util.js mainly contains three methods of cookie setting and obtaining, and deduplication of array, and returns the corresponding interface. When cookie is set and obtained, the front-end window object is basically encrypted, and js advanced encryption can also be set here, which is relatively simple and will not go into details.

function utilService() {
    
    var setCookie = function (cname, cvalue, exdays){
        cvalue=window.btoa(cvalue);
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires="+ d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    };

    var getCookie=function(cname){
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i <ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                try {
                    return window.atob(c.substring(name.length, c.length));
                }catch(err){
                    return undefined;
                }
            }
        }
        return "";
    };

    /*数组去重*/
    function ListUnique(arr) {
        if (!Array.isArray(arr)) {
            return
        }
        var array = [];
        for (var i = 0; i < arr.length; i++) {
            if (array .indexOf(arr[i]) === -1) {
                array .push(arr[i])
            }
        }
        return array;
    }

    return {
        setCookie: setCookie,
        getCookie:getCookie,
        ListUnique:ListUnique
    };
}

Core code three: apiService.js

这个js主要包含了以下三个方法,涉及隐私就不放出来了
用于访问后台接口并获取到返回值,同时后台也应有3个相应接口。
getLotteryJson,(获取到抽奖配置信息:包含奖品位置,奖品大图,奖品小图,奖品标题,奖品跳转链接)
findIndexByRate,(根据后台设置的中奖概率设置中奖位置)
recordLotteryLog,(每次抽奖记录一下抽奖结果,没有返回值,仅做记录之用)

 

Step 2: Core css, xxx.com in the style is a link to the picture

@charset "utf-8";
/* CSS Document */

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,input{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 13px;
  font-family: '微软雅黑';
}
ol, ul {list-style: none;}
a{text-decoration: none;}
i{font-style:normal;}
li{list-style:none;}
input[type='submit'],input[type='button'],input[type='text'],input[type='tel'],input[type='date'],img,label{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(255,255,255,0);}
img{display: block;}
select{background-color:transparent;
  border-color:transparent;
  -webkit-appearance: none;  }

.result-grid-draw-fyl-comp {
  width: 94%;
  height: 178px;
  background-image: url(https://xxx.com/activities/images/lottery/doLotto_div.png);
  background-size: 100% 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 12px 20px;
  margin-top: 30px;
  margin-left: 3%;
}

.result-grid-draw-fyl-comp section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 6px;
}

.result-grid-draw-fyl-comp section .grid-draw-item {
  width: 95px;
  height: 48px;
  background-image: url(https://xxx.com/activities/images/lottery/squared-defult.svg);
  background-size: 100% 100%;
  border-radius: 12px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.result-grid-draw-fyl-comp section .grid-draw-item .price-img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.result-grid-draw-fyl-comp section .grid-draw-item .price-img img {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.result-grid-draw-fyl-comp section .draw-button {
  background: #f67b0d;
  border-radius: 12px;
  position: relative;
}

.result-grid-draw-fyl-comp section .draw-button .btn {
  height: 40px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(17%, #ffda59), to(#ffb703));
  background-image: linear-gradient(180deg, #ffda59 17%, #ffb703);
  border-radius: 12px;
  font-family: PingFangSC-Semibold;
  line-height: 24px;
  font-size: 16px;
  color: #e90000;
  letter-spacing: 0;
  text-align: center;
}

.result-grid-draw-fyl-comp section .draw-button .tips {
  font-size: 10px;
  color: #e90000;
  letter-spacing: 0;
  text-align: center;
  line-height: 14px;
  position: absolute;
  width: 100%;
  bottom: 10px;
}

.result-grid-draw-fyl-comp section .draw-button .tips span {
  font-size: 14px;
  color: #fff;
}

.result-grid-draw-page main .prize-show .title {
  width: 20%;
  height: 22px;
  margin: 16px auto 12px;
  margin-left: 40%;
}

.result-grid-draw-page main .prize-show .title img {
  width: 100%;
  display: block;
}

.result-grid-draw-page main .prize-show .prize-box {
  width: 345px;
  height: 80px;
  margin: 0 auto;
  background-image: url(https://xxx.com/activities/images/lottery/doLotto_myprize_contentbg.png);
  background-size: 100% 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

.result-grid-draw-page main .prize-show .prize-box .left {
  width: 34px;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-tap-highlight-color: transparent;
}

.result-grid-draw-page main .prize-show .prize-box .prize-items {
  height: 80px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 280px;
  position: absolute;
  top: 0;
  left: 34px;
}

.result-grid-draw-page main .prize-show .prize-box .right {
  width: 34px;
  height: 80px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-tap-highlight-color: transparent;
}

.result-grid-draw-page main .prize-show .prize-box .left .switch {
  width: 7.5px;
  height: 13.5px;
  background-image: url(https://xxx.com/activities/images/lottery/nextprize.png);
  background-size: 100% 100%;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.result-grid-draw-page main .prize-show .prize-box .prize-items .scroll-box {
  padding: 15px 0;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.result-grid-draw-page main .prize-show .prize-box .prize-items .scroll-box .item {
  width: 66px;
  height: 48px;
  margin-right: 4px;
  display: inline-block;
}

.result-grid-draw-page main .prize-show .prize-box .prize-items .scroll-box .item img {
  width: 100%;
  height: 100%;
}

.result-grid-draw-fyl-comp section .grid-draw-item-active {
  background-image: url(https://xxx.com/activities/images/lottery/squared-select.svg);
}

.result-grid-draw-page main .prize-show .prize-box .right {
  width: 34px;
  height: 80px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-tap-highlight-color: transparent;
}

.result-grid-draw-page main .prize-show .prize-box .right .switch {
  width: 7.5px;
  height: 13.5px;
  background-image: url(https://xxx.com/activities/images/lottery/nextprize.png);
  background-size: 100% 100%;
}

.grid-draw-modal {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .6);
  position: fixed;
  top: 0;
  left: 0;
}

.grid-draw-modal .modal {
  width: 325px;
  height: 415px;
  position: relative;
  top: 50px;
  left: 50%;
  margin-left: -162.5px;
  background-image: url(https://xxx.com/activities/images/lottery/doLotto_bg.png);
  background-size: 100% 100%;
}

.grid-draw-modal .modal .price-details {
  position: absolute;
  top: 136px;
  left: 0;
  width: 100%;
}

.grid-draw-modal .modal .price-details .price-name {
  font-size: 16px;
  color: #fff;
  text-align: center;
  margin-top: 10px;
}

.grid-draw-modal .modal .price-details .price-img {
  width: 270px;
  height: 130px;
  margin: 15px auto 0;
}

.grid-draw-modal .modal .price-details .price-img img {
  width: 100%;
  height: 100%;
}

.grid-draw-modal .modal .modal-footer {
  width: 100%;
  height: 125px;
  background-image: url(https://xxx.com/activities/images/lottery/Completion%20page_bg2.png);
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.grid-draw-modal .modal .modal-footer .receive {
  width: 234px;
  height: 44px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(17%, #ffd559), to(#ffb503));
  background-image: linear-gradient(180deg, #ffd559 17%, #ffb503);
  border-radius: 22px;
  margin: 46px auto 0;
  text-align: center;
  line-height: 44px;
  font-size: 18px;
  color: #e90000;
}

.grid-draw-modal .modal .close {
  width: 32px;
  height: 32px;
  background-image: url(https://xxx.com/activities/images/lottery/icon_close.png);
  background-size: 100% 100%;
  position: absolute;
  bottom: -56px;
  left: 50%;
  margin-left: -16px;
}

.scroll-box .showitem {
  display: inline;
}

.result-content{
  background-image: url(https://xxx.com/activities/images/collection_20191010/success_top2.png);
  background-size: contain;
  text-align: center;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  color: #081d43;
  padding: 7px 0 22px;
}
.offer-title {
  width: 108px;
  height: 25px;
  margin: 22px auto 0;
  background-image: url(https://xxx.com/activities/images/collection_20191010/offer_title.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.offer-box .offer-list {
  margin: 0 20px;
  overflow: hidden;
}
.offer-box .offer-list>a {
  float: left;
  width: calc(50% - 10px);
  height: auto;
  margin-top: 15px;
}
.offer-box .offer-list>a:nth-child(2n) {
  float: right;
}

.company{
  font-family: PingFangSC-Medium;
  font-size: 15px;
  color: #ff491b;
}

 

 


Step 3: Core HTML fragment

<div class="result-grid-draw-page fyl">
    <main>
        <div class="result-grid-draw-fyl-comp" id="lottery-unit">
            <section>
                <div class="grid-draw-item unit-0">
                    <div class="price-img" id="price-imgMini-0"></div>
                </div>
                <div class="grid-draw-item unit-1">
                    <div class="price-img" id="price-imgMini-1"></div>
                </div>
                <div class="grid-draw-item unit-2">
                    <div class="price-img" id="price-imgMini-2"></div>
                </div>
            </section>
            <section>
                <div class="grid-draw-item unit-7">
                    <div class="price-img" id="price-imgMini-7"></div>
                </div>
                <div class="grid-draw-item draw-button"  id="drawBtn">
                    <div class="btn">点击抽奖</div>
                    <div class="tips">还有 <span id="surplusNum">0</span> 次机会</div>
                </div>
                <div class="grid-draw-item unit-3">
                    <div class="price-img" id="price-imgMini-3"></div>
                </div>
            </section>
            <section>
                <div class="grid-draw-item unit-6">
                    <div class="price-img" id="price-imgMini-6"></div>
                </div>
                <div class="grid-draw-item unit-5">
                    <div class="price-img" id="price-imgMini-5"></div>
                </div>
                <div class="grid-draw-item unit-4">
                    <div class="price-img" id="price-imgMini-4"></div>
                </div>
            </section>
        </div>
        <section class="prize-show" id="prize-show" style="display: none">
            <div class="title"><img
                    src="https://oss-baoji.oss-cn-shanghai.aliyuncs.com/activities/images/lottery/doLotto_myprize_title.png"
                    alt=""></div>
            <div class="prize-box">
                <div class="left">
                    <div class="switch"></div>
                </div>
                <div class="prize-items">
                    <div class="scroll-box" id="scroll-box" style="width: 500px; transform: translate(0px, 0px);">
                     </div>
                </div>
                <div class="right">
                    <div class="switch"></div>
                </div>
            </div>
        </section>
    </main>
    <div class="grid-draw-modal" style="display: none">
        <div class="modal">
            <div class="price-details">
                <div class="price-name" id="price-name">恭喜获得88元提现红包</div>
                <div class="price-img" id="price-img"><img
                        src="https://oss-baoji.oss-cn-shanghai.aliyuncs.com/activities/images/lottery/present-big2.gif"
                        alt=""></div>
            </div>
            <div class="modal-footer">
                <div class="receive" id="receiveprice">立即领取</div>
            </div>
            <div class="close" onclick="$('.grid-draw-modal').hide()"></div>
        </div>
    </div>
</div>

<script>
     window.onload = function () {
        lotteryService().loadLottryImgMini();
        lotteryService().loadLottery();
    };
</script>

The fourth step, the front end is almost there

Let's look at the backend

The back end is relatively simple, create two new entities,

One is used to store prize configuration information and return the configuration information to the front end in json in the interface,

One is used to store the winning information record, of course, it does not need to be stored if there is no business need.

There are two things that need to be paid attention to in the backend.

One is the algorithm of the probability of winning. Because my algorithm is not good, I learned from the online case: Return a winning position according to the set probability of winning for each position. If there is a better implementation, please leave a comment below

code show as below:

/**
     * Math.random()产生一个double型的随机数,判断一下
     * 例如0出现的概率为%50,则介于0到0.50中间的返回0
     *
     * @return int
     */
    private int percentageRandom(Map rateMap) {
        double rate0=Double.parseDouble(rateMap.get("rate0").toString());
        double rate1=Double.parseDouble(rateMap.get("rate1").toString());
        double rate2=Double.parseDouble(rateMap.get("rate2").toString());
        double rate3=Double.parseDouble(rateMap.get("rate3").toString());
        double rate4=Double.parseDouble(rateMap.get("rate4").toString());
        double rate5=Double.parseDouble(rateMap.get("rate5").toString());
        double rate6=Double.parseDouble(rateMap.get("rate6").toString());
        double rate7=Double.parseDouble(rateMap.get("rate7").toString());
        double randomNumber = Math.random();
        if (randomNumber >= 0 && randomNumber <= rate0) {
            return 0;
        } else if (randomNumber > rate0 && randomNumber <= rate0 + rate1) {
            return 1;
        } else if (randomNumber >= rate0 + rate1
                && randomNumber <= rate0 + rate1 + rate2) {
            return 2;
        } else if (randomNumber >= rate0 + rate1 + rate2
                && randomNumber <= rate0 + rate1 + rate2 + rate3) {
            return 3;
        } else if (randomNumber >= rate0 + rate1 + rate2 + rate3
                && randomNumber <= rate0 + rate1 + rate2 + rate3 + rate4) {
            return 4;
        } else if (randomNumber >= rate0 + rate1 + rate2 + rate3 + rate4
                && randomNumber <= rate0 + rate1 + rate2 + rate3 + rate4+ rate5) {
            return 5;
        } else if (randomNumber >= rate0 + rate1 + rate2 + rate3 + rate4 + rate5
                && randomNumber <= rate0 + rate1 + rate2 + rate3 + rate4 + rate5 + rate6) {
            return 6;
        } else if (randomNumber >= rate0 + rate1 + rate2 + rate3 + rate4 + rate5 + rate6
                && randomNumber <= rate0 + rate1 + rate2 + rate3 + rate4 + rate5 + rate6 + rate7) {
            return 7;
        }
        return -1;
    }

The second thing to note is a small optimization,

Since the prize configuration information and probability are stored in the database, each time the user clicks on the lottery to visit the database, the pressure on the server may be a bit high, so it is recommended to use @PostConstruct annotations on the method of obtaining database information, so this method is only Will be executed once, reducing the pressure on the database.


There are still many shortcomings, I am actively correcting them, and welcome suggestions

Not easy to write, reprinted

Guess you like

Origin blog.csdn.net/nienianzhi1744/article/details/105092009