Rumah php教程 php手册 php+jQuery实现网络转盘抽奖

php+jQuery实现网络转盘抽奖

Jun 06, 2016 pm 07:58 PM
syarikat capai loteri rangkaian Meja putar

最近公司在搞节日活动,进行抽奖活动,无奈奖品很诱人,但是都是摆设,在网上找了一下,又加上自己的改进 1.新建一个html页面,css样式,布局啥的,网上down的图片 !DOCTYPE HTMLhtmlheadmeta charset=utf-8meta name=keywords content=jquery/meta name=des

最近公司在搞节日活动,进行抽奖活动,无奈奖品很诱人,但是都是摆设,在网上找了一下,又加上自己的改进


php+jQuery实现网络转盘抽奖

1.新建一个html页面,css样式,布局啥的,网上down的图片



		<meta charset="utf-8">
		<meta name="keywords" content="jquery">
		<meta name="description" content="抽奖大转盘">
		<title>PHP+JQUERY实现抽奖大转盘</title>
		<script type="text/javascript" src="../../../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
		<style type="text/css">
				.demo{width:417px;height:417px;position:relative;margin:50px auto}
				#disk{width:417px;height:417px;background:url(disk.jpg) no-repeat;}
				#start{width:163px;height:320px;position:absolute;top:46px;left:130px;}
				#start img{cursor:pointer}
		</style>
		<script type="text/javascript">
				$(function(){
						$("#startbtn").click(function(){
								lottery();
						});
				});
				function lottery(){
						$.ajax({
							type:&#39;POST&#39;,
							url:&#39;data.php&#39;,
							dataType:&#39;json&#39;,
							cache:false,
							error:function(){
								alert(&#39;出错啦!&#39;);
								return false;
							},
							success:function(json){ 
									$("#startbtn").unbind(&#39;click&#39;).css("cursor","default"); 
									var a = json.angle; //角度 
									var p = json.prize; //奖项 
									$("#startbtn").rotate({ 
										duration:3000, //转动时间 
										angle: 0, 
										animateTo:1800+a, //转动角度 
										easing: $.easing.easeOutSine, 
										callback: function(){ 
											var con = confirm(&#39;恭喜你,中得&#39;+p+&#39;\n还要再来一次吗?&#39;); 
											if(con){ 
												lottery(); 
											}else{ 
												return false; 
											} 
										} 
									}); 
								} 
							}); 
				}
		</script>


		<div class="demo">
				<div id="disk"></div>
				<div id="start"><img  src="/static/imghw/default1.png" data-src="start.png" class="lazy" id="startbtn" alt="php+jQuery实现网络转盘抽奖" ></div>
		</div>

Salin selepas log masuk

2.php程序处理页
<?php $prize_arr=array(
        &#39;0&#39;=>array('id'=>1,'min'=>1,'max'=>29,'prize'=>'一等奖','v'=>1),
        '1'=>array('id'=>2,'min'=>302,'max'=>328,'prize'=>'二等奖','v'=>2),
        '2' => array('id'=>3,'min'=>242,'max'=>268,'prize'=>'三等奖','v'=>5),
        '3' => array('id'=>4,'min'=>182,'max'=>208,'prize'=>'四等奖','v'=>7),
        '4' => array('id'=>5,'min'=>122,'max'=>148,'prize'=>'五等奖','v'=>10),
        '5' => array('id'=>6,'min'=>62,'max'=>88,'prize'=>'六等奖','v'=>25),
        '6' => array('id'=>7,'min'=>array(32,92,152,212,272,332),
                                         'max'=>array(58,118,178,238,298,358),'prize'=>'七等奖','v'=>50)
);

//概率函数
function getRand($proArr) {
    $result = '';
     //概率数组的总概率精度
    $proSum = array_sum($proArr);
     //概率数组循环
    foreach ($proArr as $key => $proCur) {
        $randNum = mt_rand(1, $proSum);
        if ($randNum $val){
        $arr[$val['id']]=$val['v'];
}
$id=getRand($arr);//根据概率获取奖项id
$res=$prize_arr[$id-1];

$min=$res['min'];
$max=$res['max'];

if($res['id']==7){
        $i=mt_rand(0,5);
        $result['angle']=mt_rand($min[$i],$max[$i]);
}else{
        $result['angle']=mt_rand($min,$max);
}
$result['prize']=iconv('gb2312','UTF-8',$res['prize']);
echo json_encode($result);
exit;
?>
Salin selepas log masuk


Kenyataan Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah yang perlu saya lakukan jika bumi dipaparkan di sudut kanan bawah Windows 10 apabila saya tidak boleh mengakses Internet Pelbagai penyelesaian kepada masalah yang Bumi tidak dapat mengakses Internet dalam Win10? Apakah yang perlu saya lakukan jika bumi dipaparkan di sudut kanan bawah Windows 10 apabila saya tidak boleh mengakses Internet Pelbagai penyelesaian kepada masalah yang Bumi tidak dapat mengakses Internet dalam Win10? Feb 29, 2024 am 09:52 AM

Artikel ini akan memperkenalkan penyelesaian kepada masalah bahawa simbol glob dipaparkan pada rangkaian sistem Win10 tetapi tidak boleh mengakses Internet. Artikel itu akan menyediakan langkah terperinci untuk membantu pembaca menyelesaikan masalah rangkaian Win10 yang menunjukkan bahawa bumi tidak boleh mengakses Internet. Kaedah 1: Mulakan semula secara langsung, periksa sama ada kabel rangkaian tidak dipasang dengan betul dan sama ada jalur lebar tertunggak. Jika tiada perkara penting yang sedang dilakukan pada komputer, anda boleh memulakan semula komputer secara langsung Kebanyakan masalah kecil boleh diselesaikan dengan cepat dengan memulakan semula komputer. Jika ditentukan jalur lebar tidak tertunggak dan rangkaiannya normal, itu adalah perkara lain. Kaedah 2: 1. Tekan kekunci [Win], atau klik [Start Menu] di sudut kiri bawah Dalam item menu yang terbuka, klik ikon gear di atas butang kuasa Ini ialah [Settings].

Apakah yang berlaku apabila rangkaian tidak dapat menyambung ke wifi? Apakah yang berlaku apabila rangkaian tidak dapat menyambung ke wifi? Apr 03, 2024 pm 12:11 PM

1. Semak kata laluan wifi: Pastikan kata laluan wifi yang anda masukkan adalah betul dan perhatikan sensitiviti huruf besar. 2. Sahkan sama ada wifi berfungsi dengan betul: Semak sama ada penghala wifi berjalan seperti biasa Anda boleh menyambungkan peranti lain ke penghala yang sama untuk menentukan sama ada masalah terletak pada peranti. 3. Mulakan semula peranti dan penghala: Kadangkala, terdapat kerosakan atau masalah rangkaian dengan peranti atau penghala, dan memulakan semula peranti dan penghala boleh menyelesaikan masalah. 4. Semak tetapan peranti: Pastikan fungsi wayarles peranti dihidupkan dan fungsi wifi tidak dinyahdayakan.

Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Mar 24, 2024 am 11:27 AM

Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak

Panduan Perkongsian Folder Windows 11: Kongsi Fail dan Data Anda dengan Mudah Panduan Perkongsian Folder Windows 11: Kongsi Fail dan Data Anda dengan Mudah Mar 13, 2024 am 11:49 AM

Dalam kehidupan dan kerja harian, kita selalunya perlu berkongsi fail dan folder antara peranti yang berbeza. Sistem Windows 11 menyediakan fungsi perkongsian folder terbina dalam yang mudah, membolehkan kami berkongsi kandungan yang kami perlukan dengan mudah dan selamat dengan orang lain dalam rangkaian yang sama sambil melindungi privasi fail peribadi. Ciri ini menjadikan perkongsian fail mudah dan cekap tanpa perlu risau tentang kebocoran maklumat peribadi. Melalui fungsi perkongsian folder sistem Windows 11, kami boleh bekerjasama, berkomunikasi dan bekerjasama dengan lebih mudah, meningkatkan kecekapan kerja dan keselesaan hidup. Untuk berjaya mengkonfigurasi folder kongsi, kita perlu memenuhi syarat berikut terlebih dahulu: Semua peranti (menyertai perkongsian) disambungkan ke rangkaian yang sama. Dayakan Penemuan Rangkaian dan konfigurasikan perkongsian. Ketahui peranti sasaran

Bagaimana untuk membuat applet loteri excel Bagaimana untuk membuat applet loteri excel Mar 20, 2024 am 11:40 AM

Dalam kerja harian, kita menghadapi banyak perkara yang memerlukan melukis lot Kaedah tradisional ialah melukis nombor secara rawak menggunakan nombor kertas Dengan perkembangan perisian elektronik, kita boleh menggunakan komputer untuk melukis lot hari ini ialah Bagaimana untuk membuat applet loteri excel. 1. Mula-mula, kita buka perisian Excel dan buka jadual yang kita sediakan Jadual mesti mengandungi nama kita. 2. Kemudian kita gabungkan sel di sebelah kanan, isi hitam siapa yang bertuah malam ini, dan gabungkan sel di bawah dan isikan merah, seperti yang ditunjukkan dalam rajah di bawah. 3. Kemudian kita masukkan fungsi randbetween di kawasan merah dan tetapkan baris pertama kepada 2 dan baris terakhir kepada 7, seperti yang ditunjukkan dalam rajah di bawah. 4. Lepas tu kita masuk ind depan

Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Mar 24, 2024 pm 06:03 PM

Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.

Syarikat manakah milik aplikasi Hands? Syarikat manakah milik aplikasi Hands? Mar 13, 2024 am 11:10 AM

Hands-on ialah perisian sembang dan janji temu serba baharu, jadi syarikat manakah merupakan aplikasi Hand-on-hand? Perisian ini dicipta oleh Tianjin Laifu Cultural Development Co., Ltd. Anda boleh memuat turunnya dari Xiaomi Mall dan Apple Mall. Pengenalan kepada syarikat penciptaan aplikasi Hands-on ini boleh memberitahu anda kaedah khusus Berikut ialah pengenalan terperinci, jadi sila lihat. Syarikat manakah aplikasi Qianshou? Jawapan: Tianjin Laifu Cultural Development Co., Ltd. Penerangan terperinci: Pada laman web perisian rasmi https://www.qianshouapp.cn/, anda boleh melihat nama syarikat di bahagian bawah. Pengenalan perisian: 1. Ia boleh menapis mengikut keadaan yang disukai pengguna, dan boleh mencari objek yang mereka perlukan dengan lebih cepat. 2. Ia boleh membantu pengguna mencari objek yang mereka perlukan dengan lebih cepat.

Syarikat manakah milik Blue Star Travel Yao? Syarikat manakah milik Blue Star Travel Yao? Mar 22, 2024 pm 03:41 PM

Blue Star Travel Ballad telah berada dalam senarai hangat permainan selepas keluaran video promosi baru-baru ini Ramai pemain sangat ingin tahu tentang syarikat mana Blue Star Travel Ballad dibuat, sebenarnya, ia adalah permainan baharu dari pengeluar Shanghai 2D. Editor akan menerangkannya kepada anda di bawah ini ialah pengenalan Blue Star Yuanluyao Game Company, datang dan lihat bersama. Dari syarikat manakah Blue Star Travel Yao Jawapan: Ia telah dilancarkan oleh Manjiu Network. 1. Pertama sekali, Blue Star Travel Yao ialah permainan yang dilancarkan oleh Manju's Big World RPG. Video promosi telah dikeluarkan pada 20 Mac. 2. Produk ini akan mendapat nombor versinya pada Oktober 2023. Tanda dagangan dan unit operasi permainan kedua-duanya didaftarkan di bawah nama syarikat yang dipanggil The yang terakhir ditubuhkan pada Februari 2023, dan tapak web rasminya menunjukkan bahawa ibu pejabatnya berada di Singapura. 3. Video promosi berdurasi 11 minit yang dikeluarkan kali ini mendedahkan perkara ini

See all articles