Frontend ——》 Dibujo de cuadrícula cuadrada de la página nueve del teléfono móvil H5 (incluida la configuración de probabilidad y premio)

Efecto de página

: La página tiene 6 oportunidades de sorteo. Después de cada sorteo, aparecerá una pequeña ventana emergente (puede elegir no hacerlo), y la lista de premios que ha ganado se mostrará en la lista a continuación.


 

 

El primer paso, core js: los comentarios están en el código

Código principal uno: lottery.js

Este lottery.js es el js principal, que contiene eventos relacionados con la carga de imágenes y texto de Jiugongge en la página, eventos de lotería, eventos de puestos de lotería, eventos de recolección de premios, etc. La imagen del premio, el enlace de salto y la probabilidad de ganar se toman de los js devueltos por la interfaz de fondo. Se exponen cuatro nombres de métodos para las llamadas de página.

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
    };
}

 

 Código principal dos: util.js

Este util.js contiene principalmente los tres métodos de configuración y obtención de cookies, y deduplicación de la matriz, y devuelve la interfaz correspondiente. Cuando se configura y se obtiene una cookie, el objeto de la ventana de front-end está básicamente encriptado, y el cifrado avanzado js también se puede configurar aquí, que es relativamente simple y no entra en detalles.

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
    };
}

Código principal tres: apiService.js

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

 

Paso 2: Core css, xxx.com en el estilo es un enlace a la imagen

@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;
}

 

 


Paso 3: fragmento HTML del núcleo

<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>

El cuarto paso, la parte delantera casi está ahí.

Veamos el backend

El back-end es relativamente simple, crea dos nuevas entidades,

Uno se usa para almacenar información de configuración de premios y devolver la información de configuración al front-end en json en la interfaz,

Uno se utiliza para almacenar el registro de información ganadora, por supuesto, no es necesario almacenarlo si no hay necesidad comercial.

Hay dos cosas a las que se debe prestar atención en el backend.

Uno es el algoritmo de probabilidad de ganar Dado que mi algoritmo no es bueno, aprendí del caso en línea: Devolver una posición ganadora de acuerdo con la probabilidad de ganar establecida para cada posición. Si hay una mejor implementación, deje un comentario a continuación.

el código se muestra a continuación:

/**
     * 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;
    }

La segunda cosa a tener en cuenta es una pequeña optimización,

Dado que la información de configuración del premio y la probabilidad se almacenan en la base de datos, cada vez que el usuario hace clic en la lotería para visitar la base de datos, la presión sobre el servidor puede ser un poco alta, por lo que se recomienda utilizar las anotaciones @PostConstruct en el método de obteniendo información de la base de datos, por lo que este método solo se ejecutará una vez, reduciendo la presión sobre la base de datos.


Todavía hay muchas deficiencias, las estoy corrigiendo activamente y agradezco las sugerencias

No es fácil de escribir, reimpreso

Supongo que te gusta

Origin blog.csdn.net/nienianzhi1744/article/details/105092009
Recomendado
Clasificación