Tutorial fungsi undian merah dan biru pembangunan PHP jQuery
Apabila butang tangan diklik, $.getJSON() jQuery digunakan untuk menghantar permintaan Ajax ke php latar belakang Jika permintaan itu berjaya, data json yang dikembalikan oleh latar belakang akan diperolehi dan jQuery akan memproses data json. Fungsi berikut: getdata(url,sid), melepasi dua parameter URL ialah alamat PHP bahagian belakang permintaan, dan sid mewakili ID topik undian semasa Dalam fungsi ini, data json yang dikembalikan termasuk bilangan undian daripada kedua-dua merah dan parti biru, dan Perkadaran kedua-dua parti, lebar bar perkadaran dikira berdasarkan perkadaran, dan kesan pengundian dipaparkan secara interaktif secara tak segerak.
fungsi getdata(url,sid){
$.getJSON(url,{id:sid},fungsi(data){
if(data.success==1){
var w = 208; //Tentukan jumlah lebar bar perkadaran
//Bilangan undian merah
$("#red_num").html(data.red> $(); "# merah").css("lebar",data.red_percent*100+"%");
var red_bar_w = w*data.red_percent-10; #red_bar").css("lebar ",red_bar_w);
").css("lebar",data.blue_percent*100+"%");
var blue lebar bar bahagian persegi
$("#blue_bar ").css ("width",blue_bar_w);
Apabila halaman dimuatkan buat kali pertama, getdata() dipanggil, dan kemudian klik untuk mengundi pasukan merah atau undi pasukan biru untuk turut memanggil getdata(), tetapi parameter yang diluluskan adalah berbeza . Ambil perhatian bahawa parameter sid dalam contoh ini ditetapkan kepada 1, yang ditetapkan berdasarkan id dalam jadual data Pembangun boleh membaca id yang tepat berdasarkan projek sebenar.
$(function(){
//Dapatkan data awal
getdata("vote.php",1);
//Undian pasukan merah
$( ".redhand").klik(function(){
getdata("vote.php?action=red",1);
});
//Undian biru
$(" . bluehand").klik(function(){
getdata("vote.php?action=blue",1);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>红蓝投票功能</title>
<style>
#main{
width: 600px;
margin: 0 auto;
border: 1px solid #050205;
}
.vote{
width:358px;
height:300px;
margin:40px auto;
position:relative
}
.votetitle{
width:100%;
height:62px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat 0 30px;
font-size:15px
}
.red{
position:absolute;
left:0; top:64px;
height:80px;
}
.blue{position:absolute;
right:0;
top:64px;
height:80px;
}
.red p,.blue p{
line-height:22px
}
.redhand{
position:absolute;
left:0;
width:36px;
height:36px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -1px -38px;
cursor:pointer
}
.bluehand{
position:absolute;
right:0;
width:36px;
height:36px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -41px -38px;
cursor:pointer
}
.redbar{
position:absolute;
left:42px;
margin-top:8px;
}
.bluebar{
position:absolute;
right:42px;
margin-top:8px;
}
.redbar span{
display:block;
height:6px;
background:red;
width:100%;
border-radius:4px;
}
.bluebar span{
display:block;
height:6px;
background: blue;
width:100%;
border-radius:4px;
position:absolute;
}
.redbar p{
line-height:20px;
color:red;
}
.bluebar p{
line-height:20px;
color:#09f;
text-align:right;
margin-top:23px
}
</style>
<script src="//cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
getdata("vote.php",1);
$(".redhand").click(function(){
getdata("vote.php?action=red",1);
});
$(".bluehand").click(function(){
getdata("vote.php?action=blue",1);
});
});
function getdata(url,sid){
$.getJSON(url,{id:sid},function(data){
if(data.success==1){
var w = 208;
$("#red_num").html(data.red);
$("#red").css("width",data.red_percent*100+"%");
var red_bar_w = w*data.red_percent-10;
$("#red_bar").css("width",red_bar_w);
$("#blue_num").html(data.blue);
$("#blue").css("width",data.blue_percent*100+"%");
var blue_bar_w = w*data.blue_percent;
$("#blue_bar").css("width",blue_bar_w);
}else{
alert(data.msg);
}
});
}
</script>
</head>
<body>
<div id="main">
<h2>PHP+jQuery+MySql实现红蓝投票功能</h2>
<hr/>
<div class="vote">
<div class="votetitle">您对PHP中文网提供的文章的看法？</div>
<div class="red" id="red">
<p id="hong">非常实用</p>
<div class="redhand"></div>
<div class="redbar" id="red_bar">
<span></span>
<p id="red_num"></p>
</div>
</div>
<div class="blue" id="blue">
<p id="bu">完全看不懂</p>
<div class="bluehand"></div>
<div class="bluebar" id="blue_bar">
<span></span>
<p id="blue_num"></p>
</div>
</div>
</div>
</div>
</body>
</html>
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
