Bagaimana untuk menggabungkan php dengan h5 untuk merealisasikan loteri karusel besar-masalah PHP-php.cn

Bagaimana untuk menggabungkan php dengan h5 untuk merealisasikan loteri karusel besar

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

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

asal

2306 orang telah melayarinya

Kaedah menggabungkan PHP dengan h5 untuk melaksanakan loteri rolet besar ialah: 1. Buat fail sampel html 2. Gunakan tag "div" untuk mencipta rolet loteri dan tetapkan gaya; acara klik dan berkomunikasi dengan bahagian belakang PHP Berkomunikasi, dapatkan maklumat konfigurasi loteri dan data pengguna, dan menjana keputusan secara rawak dan mengembalikannya ke bahagian hadapan 4. Pelayar menjalankan fail html dan mengklik butang untuk mencapainya;

Bagaimana untuk menggabungkan php dengan h5 untuk merealisasikan loteri karusel besar

Sistem pengendalian untuk tutorial ini: Sistem Windows 10, versi php8.1.3, komputer Dell G3.

Untuk merealisasikan loteri roda besar, anda boleh menggunakan bahagian belakang PHP dan bahagian hadapan H5 untuk digabungkan.

Kaedah khusus ialah: bahagian hadapan menarik karusel besar melalui H5, dan berkomunikasi dengan PHP bahagian belakang pada masa yang sama untuk mendapatkan maklumat konfigurasi loteri (seperti kebarangkalian loteri, dsb. ) dan data pengguna (seperti identiti pengguna, baki bilangan cabutan, dll. ), bahagian belakang menjana hasil secara rawak dan mengembalikannya ke bahagian hadapan.

Di bawah, kami memperkenalkan secara terperinci cara melaksanakannya.

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

Salin selepas log masuk

Berikut ialah rendering

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

Atas ialah kandungan terperinci Bagaimana untuk menggabungkan php dengan h5 untuk merealisasikan loteri karusel besar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!