Comment combiner php avec h5 pour réaliser une grande loterie carrousel-Problème PHP-php.cn

Comment combiner php avec h5 pour réaliser une grande loterie carrousel

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

Libérer： 2023-06-19 11:47:50

original

2354 Les gens l'ont consulté

La méthode pour combiner PHP avec h5 pour implémenter la grande loterie de la roulette est la suivante : 1. Créez un exemple de fichier HTML ; 2. Utilisez la balise "div" pour créer la roulette de loterie et définissez le style 3. Créez un événement de clic, communiquer avec le back-end PHP et obtenir Les informations de configuration de la loterie et les données utilisateur sont générées aléatoirement et renvoyées au front-end 4. Le navigateur exécute le fichier html et clique sur le bouton pour l'implémenter.

Comment combiner php avec h5 pour réaliser une grande loterie carrousel

Le système d'exploitation de ce tutoriel : système Windows 10, version php8.1.3, ordinateur Dell G3.

Pour réaliser la grande loterie du carrousel, vous pouvez utiliser le backend PHP et le frontend H5 pour les combiner.

La méthode spécifique est la suivante : le front-end dessine le grand carrousel via H5 et communique avec le back-end PHP en même temps pour obtenir les informations de configuration de la loterie (telles que la probabilité de loterie, etc.) et les données utilisateur ( (comme l'identité de l'utilisateur, le nombre restant de tirages de loterie, etc.), et le back-end est aléatoire. Les résultats générés sont renvoyés au front-end.

Ci-dessous, nous vous présentons en détail comment le mettre en œuvre.

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

Copier après la connexion

Voici le rendu

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