Wie man PHP mit H5 kombiniert, um eine große Karusselllotterie zu realisieren-PHP-Problem-php.cn

Wie man PHP mit H5 kombiniert, um eine große Karusselllotterie zu realisieren

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

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

Original

2307 Leute haben es durchsucht

Die Methode zum Kombinieren von PHP mit h5 zur Implementierung der großen Roulette-Lotterie ist: 1. Erstellen Sie eine HTML-Beispieldatei. 2. Verwenden Sie das Tag „div“, um das Lotterie-Roulette zu erstellen. 3. Erstellen Sie ein Klickereignis. Kommunizieren Sie mit dem Back-End-PHP und erhalten Sie die Lotterie-Konfigurationsinformationen und Benutzerdaten, die zufällig generiert und an das Front-End zurückgegeben werden. 4. Der Browser führt die HTML-Datei aus und klickt auf die Schaltfläche zum Implementieren.

Wie man PHP mit H5 kombiniert, um eine große Karusselllotterie zu realisieren

Das Betriebssystem dieses Tutorials: Windows 10-System, PHP8.1.3-Version, Dell G3-Computer.

Um die große Karussell-Lotterie zu realisieren, können Sie das PHP-Backend und das H5-Frontend kombinieren.

Die spezifische Methode ist: Das Front-End zieht das große Karussell über H5 und kommuniziert gleichzeitig mit dem Back-End-PHP, um die Lotteriekonfigurationsinformationen (z. B. Lotteriewahrscheinlichkeit usw.) und Benutzerdaten zu erhalten ( B. Benutzeridentität, verbleibende Anzahl an Lottoziehungen usw.), und das Back-End ist zufällig. Die generierten Ergebnisse werden an das Front-End zurückgegeben.

Im Folgenden stellen wir detailliert vor, wie man es umsetzt.

<!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>

Nach dem Login kopieren

Das Folgende ist das Rendering

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

Das obige ist der detaillierte Inhalt vonWie man PHP mit H5 kombiniert, um eine große Karusselllotterie zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!