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>

提出するリセットコード

自動運転