这篇文章主要介绍了 php 实现网站顶踩功能的完整前端代码的相关资料, 需要的朋友可以参考下
许多网站都支持顶踩功能, 以便于显示用户对当前网页内容的满意度反馈下面我们给出本站使用的顶踩功能的完整前台实现代码, 以便于用户参考
完整的前端代码包括 htmlCSSjs 各部分的代码使用下列前端代码, 加上自行简单实现的后台代码, 即可实现完整的顶踩功能
前端 html 代码:
顶的次数
踩的次数
前端 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.jb51.net/static/image/dig.gif");
- }
- #bury {
- background: url("http://www.jb51.net/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 或其他错误信息
来源: https://www.php1.cn/detail/php-401558a35c.html