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


Posted in PHP onJuly 19, 2015

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

完整的前端代码包括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("https://3water.com/static/image/dig.gif");
}

#bury {
  background: url("https://3water.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或其他错误信息。

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

PHP 相关文章推荐
PHP.MVC的模板标签系统(二)
Sep 05 PHP
十天学会php(2)
Oct 09 PHP
我的论坛源代码(七)
Oct 09 PHP
PHP MemCached高级缓存配置图文教程
Aug 05 PHP
php对大文件进行读取操作的实现代码
Jan 23 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
Jun 14 PHP
php查询ip所在地的方法
Dec 05 PHP
PHP获取POST数据的几种方法汇总
Mar 03 PHP
WordPress中限制非管理员用户在文章后只能评论一次
Dec 31 PHP
php生成无限栏目树
Mar 16 PHP
PHP绕过open_basedir限制操作文件的方法
Jun 10 PHP
PHP使用DOM对XML解析处理操作示例
Jul 04 PHP
php实现上传图片文件代码
Jul 19 #PHP
54个提高PHP程序运行效率的方法
Jul 19 #PHP
浅谈COOKIE和SESSION区别
Jul 19 #PHP
PHP使用NuSOAP调用Web服务的方法
Jul 18 #PHP
PHP使用正则表达式获取微博中的话题和对象名
Jul 18 #PHP
PHP获取指定月份第一天和最后一天的方法
Jul 18 #PHP
PHP使用ODBC连接数据库的方法
Jul 18 #PHP
You might like
php session 检测和注销
2009/03/16 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
django实现用户注册实例讲解
2019/10/30 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
优乐美广告词
2014/03/14 职场文书
名人演讲稿范文
2014/09/16 职场文书
任命书怎么写
2015/03/02 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
微信搭讪开场白
2015/05/28 职场文书
亲戚关系证明
2015/06/24 职场文书