ThinkPHP5+jQuery+MySql实现投票功能

2024-07-24 12:41:49

字体：大中小

来源：转载

供稿：网友

ThinkPHP5+jQuery+MySql实现投票功能，先给大家展示下效果图，如果大家感觉效果不错，请参考实例代码。

效果图：

前端代码：

<!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 >  <h2 class="top_title"><a href="//www.jb51.net/article/71504.htm">ThinkPHP5+jQuery+MySql实现红蓝投票功能</a></h2>  <div class="vote">    <div class="votetitle">您对Thinkphp5的看法？</div>    <div class="red" >      <p>非常实用</p>      <div class="redhand"></div>      <div class="redbar" >        <span></span>        <p ></p>      </div>    </div>    <div class="blue" >      <p >完全不懂</p>      <div class="bluehand"></div>      <div class="bluebar" >        <span></span>        <p ></p>      </div>    </div>  </div></div></body></html>

上一篇：Linux下二进制方式安装mysql5.7版本和系统优化的步骤

下一篇：CentOS7.5使用mysql