js+php 大转盘九宫格抽奖代码实现
今天带大家看看营销活动中经常用到的抽奖活动，抽奖的逻辑就是前端实现交互动画，后端根据概率来计算出中奖的奖品id，传回前端，前端再实现一个动画，将中奖id显示出来，好了，先看看前端代码，可直接在线运行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>抽奖活动源代码</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
}
.draw {
width: 460px;
height: 470px;
margin: 0 auto;
padding: 40px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhwAAAImCAYAAAAYH1O3AAAgAElEQVR4Xu3dTY+dBfnH8XsatAktlTZtQRsBYYREFpCYrrrqBljoG3BlXGp8NT4s1ffAhrBhxYqNLDAC5dFU+pQWCyUpkhlzD55mWqYP086Z333P78Puj+1c9/W5Dvl/c84prKwPw8pwH39dWF196fBjB385/tYrh3/222PX3r+vn3Mfo/0WAgQIECBAYJcELh746frhK//488b/vz//5avHz5x5/X5Gr2w3OP576sU/PPT97/3ufob5PQQIECBAgMD8Bb75+r9/+t6bf//9dja55+AQGtth9WsJECBAgMDeF9hOeNw1OMaPTo79+PBre5/NhgQIECBAgMD9CFz815VX7vZRyx2Dw7sa98Pu9xAgQIAAgT6Bu73bcdvgEBt9LxYbEyBAgACBBxG4U3RsGRxi40G4/V4CBAgQINArcLvo+E5wiI3eF4nNCRAgQIDATghsFR03BYcviO4Es59BgAABAgQI3PpF0puCY/30yTVEBAgQIECAAIGdEFh54619i59zIzh8lLITtH4GAQIECBAgsBDY/NHKjeDw7oYXCAECBAgQILDTAot3OTaCw7sbO83r5xEgQIAAAQKjwOJdjo3g8O6GFwUBAgQIECCwLIHxXY6V86urL/tXly+L2M8lQIAAAQIExj+xsvL1qRf/6L/+6sVAgAABAgQILEtg/FhFcCxL188lQIAAAQIENgQ2guP8L361duza+ytMCBAgQIAAAQLLElhZO31yfVk/3M8lQIAAAQIECIwCgsPrgAABAgQIEFi6gOBYOrEBBAgQIECAgODwGiBAgAABAgSWLiA4lk5sAAECBAgQICA4vAYIECBAgACBpQsIjqUTG0CAAAECBAgIDq8BAgQIECBAYOkCgmPpxAYQIECAAAECgsNrgAABAgQIEFi6gOBYOrEBBAgQIECAgODwGiBAgAABAgSWLjC74Lj25drwxVcPDdc/u7SBc/3y1aUjGUCAAAECBNIC+48c2niE/T88Ojzy8DfDgYP70o+0rfmzCI4xMi598Lm42NZp/WICBAgQ2MsCiwA5+syjs4iPSQeH0NjL/6jYjQABAgR2SmCMjydfOLJTP24pP2eywTHGxtm3Pl3K0n4oAQIECBDYiwInTj4x2Xc7Jhkcn7x92ccne/GfBDsRIECAwNIFpvpux+SCQ2ws/bVoAAECBAjscYEpRsekgkNs7PF/AqxHgAABArsmMLXomExwiI1dew0aRIAAAQIlAlOKjkkEhy+IlrzyrUmAAAECuy4wlS+STiI43nvj410/gIEECBAgQKBFYArREQ8OH6W0vNztSYAAAQIpgSl8tBINDh+lpF565hIgQIBAm0D6XY5ocHh3o+3lbl8CBAgQSAmk3+WIBofvbqReduYSIECAQKPAs6efiq0dCw4fp8RubjABAgQIlAokP1aJBce5C/uGq+98WHpyaxMgQIAAgd0XOPT808Pjx9d2f/AwDLHg8P2NyL0NJUCAAIFigeT3OARH8QvP6gQIECDQJVAZHL4w2vUity0BAgQITEMg9cXR2DscgmMaLzxPQYAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQI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");
}
.draw .item {
width: 150px;
height: 150px;
background-image: url("data:image/png;base64,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");
}
.draw .item.active {
background-image: url("data:image/png;base64,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");
}
.draw .img {
display: table-cell;
width: 150px;
height: 61px;
vertical-align: middle;
text-align: center;
}
.draw .img img {
vertical-align: top;
}
.draw .gap {
width: 5px;
}
.draw .gap-2 {
height: 5px;
}
.draw .name {
display: block;
margin-top: 10px;
font-size: 14px;
}
.draw .draw-btn {
display: block;
height: 150px;
line-height: 150px;
border-radius: 20px;
font-size: 25px;
font-weight: 700;
color: #f0ff00;
background-color: #fe4135;
text-decoration: none;
}
.draw .draw-btn:hover {
background-color: #fe8d85;
}
</style>
</head>
<body>
<div class="draw" id="lottery">
<table>
<tr>
<td class="item lottery-unit lottery-unit-0">
<div class="img">
<img src="" />
</div>
<span class="name">xxxx奖品</span>
</td>
<td class="gap"></td>
<td class="item lottery-unit lottery-unit-1">
<div class="img">
<img src="" />
</div>
<span class="name">xxxx奖品</span>
</td>
<td class="gap"></td>
<td class="item lottery-unit lottery-unit-2">
<div class="img">
<img src="" />
</div>
<span class="name">xxxx奖品</span>
</td>
</tr>
<tr>
<td class="gap-2" colspan="5"></td>
</tr>
<tr>
<td class="item lottery-unit lottery-unit-7">
<div class="img">
<img src="" />
</div>
<span class="name">xxxx奖品</span>
</td>
<td class="gap"></td>
<td class=""><a class="draw-btn" href="BfwJavascript">立即抽奖</a></td>
<td class="gap"></td>
<td class="item lottery-unit lottery-unit-3">
<div class="img">
<img src="" />
</div>
<span class="name">xxxx奖品</span>
</td>
</tr>
<tr>
<td class="gap-2" colspan="5"></td>
</tr>
<tr>
<td class="item lottery-unit lottery-unit-6">
<div class="img">
<img src="" />
</div>
<span class="name">xxxx奖品</span>
</td>
<td class="gap"></td>
<td class="item lottery-unit lottery-unit-5">
<div class="img">
<img src="" />
</div>
<span class="name">xxxx奖品</span>
</td>
<td class="gap"></td>
<td class="item lottery-unit lottery-unit-4">
<div class="img">
<img src="" />
</div>
<span class="name">xxxx奖品</span>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script type="text/javascript">
var lottery = {
index: -1,
//当前转动到哪个位置，起点位置
count: 0,
//总共有多少个位置
timer: 0,
//setTimeout的ID，用clearTimeout清除
speed: 20,
//初始转动速度
times: 0,
//转动次数
cycle: 50,
//转动基本次数：即至少需要转动多少次再进入抽奖环节
prize: -1,
//中奖位置
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('.lottery-unit.lottery-unit-' + this.index).addClass('active');
};
},
roll: function() {
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active');
index += 1;
if (index > count - 1) {
index = 0;
};
$(lottery).find('.lottery-unit.lottery-unit-' + index).addClass('active');
this.index = index;
return false;
},
stop: function(index) {
this.prize = index;
return false;
}
};
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;
} else {
if (lottery.times < lottery.cycle) {
lottery.speed -= 10;
} else if (lottery.times == lottery.cycle) {
var index = Math.random() * (lottery.count) | 0; //静态演示，随机产生一个奖品序号，实际需请求接口产生
//通过ajax获取php的接口得到中奖id
lottery.prize = index;
} 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;
}
var click = false;
window.onload = function() {
$(".item img").attr("src", "data:image/png;base64,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")
lottery.init('lottery');
$('.draw-btn').click(function() {
if (click) {
//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
return false;
} else {
lottery.speed = 100;
roll(); //转圈过程不响应click事件，会将click置为false
click = true; //一次抽奖完成后，设置click为true，可继续抽奖
return false;
}
});
};
</script>
</body>
</html>ok，我们在看看php端的接口实现，可以直接在线运行<?php
function get_prize($proArr) {
$result = '';
//概率数组的总概率精度
$proSum = array_sum($proArr);
//概率数组循环
foreach ($proArr as $key => $proCur) {
$randNum = mt_rand(1, $proSum);
if ($randNum <= $proCur) {
$result = $key;
break;
} else {
$proSum -= $proCur;
}
}
unset ($proArr);
return $result;
}
$prize_arr = [
'0' => ['id' => 1, 'prize' => '平板电脑', 'v' => 1],
'1' => ['id' => 2, 'prize' => '数码相机', 'v' => 5],
'2' => ['id' => 3, 'prize' => '音箱设备', 'v' => 10],
'3' => ['id' => 4, 'prize' => '4G优盘', 'v' => 12],
'4' => ['id' => 5, 'prize' => 'BFW金牌会员', 'v' => 22],
'5' => ['id' => 6, 'prize' => '下次没准就能中哦', 'v' => 50],
];
foreach ($prize_arr as $key => $val) {
$arr[$val['id']] = $val['v'];
}
$rid = get_prize($arr); //根据概率获取奖项id
echo $rid;//将获奖id传给前端
?>
{{collectdata}}
网友评论0