PHP开发 红蓝两方投票功能教程完整代码之前台页面

vpte.html文件

我们将我们前面讲的前端代码融合整合在一起,运行效果如下

03.jpg

使用了div进行布局

代码如下


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



继续学习
||
<!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>
提交重置代码