Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk menggabungkan php dengan h5 untuk merealisasikan loteri karusel besar

Bagaimana untuk menggabungkan php dengan h5 untuk merealisasikan loteri karusel besar

尊渡假赌尊渡假赌尊渡假赌asal: 2023-06-19 11:47:502307semak imbas

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;

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>

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!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk bertukar antara versi yang berbeza apabila memasang PHP di PagodaArtikel seterusnya：Bagaimana untuk bertukar antara versi yang berbeza apabila memasang PHP di Pagoda

Artikel berkaitan

Lihat lagi