當前位置 主頁 > 服務器問題 > Linux/apache問題 > 最大化 縮小

    ThinkPHP5+jQuery+MySql實現投票功能

    欄目:Linux/apache問題 時間:2020-01-17 20:26

    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 >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>
    
    下一篇:沒有了
777亚洲人成视频免费视频