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之Smarty入门
Jan 04 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
Oct 11 PHP
PHP垃圾回收机制简单说明
Jul 22 PHP
从手册去理解分析PHP session机制
Jul 17 PHP
浅析PHP页面局部刷新功能的实现小结
Jun 21 PHP
PHP扩展Memcache分布式部署方案
Dec 06 PHP
yii2中的rules 自定义验证规则详解
Apr 19 PHP
PHP的全局错误处理详解
Apr 25 PHP
PHP查看SSL证书信息的方法
Sep 22 PHP
php workerman定时任务的实现代码
Dec 23 PHP
PHP中PCRE正则解析代码详解
Apr 26 PHP
Laravel框架验证码类用法实例分析
Sep 11 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中this,self,parent的区别详解
2013/06/08 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
超级退弹代码
2008/07/07 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python对象及面向对象技术详解
2016/07/19 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python多进程控制学习小结
2018/10/31 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
人力资源主管岗位职责
2014/01/29 职场文书
幼儿老师求职信
2014/06/30 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL