Halaman HTML tutorial fungsi pengundian merah dan biru pembangunan PHP

Kami perlu memaparkan pandangan parti merah dan biru pada halaman, serta bilangan dan perkadaran undian yang sepadan, serta gambar tangan untuk interaksi mengundi Dalam contoh ini, #merah dan #biru mewakili parti merah dan biru masing-masing. .redhand dan .bluehand digunakan untuk membuat butang mengundi berbentuk tangan, .redbar dan .bluebar menunjukkan perkadaran merah dan biru, dan #red_num dan #blue_num menunjukkan bilangan undian daripada kedua-dua parti.

Kodnya adalah seperti berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>红蓝投票功能</title>
</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>

Gunakan CSS kami di bawah untuk mencantikkan halaman

bahagian seterusnya

fail baharu

<!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(/images/icon.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(/images/icon.png) no-repeat -1px -38px;cursor:pointer}
 .bluehand{position:absolute; right:0;width:36px; height:36px; background:url(/images/icon.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}
 #bu{
 width: 90px;
 text-align: right;

 }
 #hong{
 width: 80px;
 }
 </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>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh