Home  >  Article  >  php教程  >  php实现网站顶踩功能的完整前端代码,php前端

php实现网站顶踩功能的完整前端代码,php前端

WBOY
WBOYOriginal
2016-06-13 08:57:41955browse

php实现网站顶踩功能的完整前端代码,php前端

许多网站都支持顶、踩功能,以便于显示用户对当前网页内容的满意度反馈。下面我们给出本站使用的顶、踩功能的完整前台实现代码,以便于用户参考。

完整的前端代码包括html、css、js各部分的代码。使用下列前端代码,加上自行简单实现的后台代码,即可实现完整的顶踩功能。

前端html代码:

<div id="vote" data_id="文章唯一key">
  <span id="dig" class="vote-btn"><span class="vote-num">顶的次数</span></span>
  <span id="bury" class="vote-btn"><span class="vote-num">踩的次数</span></span>
</div>

前端css代码:

#vote {
  /* margin: 0 auto; */
  text-align: center;
}

.vote-btn {
  margin: 0 20px;
  display: inline-block;
  width: 60px;
  height: 54px;
  cursor: pointer;
}

#dig {
  background: url("http://www.bkjia.com/static/image/dig.gif");
}

#bury {
  background: url("http://www.bkjia.com/static/image/bury.gif");
}

.vote-num {
  display: inline-block;
  font-size: 14px;
  margin-top: 32px;
  color: white;
}

前端js代码,此处代码基于jQuery实现:

$("#vote .vote-btn").bind("click", function(){
    var me = $(this);
    var id = me.parent().attr("data_id");
    var type = this.id;
    $.post("请求地址", {'type': type, 'id': id }, function(data){
      data = $.trim(data);
      if(data == 'success'){   //如果投票成功
        $num = me.find(".vote-num");
        $num.html( parseInt($num.html()) + 1 ); //投票+1
        //取消绑定的点击事件,并还原鼠标指针样式
        $("#vote .vote-btn").unbind("click").css("cursor", "auto");
        if(type == 'bury'){
          alert("您投了反对票,敬请在评论中留言告知您的意见,以便于我们改正!");          
        }
      }else if(data == 'done'){  //如果已经投票过
        //取消绑定的点击事件,并还原鼠标指针样式
        $("#vote .vote-btn").unbind("click").css("cursor", "auto");
        alert("您已经投票过,无法再次投票!");
      }else{   //投票失败
        alert("由于系统或网络问题,投票没有成功,建议您稍后重新投票!");        
      }
    });
  });

你可以根据后台的需求自行更改js代码。

后台代码的大致实现是:先根据cookie或数据库数据来判断用户是否已经投票过,如果之前已经投票过,则返回done;如果投票投票操作成功,则返回success;如果投票失败则返回error或其他错误信息。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn