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

2024-12-07 08:12:32

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

完整的前端代码包括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.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或其他错误信息。

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

PHP和NodeJs开发的应用如何共用Session

首先了解下session的机制客户端(浏览器中) cookie 作为键值,匹配服务器端的一个数据.然后客户端每次在 HTTP 请求里面带着那个 cookie,然后服务器端"理所当然"认为服务器端的这个数据是针对该客户端的. 某些系统喜欢把 session 内容编码后加密放在 cookie 里面那么你可以 1.你可以共用 cookie,然后把数据放在 nodejs 和拍黄片(Sorry,是PHP) 都可以取到的地方,例如 redis.影像中 php 默认的 session 是写他自
四个PHP非常实用的功能

最近写的几个PHP实用功能整理了一下,弄成一个文档,写上说明,方便以后使用!一共有4个PHP实用功能,现在跟大家分享,喜欢的朋友可以把它收藏起来,说不定以后用得上. 1. PHP函数的任意数目的参数您可能知道PHP允许你定义一个默认参数的函数.但您可能并不知道PHP还允许你定义一个完全任意的参数的函数下面是一个示例向你展示了默认参数的函数: // 两个默认参数的函数 function foo($arg1 = '', $arg2 = '') { echo "arg1: $arg1\n"
PHP开发Apache服务器配置

照此配置流程,绝对一路畅通,可保无虞. 昨天弄了个PHP小程序,想在本地跑一下测试,可是工作电脑没有安装环境,于是下载了一个wamp,一路畅通,Apache.Mysql.PHP就全有了.启动wamp服务,在浏览器里输入"http://localhost",访问正常,跳出wamp首页.于是,下面想把自己的CrashServer网站配置到Apache里,可以通过虚拟域名在本地访问测试,结果遇到不少问题,今日一通Google研究,终于任督二脉全通. 1.首先,Apache的配置文件是http
PHP结合jQuery实现红蓝投票功能特效

这是一个非常实用的投票实例,应用在双方观点对抗投票场景.用户可以选择支持代表自己观点的一方进行投票,本文以红蓝双方投票为例,通过前后台交互,直观展示红蓝双方投票数和所占比例,应用非常广泛. 本文是一篇综合知识应用类文章,需要您具备PHP.jQuery.MySQL以及html和css方面的基本知识.本文在<PHP+MySql+jQuery实现的"顶"和"踩"投票功能>一文基础上做了适当改进,共用了数据表,您可以先点击了解这篇文章. HTML 我们需要在页面
关于PHP开发的9条建议

本文只是个人从实际开发经验中总结的一些东西,并不是什么名言警句,写出来有两个目的:一是时刻提醒自己要按照这些知识点来写自己代码,二是为了分享,说不定对你有用呢?万一,是吧... 1.首要意识:安全大多数时候,我们开发的Web程序都是需要跟数据库打交道的,所以这里几乎可以说SQL注入是一个怎么也无法避免要拿出来讨论一下的问题.而且近年来像XSS和CSRF攻击也变得大行其道,使得"黑客"们貌似又有了一把把利器,而我们总是处于被动的状态.不过我们要记得是下面这两个原则: 1. 永远不要相信
PHP微信开发之二维码生成类

<?php /** * Created by PhpStorm. * User: bin * Date: 15-1-16 * Time: 上午9:48 */ namespace Home\Common; // 微信处理类 set_time_limit(30); class Weixin{ //构造方法 static $qrcode_url = "https://api.weixin.qq.com/cgi-bin/qrcode/create?"; static $token_url
PHP使用Face++接口开发微信公众平台人脸识别系统的方法

本文实例讲述了PHP使用Face++接口开发微信公众平台人脸识别系统的方法.分享给大家供大家参考.具体如下: 效果图如下: 具体步骤如下: 首先,先登录Face++的官网注册账号:官网链接注册之后会获取到api_secret和api_key,这些在调用接口的时候需要用到. 然后接下来的就是使用PHP脚本调用API了. 在使用PHP开发微信公共平台的时候,推荐使用Github上的一款不错的框架:wechat-php-sdk 对于微信的常用接口做了一些封装,核心文件wechat.class.php
PHP结合jQuery实现的评论顶、踩功能

当我们浏览网页时,我们想对网页内容如文章.评论中的观点持赞同或反对意见时,可以通过点击网页中的"顶"和"踩"来进行投票.而整个交互过程,开发者可以通过ajax异步来实现,从而提高用户体验. 本文结合实例,讲解使用PHP+MySql+jQuery实现的"顶"和"踩"投票功能,通过记录用户IP,判断用户的投票行为是否有效,该实例也可以扩展到投票系统中.如果您具备PHP.MySql和jQuery相关基础知识,那么请继续往下阅读. 准
PHP+Javascript实现在线拍照功能实例

本文实例讲述了PHP+Javascript实现在线拍照功能.分享给大家供大家参考.具体如下: 我们在一些WEB应用中可能会遇到这样的情况,用户需要自己现场拍照并上传到会员系统.比如驾校采集指纹拍照流程.考试现场采集照片等.我们今天要讲的是如何使用javascript和PHP实现一个简单的在线拍照并上传的功能. 实现这个功能的前提是你的电脑设备上需要安装有摄像头设备,以及你的浏览器需要支持flash <!DOCTYPE HTML> <html> <head> <me
php开发中的页面跳转方法总结

页面跳转可能是由于用户单击链接.按钮等触发的,也可能是系统自动产生的.页面自动跳转在WEB开发中经常用到,而且根据需求可以采用不同的跳转方式,比如提示操作信息后延时跳转等, 本文总结了WEB开发中常见的几种页面跳转方法. PHP header()函数跳转 PHP的header()函数非常强大,其中在页面url跳转方面也调用简单,使用header()直接跳转到指定url页面,这时页面跳转是302重定向: $url = "http://www.jb51.net/"; header( &qu
8个必备的PHP功能开发

PHP开发的程序员应该清楚,PHP中有很多内置的功能,掌握了它们,可以帮助你在做PHP开发时更加得心应手,本文将分享8个开发必备的PHP功能,个个都非常实用,希望各位PHP开发者能够掌握. 1.传递任意数量的函数参数我们在.NET或者JAVA编程中,一般函数参数个数都是固定的,但是PHP允许你使用任意个数的参数.下面这个示例向你展示了PHP函数的默认参数: // 两个默认参数的函数 function foo($arg1 = ", $arg2 = ") { echo "ar
PHP技术开发微信公众平台

下面通过图文并茂的方式介绍微信公众平台开发过程,具体内容如下: 微信公众平台有两种模式:编辑模式和开发模式. 普通的功能可以通过编辑模式来搞定.开发模式具有更多的功能.让我们来使用开发模式开发helloword吧步骤如下: 第一步:先注册一个公众号(https://mp.weixin.qq.com) 第二步:注册sae(http://sae.sina.com.cn/),作为你的服务器. 第三步:登录微信公众平台(https://mp.weixin.qq.com)查看开发文档并下载官方提供的

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

相关推荐

随机推荐