<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf-8" >
<title>基于THINKPHP5实现红蓝投票功能</title>
<style type= "text/css" >
.vote{width:288px; height:300px; margin:40px auto;position:relative}
.votetitle{width:100%;height:62px; background:url(/ static /index/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(/ static /index/images/icon.png) no-repeat -1px -38px;cursor:pointer}
.bluehand{position:absolute; right:0;width:36px; height:36px; background:url(/ static /index/images/icon.png) no-repeat -41px -38px;cursor:pointer}
.grayhand{width:34px; height:34px; background:url(/ static /index/images/icon.png) no-repeat -83px -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:#09f; width:100%;border-radius:4px; position:absolute; right:0}
.redbar p{line-height:20px; color:red;}
.bluebar p{line-height:20px; color:#09f; text-align:right; margin-top:6px}
</style>
<script type= "text/javascript" src= "/static/index/js/jquery.js" ></script>
<script type= "text/javascript" >
$( function (){
getdata( '' ,1);
$( ".redhand" ).click( function (){
getdata( "red" ,1);
});
$( ".bluehand" ).click( function (){
getdata( "blue" ,1);
});
});
function getdata(type,vid){
$.ajax({
url: "{:url('/index/vote/vote')}" ,
data: {type:type,vid:vid},
type: 'POST' ,
dataType: 'json' ,
success: function (res) {
console.log(res)
if (res.status == 0) {
alert( '投票成功' )
var w = 208;
$( "#red_num" ).html(res.msg.rednum);
$( "#red" ).css( "width" ,res.msg.red_percent*100+ "%" );
var red_bar_w = w*res.msg.red_percent-10;
$( "#red_bar" ).css( "width" ,red_bar_w);
$( "#blue_num" ).html(res.msg.bluenum);
$( "#blue" ).css( "width" ,res.msg.blue_percent*100+ "%" );
var blue_bar_w = w*res.msg.blue_percent;
$( "#blue_bar" ).css( "width" ,blue_bar_w);
} else {
alert( '投票失败' );
}
}
});
}
</script>
</head>
<body>
<div id= "main" >
<h2 class = "top_title" ><a href= "http://www.jb51.net/article/71504.htm" >ThinkPHP5+jQuery+MySql实现红蓝投票功能</a></h2>
<div class = "vote" >
<div class = "votetitle" >您对Thinkphp5的看法?</div>
<div class = "red" id= "red" >
<p>非常实用</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 style= "text-align:right" >完全不懂</p>
<div class = "bluehand" ></div>
<div class = "bluebar" id= "blue_bar" >
<span></span>
<p id= "blue_num" ></p>
</div>
</div>
</div>
</div>
</body>
</html>
|