欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

php和jQuery实现文章页【顶】和【踩】的功能

先来看图:

说一下实现思路。

这个功能是这样的:你点击一下顶或踩按钮,记录数值到数据库,并且有颜色的背景跟着变,按照百分比的变化。这样就可以通过背景颜色一眼就看清楚那边支持的人比较多。

还要记录数值,记录左边有几个人点击,右边几个人点击,这样以后可以做统计。

我是用wp做二次开发的,当然你也可以装插件。不过我是自己定制的了。

实现代码:

html code:

      <div class="cl"></div>
                          <style>
                        .recomm{ border-bottom:4px solid #FF7523; color:#FF7523}
						.single_share_class{ position:absolute; left:-95px; top:80px; width:75px; height:328px; text-align:center; background:url(/img/single_page_share.png) no-repeat;}
						.single_share_class .comm_num{ padding:12px 0 48px 0px}
						.single_share_class .comm_num span{ font-size:10px; line-height:11px; color:#ff9853; display:block}
						.single_share_class >span >span >span{ margin-bottom:7px !important;}
						.single_share_class .copylink{ padding:28px 0 0 0; cursor:pointer}
						.single_share_class .st_sharethis_large >span >span{ background:none !important}
						.dingandcai{ width:526px; height:62px; background:url(/img/likeandunlike.jpg) no-repeat; margin:20px 0;line-height:62px; text-align:center; font-size:24px; text-shadow:1px 1px 1px #000; }
						.dingandcai .left_like{ width:224px; float:left;height:62px; position:relative}
						.dingandcai .left_like span,.dingandcai .right_unlike span{ position:relative; z-index:2}
						.dingandcai .dingload{ width:78px; float:left; }
						.dingandcai .right_unlike{ width:224px; float:left; height:62px;position:relative }
						.dingandcai .left_like .left_con{ background:url(/img/likeandunlike.jpg) 0px -63px no-repeat; width:50%; height:62px;position:absolute;top:0;left:0; z-index:1}
						.dingandcai .right_unlike .right_con{ background:url(/img/likeandunlike.jpg) -302px -63px no-repeat; width:50%; height:62px;position:absolute;top:0;left:0; z-index:1}
						.allow_click,.disallow_click{cursor:pointer}
                        </style> 
                        <div class="dingandcai">
                        <div class="left_like"  val="1" postid="<?php the_ID(); ?>">
                        <div class="left_con"></div><span id="like">Like</span>                    
                        </div>
                        <div class="dingload">
                        <img src="/img/loading_sm.gif" />&nbsp;
                        </div>
                        <div class="right_unlike"  val="0" postid="<?php the_ID(); ?>">
                        <div class="right_con"></div>
                        <span id="dislike">Dislike</span>
                        </div>
                        </div>
                        <div class="cl"></div>

js code:

jQuery(".dingload img").ajaxStart(function(){//ajax提示
		jQuery(this).show();
		});
	jQuery(".dingload img").ajaxStop(function(){
		jQuery(this).hide();
		});	
	var pid = jQuery(".left_like").attr("postid");	
	var likecookie = jQuery.cookie("like"+pid);
	if(likecookie!=pid){//判断是否点击过,如果没有点击则
			jQuery(".left_like,.right_unlike").addClass("allow_click");
			jQuery.get('/cityosweb/default.php/Shanmao/wplike_unlike',{id:pid},function(data){
					if(data.status==1){//显示背景百分比和like dislike字样
						jQuery(".left_like .left_con").css("width",data.data.like+"%");
						jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");
						}
					},"json");
			}else{//如果已经投过票了则		
				jQuery(".left_like,.right_unlike").addClass("disallow_click");		
				jQuery.get('/cityosweb/default.php/Shanmao/wplike_unlike',{id:pid},function(data){
					if(data.status==1){//显示背景百分比和投票数
						//alert(data.likenum);
						jQuery("#like").html(data.data.likenum);
						jQuery("#dislike").html(data.data.dislikenum);
						jQuery(".left_like .left_con").css("width",data.data.like+"%");
						jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");
						}
					},"json");
				}
	jQuery(".left_like,.right_unlike").click(function(){
		if(jQuery(this).hasClass("allow_click")){//如果有这个class才提交
			var val = jQuery(this).attr("val");
			var postid = jQuery(this).attr("postid");
			jQuery.post('/cityosweb/default.php/Shanmao/dolike_unlike',{data:val,id:postid},function(data){//点击的时候
			if(data.status==1){//成功返回处理
						jQuery("#like").html(data.data.likenum);
						jQuery("#dislike").html(data.data.dislikenum);
						jQuery(".left_like .left_con").css("width",data.data.like+"%");
						jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");
			jQuery(".left_like,.right_unlike").removeClass("allow_click").addClass("disallow_click");
			jQuery.cookie('like'+postid,postid,{expires: 1});//提交后写入cookie,这里是用juqery.cookie插件。保存一天时间,每篇文章保存不一样的id。值随意,只要你上面好做判断。
			}else{
				alert(data.info);
				}
				},"json");
		}
		});
	jQuery(".disallow_click").live("click",function(){//不允许提交时候弹出
		alert("Your vote has already been submitted!");
		});

php code:首先在数据库表wp_posts添加两个字段like 和un like

public function dolike_unlike(){
		$b = M();
		$input = new input();
		$id = $input->post('id');//过滤提交的信息。防止sql注入,之前发的代码我都补上了。
		//$id = 5524;
		$val = $_POST['data'];
		if($val==1){
		$b->query("update `wp_posts` set `like` =`like`+1 WHERE id = $id");//点击like的更新	
			}else if($val==0){
			$b->query("update `wp_posts` set `unlike` =`unlike`+1 WHERE id = $id");	//dislike更新
				}else{
					$this->error('error');
					}
		$list = $b->query("SELECT `like`,`unlike` FROM `wp_posts` WHERE id = $id");//获取数据
		$like = $list[0]['like'];
		$dislike = $list[0]['unlike'];
		if($like!=0 || $dislike!=0){//计算
			$elike = $like/($like+$dislike);
			$elike = substr($elike*100,0,4);
			$edislike = $dislike/($like+$dislike);
			$edislike = substr($edislike*100,0,4);
			}
		//echo $elike;
		$output = array(//组合函数待输出
			likenum=>$like,
			dislikenum=>$dislike,
			like=>$elike,
			dislike=>$edislike
		);
		//echo $list;
		//dump($output);
		$this->ajaxReturn($output,'success',1);//输出
		//echo 'ok';
		//$this->display('');
		}	

demo 效果:查看蒸汽之城英文官方网站的内容页面。//已上传

更多

本文固定链接: http://shanmao.me/web/jquery/php-jquery-shi-xian-wen-zhang-ye-ding-cai-de-gong-neng | 山猫的博客

该日志由 admin 于2012年08月31日发表在 jQuery, php 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: php和jQuery实现文章页【顶】和【踩】的功能 | 山猫的博客
关键字: