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+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CQiOrnvblgABAgQIRAQER4TdUAIECBAg0CUgOLrubVsCBAgQIBAREBwRdkMJECBAgECXgODourdtCRAgQIBAREBwRNgNJUCAAAECXQKCo+vetiVAgAABAhEBwRFhN5QAAQIECHQJCI6ue9uWAAECBAhEBARHhN1QAgQIECDQJSA4uu5tWwIECBAgEBEQHBF2QwkQIECAQJeA4Oi6t20JECBAgEBEQHBE2A0lQIAAAQJdAoKj6962JUCAAAECEQHBEWE3lAABAgQIdAkIjq5725YAAQIECEQEBEeE3VACBAgQINAlIDi67m1bAgQIECAQERAcEXZDCRAgQIBAl4Dg6Lq3bQkQIECAQERAcETYDSVAgAABAl0CgqPr3rYlQIAAAQIRAcERYTeUAAECBAh0CdQFxydvXx6uX77adWXbEiBAgACBoMD+I4eGJ184EnmClbXTJ9cTkwVHQt1MAgQIEGgWqAyOcxf2DVff+bD57nYnQIAAAQK7KnDo+aeHx4+v7erMxbDYOxzXvlwbzr71aWRpQwkQIECAQKPAiZNPDAcO7ousHguOcdv33vg4srShBAgQIECgUSD1hdHROhocvsfR+HK3MwECBAgkBJLf34gHh3c5Ei85MwkQIECgUSD57sYkgsO7HI0vezsTIECAwG4KpN/dmERweJdjN19yZhEgQIBAo0D63Y3JBIc/sdL48rczAQIECOyGQPJPpmzeL/ql0c0P4qOV3XjZmUGAAAECTQJT+Chl4T2Z4BgfSHQ0/WNgVwIECBBYpsCUYmMyH6l4p2OZLzk/mwABAgTaBKYWG5MMDu90tP1jYV8CBAgQ2EmBKcbGZINjfDBfJN3Jl5+fRYAAAQINAlP5guhW1pP6DsdWD+h7HQ3/iNiRAAECBB5EYKrvamzeafLBsXi349IHnw/XL199kHv4vQQIECBAYE8JjKFx9JlHY/9Btu1gziI4Ni80ftTyxVcPDdc/u7Txt0XIds7t1xIgQIDAXAXGuBj/2v/Do8MjD38zi8iY3Tscc31xeG4CBAgQIEDgW4HZvcPhcAQIECBAgMD8BATH/G7miQkQIECAwOwEBMfsTuaBCRAgQIDA/AQEx/xu5okJECBAgMDsBATH7E7mgQkQIECAwPwEBMf8buaJCRAgQIDA7AQEx+xO5oEJECBAgMD8BATH/G7miQkQIECAwOwEBMfsTuaBCRAgQIDA/AQEx/xu5okJECBAgMDsBFa+OPnz9QMH983uwT0wAQIECBAgMB8BwTGfW3lSAgQIECAwS4HxP7wqOGZ5Og9NgAABAgTmI7ARHB8deWb9yReOzOepPSkBAgQIECAwK4FP3r4sOGZ1MQ9LgAABAgRmKLARHP8cjq2fOPnE4IujM7ygRyZAgAABAhMXGD9OOfvWp98Gx6Hnnx4eP7428Uf2eAQIECBAgMDcBM5d2DdcfefDb4NjfPhnTz81tx08LwECBAgQIDBxgffe+HjjCW8Eh3c5Jn4xj0eAAAECBGYmsHh346bg8C7HzK7ocQkQIECAwIQFFt/dWDzijXc4xr+x/8ihwR+RnfD1PBoBAgQIEJiJwPgnU65fvnrjacfg+GwYhscXf8efWJnJJT0mAQIECBCYqMDmj1L+/4jnVt4djv11fRh+vfmZRcdEL+ixCBAgQIDAxAVu/ShlfNyVYfjbytenXvzjh2+e/d2tzy86Jn5Rj...点击查看剩余70%
{{collectdata}}
网友评论0