How to implement Jiugongge lottery with jquery-JS Tutorial-php.cn

Jquery method to implement Jiugongge lottery: 1. Create the code for front-end display; 2. Realize Jiugongge through jquery code "$("#lottery a").click(function(){...}" Just draw a lottery.

How to implement Jiugongge lottery with jquery

The operating environment of this article: windows7 system, jquery3.2.1 version, DELL G3 computer

How to implement Jiugongge in jquery Lottery?

jquery——Jiugongge Roulette Lottery Example

1. Pictures used

# 2. The code is as follows, the key points It’s the js part

    jQuery九宫格大转盘抽奖

Copy after login

The effect is as follows:

##3. Precautions1. Description of the lottery process

The above is just the effect displayed on the front end. The winning items are generated through a random number.

var index = Math.random()*(lottery.count)|0;

Copy after login

The actual development of the winning items is through the back-end interface Returned by sending a request.

$("#lottery a").click(function(){ var islogin=checkLogin(); if(islogin){//已登录用户才能去抽奖 if (click) { return false; }else{ //向后端接口发请求返回中奖结果 var geturl="http://xxxxxx?username="+username+"&token="+token; $.ajax({ 　url:geturl, type:"GET", dataType:"json", async:false, success:function(data){ if(data.errorcode==0){ var rewardid=data["message"]["rewardid"]; var cardno=data["message"]["rewardCardNo"]; var passno=data["message"]["rewardCardPass"]; var prize=-1; var content=""; if(rewardid=="iphone6"){ lottery.prize=0; prize=0; content="一部iphone6手机"; $("#content1").html(content); }else if(rewardid=="PPTVKING"){ lottery.prize=1; prize=1; content="一部PPTV KING7s 3D影音手机"; $("#content1").html(content); /*... */ }else if(rewardid=="legao"){ lottery.prize=5; prize=5; content="一份乐高的玩具"; $("#content1").html(content); } lottery.speed=100; roll(); click=true; return false; }else{ /*错误处理*/ if(data.errorcode==3){ $("#novip").show(); }else{ $("#notime").show(); } } }/*function结束*/ });/*ajax结束*/ }/*else结束*/ } });

Copy after login

2. Compatibility description

.mask starts as follows. It uses rgba, but IE8 is not compatible. Instead, use png image background:url(images/mask .png) no-repeat;

.mask { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(252,211,4,0.5); display: none }

Copy after login

Recommended learning: "

jquery video tutorial

The above is the detailed content of How to implement Jiugongge lottery with jquery. For more information, please follow other related articles on the PHP Chinese website!