How to combine php with h5 to realize big carousel lottery-PHP Problem-php.cn

How to combine php with h5 to realize big carousel lottery

尊渡假赌尊渡假赌尊渡假赌

Release： 2023-06-19 11:47:50

Original

2307 people have browsed it

The method of combining php with h5 to implement the big roulette lottery is: 1. Create an html sample file; 2. Use the "div" tag to create the lottery roulette and set the style; 3. Create a click event and communicate with the back-end PHP Communicate, obtain lottery configuration information and user data, and randomly generate results and return them to the front end; 4. The browser runs the html file and clicks the button to achieve it.

How to combine php with h5 to realize big carousel lottery

Operating system for this tutorial: Windows 10 system, php8.1.3 version, Dell G3 computer.

To realize the big carousel lottery, you can use the PHP backend and H5 frontend to combine.

The specific method is: the front-end draws the big carousel through H5, and communicates with the back-end PHP at the same time to obtain lottery configuration information (such as lottery probability, etc.) and user data (such as user identity, remaining number of draws, etc. ), the backend randomly generates results and returns them to the frontend.

Below, we introduce in detail how to implement it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="域叶">
    <title>超简单转盘抽奖效果</title>
    <style>
        #bg {
            width: 650px;
            height: 600px;
            margin: 0 auto;
            background: url(img/content_bg.jpg) no-repeat;
            position: relative;
        }

        img.zhuanpan {
            position: absolute;
            z-index: 10;
            top: 155px;
            left: 247px;
        }

        img.content {
            position: absolute;
            z-index: 5;
            top: 60px;
            left: 116px;
            transition: all 4s;
        }
    </style>
</head>
<body>
    <div id="bg">
    	<img id="btn" class="zhuanpan" src="img/zhuanpan.png" alt="zhuanpan">
    	<img id="content" class="content" src="img/content.png" alt="content">
    </div>  
    <script>
    	var rotate = 720//默认至少转两圈
    	var canGet = [1,2,3]//中奖范围(比如你只打算让用户抽中1、2、3等奖，其他的概率为0)
    	var nowNum = 0;//当前点击次数
    	var canGetRanDom = 0;//中奖范围内的随机度数
    	document.getElementById("btn").onclick = function(){
    		var ranDom = Math.floor(Math.random() * 3)
    		canGetRanDom = Math.floor(Math.random() * 40) + 5
    		//原理：随机计算本轮转圈的度数，再加上默认转两圈（为了视觉效果）
    		btnFun((Math.ceil((canGet[ranDom]-1) * 51.4) + canGetRanDom) + rotate*(Number(nowNum)+1),canGet[ranDom])
    		nowNum++
    	}
    	
    	function btnFun(rotateS,now){
			document.getElementById("content").style.transform = "rotate("+ rotateS +"deg)"
			setTimeout(function(){
				alert("恭喜你获得免单"+now+"等奖")
			},4000)
   		}
    </script>
</body>
</html>

Copy after login

The following is the rendering

屏幕截图 2023-06-19 113420.png

The above is the detailed content of How to combine php with h5 to realize big carousel lottery. For more information, please follow other related articles on the PHP Chinese website!