PHP開發紅藍兩方投票功能教學之HTML頁面

我們需要在頁面中展示紅藍雙方的觀點，以及對應的投票數和比例，以及用於投票交互的手型圖片，本例以#red和#blue分別表示紅藍雙方。 .redhand和.bluehand用來做手型投票按鈕，.redbar和.bluebar展示紅藍雙方比例調，#red_num和#blue_num顯示雙方投票數。

程式碼如下

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

下面使用我們的CSS將頁面美化

################# ######

繼續學習

新建檔案

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

提交重置程式碼

自動運行