jQuery+h5 realizes the nine-square lottery special effect (front-end and back-end code)
Preface:Front-end: jq+h5 to achieve the nine-grid dynamic effect Backend: thinkphp3.2.3 implements the winning probability algorithm Function: Support reading the winning rate and prize pool preset in the database. The winning rate can be customized and must be an integer The final effect is as follows:
Code: The code of choujiang.html is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Wudang Mountain Taoist" />
<title>Nine-grid lucky draw turntable</title>
<style type="text/css">
.container{width:100%;height:auto;line-height: 100%;text-align: center;}
#lottery{width:425px;height:425px;margin:auto;background:#e5e5e5;}
#lottery table td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999;
}
/*#lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}*/
#lottery table td.active{background-color:#fff333;border-radius: 10px;}
#start {color:white;background:orange;
border-radius: 10px;
height:130px;
line-height: 130px;
width:130px;
margin: auto;
/*margin: 10% 10% 10% 10%;*/
text-align: center;
display: block;
text-decoration: none;
}
#con_prize{display: none;margin-top: 10px;}
#pname{color:red;margin-left: 5px;margin-right: 10px;font-size: 20px;}
.prize{background:#000 ;opacity: 0.5;
height:130px;width: 130px;
border-radius: 5px;margin: auto;line-height: 130px;
text-shadow: 1px 1px 2px;
}
.on{opacity: 1;color:#fff;background: #a5a5d1}
</style>
</head>
<body>
<div class="container">
<div id="lottery">
<table border="0" cellpadding="0" cellspacing="0" style="background:#e3f4a1">
<tr>
<td class="lottery-unit lottery-unit-0"><div class="prize prize-0">Consolation Prize</div></td>
<td class="lottery-unit lottery-unit-1"><div class="prize prize-1">Toy car</div></td>
<td class="lottery-unit lottery-unit-2"><div class="prize prize-2">Bicycle</div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-7"><div class="prize prize-7">Audi</div></td>
<td ><a href="#" rel="external nofollow" class = "lottery-unit" id="start">Start the lottery</a></td>
<td class="lottery-unit lottery-unit-3"><div class="prize prize-3">Electric Vehicle</div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-6"><div class="prize prize-6">Xia Li</div></td>
<td class="lottery-unit lottery-unit-5"><div class="prize prize-5">Tractor</div></td>
<td class="lottery-unit lottery-unit-4"><div class="prize prize-4">Motorcycle</div></td>
</tr>
</table>
</div>
<div id="con_prize" data-pname="Changyi Taisheng 100 yuan coupon" data-pid="1">Congratulations on winning the prize: <span id="pname"></span><button onclick="getPrize()">Get the prize</button></div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var lottery = {
index:-1, //Current rotation position, starting position count:8, //How many prize positions are there in total? A 9-square grid means 8 prize positions timer:0, //setTimeout ID, clear with clearTimeout speed:10, //Initial rotation speed times:0, //Number of rotations cycle:50, //Basic rotation times: how many times you need to rotate at least before entering the lottery prize:0, //Default winning position, put the default prize init:function(id){
if ($("#"+id).find(".lottery-unit").length>0) {
$lottery = $("#"+id);
$units = $lottery.find(".lottery-unit");
this.obj = $lottery;
this.count = $units.length;
$lottery.find(".prize-"+this.index).addClass("on");
};
},
roll:function(){
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find(".prize-"+index).removeClass("on");
index += 1;
if (index>count-1) {
index = 0;
};
$(lottery).find(".prize-"+index).addClass("on");
this.index=index;
return false;
},
stop:function(index){
this.prize=index;
return false;
}
};
//Store prize information var prize_data = {
pname:'Default Prize', //Prize name pnum:0, //Winning position defaults to 0, important, the turntable uses this to locate the winning product pid:1, //Prize ID defaults to 1
};
function roll(){
lottery.times += 1;
lottery.roll();
if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
clearTimeout(lottery.timer);
lottery.times=0;
click=false;
//Show winning informationshowDetail();
}else{
//Speed control if (lottery.times<lottery.cycle) {
lottery.speed -= 10;
}else if(lottery.times==lottery.cycle) {
index = lottery.prize;
}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;
};
//Delayed recursive call lottery.timer = setTimeout(roll,lottery.speed);
}
return false;
}
/*
* Get the winning position * @param {string} name User nickname (required)
* @param {string} avatar WeChat avatar URL (required)
* @param {string} openid WeChat openid (required, used to verify uniqueness, a user can only draw once)
* @return {bool}
*/
function doRoll(url,name,avatar,openid){
$.ajax({ url: url, data:{name:name,avatar:avatar,openid:openid}, async:false,dataType:'json',success: function(rst){
lottery.speed=100;
var data = rst.data;
lottery.prize = data.pnum;
prize_data = {
pname:data.pname,
pnum:data.pnum,
pid:data.pid
};
roll();
click=true;
return false;
}});
}
//Receive the prize (jump to the delivery address page, or pop up the delivery address page)
function getPrize(){
alert("Please fill in the delivery address");
}
// Clear the winning information function clearDetail(){
$("#con_prize").hide();
$("#pname").html("");
}
//Display winning information function showDetail(){
$("#con_prize").show();
$("#pname").html(prize_data.pname);
}
var click=false;
window.function(){
var url = 'http://test.com/api/Shop/ex/'; //Change to the actual background lottery interface here lottery.init('lottery');
$("#start").click(function(){
if (click) {
return false;
}else{
clearDetail();
doRoll(url,"name","avatar","openid");
}
});
};
</script>
</body>
</html>The thinkphp interface code is as follows:
namespace Api\Controller;
use Think\Controller;
class ShopController Extends Controller {
/**
* Lottery backend interface* @author Wudang Mountain Taoist*/
public function ex(){
$nick = I('nick','','trim');
$avatar = I('avatar','','trim');
$openid = I('openid','','trim');
//if(empty($nick)) $this->error('empty nick');
//if(empty($avatar)) $this->error('empty avatar');
//if(empty($openid)) $this->error('empty openid');
/*The error function you encapsulate yourself should normally be written like this:
$this->ajaxReturn(array(
'data'=>'',
'info'=>$info,
'status'=>$status
));*/
//Initialize the prize pool, 8 prizes, full probability 100, minimum probability 1 (id, name is based on the data retrieved from the actual database, and the sum of percent is equal to 100)
$arr8 = array(
array("id"=>1,"name"=>"Consolation Prize","percent"=>69),
array("id"=>2,"name"=>"Toy car","percent"=>10),
array("id"=>3,"name"=>"bicycle","percent"=>6),
array("id"=>4,"name"=>"electric vehicle","percent"=>5),
array("id"=>5,"name"=>"Motorcycle","percent"=>4),
array("id"=>6,"name"=>"tractor","percent"=>3),
array("id"=>7,"name"=>"Xia Li","percent"=>2),
array("id"=>8,"name"=>"Audi","percent"=>1),
);
//100 subscript storage arrays, 0-7 are assigned corresponding quantities according to probability $indexArr = array();
for($i=0;$i<sizeof($arr8);$i++){
for($j=0;$j<$arr8[$i]['percent'];$j++){
//index appended to array indexArr
array_push($indexArr, $i);
}
}
//Array shuffle($indexArr);
//Randomly pick a subscript from the subscript array as the winning subscript, $rand_index is the subscript of the random element of $indexArr (0-99)
$rand_index = array_rand($indexArr,1);
//Get the winning information$prize_index = $indexArr[$rand_index];
$prizeInfo = $arr8[$prize_index];
$data['pnum'] = $prize_index; //Corresponding front-end prize number $data['pid'] = $prizeInfo['id'];
$data['pname'] = $prizeInfo['name'];
$this->success($data);/*Self-encapsulated success, normally it should be written like this $this->ajaxReturn(array(
'data'=>$data,
'info'=>'Success',
'status'=>1
));*/
}
}The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Several ways to backup MySql database
>>: How to manually scroll logs in Linux system
Recommend
Basic knowledge points of mysql worm replication
Worms replicate, as the name implies, by themselv...
Analyze the sql statement efficiency optimization issues of Mysql table reading, writing, indexing and other operations
Last time we talked about some SQL query optimiza...
MySQL cross-database transaction XA operation example
This article uses an example to describe the MySQ...
HTML web page creation tutorial Use iframe tags carefully
Using iframes can easily call pages from other we...
Solution for Nginx installation without generating sbin directory
Error description: 1. After installing Nginx (1.1...
How to use Cron Jobs to execute PHP regularly under Cpanel
Open the cpanel management backend, under the &qu...
Explanation on the use and modification of Tomcat's default program publishing path
The default program publishing path of tomcat7 is...
Docker online and offline installation and common command operations
1. Test environment name Version centos 7.6 docke...
Example code for implementing anti-shake in Vue
Anti-shake: Prevent repeated clicks from triggeri...
Implementation and usage scenarios of JS anti-shake throttling function
Table of contents 1. What is Function Anti-shake?...
Three common methods for HTML pages to automatically jump after 3 seconds
In practice, we often encounter a problem: how to...
Introduction to the use of data custom attributes in HTML and plug-in applications
You may often see some HTML with data attributes. ...
How to set static IP for Ubuntu 18.04 Server
1. Background Netplan is a new command-line netwo...
How to monitor mysql using zabbix
Zabbix deployment documentation After zabbix is ...
vue cli3 implements the steps of packaging by environment
The vue project built with cli3 is known as a zer...