主頁(yè) > 知識(shí)庫(kù) > ThinkPHP5+jQuery+MySql實(shí)現(xiàn)投票功能

ThinkPHP5+jQuery+MySql實(shí)現(xiàn)投票功能

熱門標(biāo)簽:昭通辦理400電話 青島語(yǔ)音外呼系統(tǒng)招商 岳陽(yáng)外呼型呼叫中心系統(tǒng)在哪里 山西探意電話機(jī)器人 河南電銷卡外呼系統(tǒng)哪家強(qiáng) 山西回?fù)芡夂粝到y(tǒng) 騰訊外呼管理系統(tǒng) 揚(yáng)州地圖標(biāo)注app 百應(yīng)電話機(jī)器人服務(wù)

ThinkPHP5+jQuery+MySql實(shí)現(xiàn)投票功能,先給大家展示下效果圖,如果大家感覺效果不錯(cuò),請(qǐng)參考實(shí)例代碼。

效果圖:

前端代碼:

!DOCTYPE HTML>
html>
head>
meta charset="utf-8">
title>基于THINKPHP5實(shí)現(xiàn)紅藍(lán)投票功能/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(){
  // 獲取初始數(shù)據(jù)
  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 >ThinkPHP5+jQuery+MySql實(shí)現(xiàn)紅藍(lán)投票功能/a>/h2>
  div class="vote">
    div class="votetitle">您對(duì)Thinkphp5的看法?/div>
    div class="red" id="red">
      p>非常實(shí)用/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>

控制器:

?php
namespace app\index\controller;
use think\Controller;
/**
 * 投票
 */
class Vote extends Controller
{
  /**
   * 首頁(yè)
   */
  public function index()
  {
    return $this->fetch();
  }
  /**
   * 投票
   * @param vid type ip
   */
  public function Vote()
  {
    $data = input('post.');
    if (!empty($data)) {
      $data['ip'] = get_ip();  //獲取Ip
      // 先檢測(cè)當(dāng)前ip是否已經(jīng)投過(guò)票
      $count = model('Vote')->checkIp($data);
      // 檢測(cè)是否提交了type,提交了即代表點(diǎn)擊了按鈕,沒提交即代表頁(yè)面初次渲染
      if (!empty($data['type'])) {
        if ($count == '0') {  //當(dāng)前還未投過(guò)票 
          // 更新票數(shù) 添加用戶ip表
          $res = model('Vote')->postVote($data);
          if ($res) {
            // 投票成功 獲取當(dāng)前各自的票數(shù)
            $info = $this->getPercent($data);
            return return_succ($info);
          }else{
            return return_error('投票失敗');
          }
        }else{
          // 已經(jīng)投過(guò)票
          return return_error('您已經(jīng)投過(guò)票了');
        }
      }else{
        // 初次渲染,獲取初始數(shù)據(jù)
        $info = $this->getPercent($data);
        return return_succ($info);
      }
    }else{
      return return_error('數(shù)據(jù)不能為空');
    }
  }
  // 計(jì)算比例
  public function getPercent($data)
  {
    // 投票成功 獲取當(dāng)前各自的票數(shù)
    $info = model('Vote')->getInfo($data);
    // 計(jì)算比例 保留3位小數(shù)
    $info['red_percent'] = round($info['rednum'] / ($info['rednum'] + $info['bluenum']),3);
    $info['blue_percent'] = 1 - $info['red_percent'];
    return $info;
  }
}

模型:

?php
namespace app\index\model;
use think\Model;
use think\Db;
class Vote extends Model
{
  // 檢測(cè)當(dāng)前ip是否已經(jīng)投過(guò)票
  public function checkIp($data)
  {
    $res = Db::table('votes_ip')->where(['vid'=>$data['vid'],'ip'=>$data['ip']])->count();
    return $res;
  }
  // 投票
  public function postVote($data)
  {
    $info = $this->getInfo($data);
    if ($info) {
      Db::startTrans();
      try {
        if ($data['type'] == "red") {
          // 更新票數(shù)表 
          Db::table('votes')->where(['id'=>$data['vid']])->update(['rednum'=>$info['rednum']+1]);
        }elseif ($data['type'] == "blue") {
          Db::table('votes')->where(['id'=>$data['vid']])->update(['bluenum'=>$info['bluenum']+1]);
        }
        // 添加用戶投票ip
        Db::table('votes_ip')->insert(['vid'=>$data['vid'],'ip'=>$data['ip']]);
        Db::commit();
        return true;
      } catch (Exception $e) {
        Db::rollback();
        return false;
      }
    }
  }
  // 獲取當(dāng)前各自的票數(shù)
  public function getInfo($data)
  {
    // 獲取各自的票數(shù)
    $info = Db::table('votes')->where(['id'=>$data['vid']])->find();
    return $info;
  }
}

總結(jié)

以上所述是小編給大家介紹的ThinkPHP5+jQuery+MySql實(shí)現(xiàn)投票功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

您可能感興趣的文章:
  • ThinkPHP框架實(shí)現(xiàn)的MySQL數(shù)據(jù)庫(kù)備份功能示例
  • ThinkPHP框架搭建及常見問(wèn)題(XAMPP安裝失敗、Apache/MySQL啟動(dòng)失?。?/li>
  • ThinkPHP實(shí)現(xiàn)將SESSION存入MYSQL的方法
  • Thinkphp實(shí)現(xiàn)MySQL讀寫分離操作示例
  • PHP+MySql+jQuery實(shí)現(xiàn)的"頂"和"踩"投票功能
  • 基于PHP+jQuery+MySql實(shí)現(xiàn)紅藍(lán)(頂踩)投票代碼

標(biāo)簽:銅川 宜賓 婁底 南陽(yáng) 寶雞 鎮(zhèn)江 湛江 黃南

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《ThinkPHP5+jQuery+MySql實(shí)現(xiàn)投票功能》,本文關(guān)鍵詞  ThinkPHP5+jQuery+MySql,實(shí)現(xiàn),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《ThinkPHP5+jQuery+MySql實(shí)現(xiàn)投票功能》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于ThinkPHP5+jQuery+MySql實(shí)現(xiàn)投票功能的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章