Home > Article > Backend Development > How to combine php with h5 to realize big carousel lottery

How to combine php with h5 to realize big carousel lottery

尊渡假赌尊渡假赌尊渡假赌Original: 2023-06-19 11:47:502342browse

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.

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to switch between different versions when installing PHP in PagodaNext article：How to switch between different versions when installing PHP in Pagoda

See more

How to combine php with h5 to realize big carousel lottery

Related articles