0 Comments

jQuery+PHP+Mysql投票系统

发布于:2016-07-28  |   作者:爬行的蜗牛  |   已聚集:人围观

爬行的蜗牛今天看到了一篇文章关于怎么用jquery ajax功能实时投票并显示的文章,决定也学习下,然后按照作者的思路整理了一下。

效果如下:

具体步骤如下:

先建立数据库:

导入如下sql语句

CREATE TABLE IF NOT EXISTS `votes` (    `id` int(10) NOT NULL AUTO_INCREMENT,    `likes` int(10) NOT NULL DEFAULT '0',    `unlikes` int(10) NOT NULL DEFAULT '0',    PRIMARY KEY (`id`)  ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;      INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES  (1, 30, 10);   

CREATE TABLE IF NOT EXISTS `votes_ip` (    `id` int(10) NOT NULL,    `vid` int(10) NOT NULL,    `ip` varchar(40) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

然后就会生成两个表

votes和votes_ip分别是记录踩和赞的个数,另一个记录投票的ip,如果ip相同则不允许再次进行投票 踩或者赞

然后我们再看toupiao.html

代码如下图:

<style>
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
.digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative} 
#dig_up,#dig_down{width:200px; height:48px; margin:10px; position:relative;  
border:1px solid #d3d3d3; padding-left:42px; cursor:pointer} 
.digup{background:url(diggs.png) no-repeat 4px 2px;} 
.digup_on{background:url(diggs.png) no-repeat 4px -49px;} 
.digdown{background:url(diggs.png) no-repeat 4px -102px;} 
.digdown_on{background:url(diggs.png) no-repeat 4px -154px;} 
#num_up,#num_down{position:absolute; right:6px; top:18px; font-size:20px;} 
#dig_up p{height:24px; line-height:24px; color:#360} 
#dig_down p{height:24px; line-height:24px; color:#f30} 
.bar{width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0;  
position:relative; text-align:center} 
.bar span{display:block; height:12px; } 
.bar i{position:absolute; top:0; left:104px;} 
#bar_up span{background:#360} 
#bar_down span{background:#f60} 
#msg{position:absolute; right:20px; top:40px; font-size:18px; color:#f00} 
</style>
   <div class="digg"> 
<div id="dig_up" class="digup">
        <span id="num_up"></span>
        <p>赞</p>
            <div id="bar_up" class="bar"><span></span><i></i></div>
        </div>
    <div id="dig_down" class="digdown">
        <span id="num_down"></span>
        <p>踩</p>
            <div id="bar_down" class="bar"><span></span><i></i></div>
        </div>
        <div id="msg"></div>
   </div>
这里只是css和html代码,当然我们还需要jquery语句并且一定不要忘了引入jquery.

下面是jquery语句:

<script type='text/javascript' src='/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
$(function(){
$("#dig_up").hover(function(){
$(this).addClass("digup_on");
},function(){
$(this).removeClass("digup_on");
});
$("#dig_down").hover(function(){
$(this).addClass("digdown_on");
},function(){
$(this).removeClass("digdown_on");
});

getdata("do.php?action=initialization",1);

$("#dig_up").click(function(){
getdata("do.php?action=like",1);
});

$("#dig_down").click(function(){
getdata("do.php?action=unlike",1);
});
});


function getdata(url,sid){
$.getJSON(url,{id:sid},function(data){
if(data.success==1){
$("#num_up").html(data.like);
$("#bar_up span").css("width",data.like_percent);
$("#bar_up i").html(data.like_percent);
$("#num_down").html(data.unlike);
$("#bar_down span").css("width",data.unlike_percent);
$("#bar_down i").html(data.unlike_percent);
}else{
$("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'}).animate({top:'-50px',opacity:0}, "slow");
}
});
}
</script>
好了这样toupiao.html文件就完成了,有点长,剩下的do.php明天再贴,然后我已经整理好了代码给大家下载,如果有问题加qq就可以了,希望能帮到大家

下载地址

http://pan.baidu.com/s/1jIfgVcy

爬行的蜗牛:http://www.pxwoniu.com/wzzt/158.html

飞机

扫描二维码,访问爬行的蜗牛手机网站

在线咨询