踩与点赞

最新推荐文章于 2022-03-29 09:30:31 发布
最新推荐文章于 2022-03-29 09:30:31 发布
阅读量1.3k 收藏 4
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44541162/article/details/91356365
版权

（作者：苦行者；撰写时间：2019年5月31日）
1、Html代码及页面：
在这里插入图片描述
在这里插入图片描述
这是两个layui插件自定义的点赞和踩的符号实体，用标签包裹，分别给这两个i标
签一个id。
2、Js代码：
首先，定义好两个bit数据类型的变量eas和tra，让它们的初始值为true，分别用来记录是否点赞和是否踩两个状态；
在这里插入图片描述
获取点赞的符号的id，给它添加点击事件，判断eas是否为false，即已经踩过，如果已经
踩
过就提示用户不能再点赞；否则进行二次判断，如果tra为true，并且已经知道eas为
true，这时，获取到点赞符号的html代码，把事先定义好的html字符串（一个宽为31
个像素，高为28个像素的点赞图片）赋值给它，覆盖掉之前的html代码，并且设置它的
颜色为红色，令tra为false；另一种为tra为false的情况下，直接给点赞符号的html里面
的内容设置为点赞符号，并给tra赋值为true。
一开始踩和点赞的状态默认为true，当你点击点赞的时候，eas为true，tra也为true，则
跳到第二条if判断语句，这时tra的状态跟新为false；当你另外点击踩的时候，由于tra等
于false，因此它便跳到踩的第一条if判断语句，这时便会提示用户“您已经点过赞，不能
再踩了！”。
在这里插入图片描述
同理，踩的js代码跟点赞的js代码几乎一样，在这里就不再赘述，下面是它们最终的效果
图：
在这里插入图片描述在这里插入图片描述

金无戏言
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery+php实现赞，踩功能
u014270740的专栏
05-11 4827
实现赞，踩功能需要的一些需求： 1.记录用户的IP，根据IP判断用户的投票行为是否有效 2.需要两张表，一张是统计赞和踩的数量的，一张是记录赞或踩过的用户IP的 3.页面加载完成需要显示的赞和踩的数据用ajax从服务端获取，以后每次点赞，点踩也是用ajax从服务端获取 html 代码 （额，因为这个主要实现的是逻辑，所以界面就很简单啦 ，嘿嘿） 这个html代码很简单，就不多说了
JS实现简单的点赞与踩功能示例
10-17
主要介绍了JS实现简单的点赞与踩功能,涉及javascript针对页面元素动态操作相关实现技巧,需要的朋友可以参考下
Redis + DB +消息队列 实现高效的文章点赞，点踩功能
热门推荐
程序员小强的博客
10-29 1万+
需求说明 用户可点赞或踩，每赞一次，“赞”数量+1，每踩一次，“踩”数量+1，“点赞”和“点踩” 当天内二选一当天内有效 场景：用户A 点赞 文章a，文章a 点赞量+1 ，同一用户，同一文章 当天再次点击无效，赞与踩二选一，隔天再次点击有效 表设计 文章的赞踩总记录表 CREATE TABLE `article_love_record` ( `id` bigint(20) UNSIGNED ...
简单点赞效果html,JS实现简单的点赞与踩功能示例
weixin_34511754的博客
06-03 439
本文实例讲述了JS实现简单的点赞与踩功能。分享给大家供大家参考，具体如下：HTML部分：赞:0踩:0JS部分：function dianZan(){var i = 0;return function(){this.innerHTML ="+"+ ++i;}}btn_zan.onclick = dianZan();function caiZan(){var i = 0;return function...
SpringMVC下利用Redis实现点赞踩功能
weixin_38023814的博客
07-22 3220
实现流程: 建立RedisUtil工具类 /** *根据文章id 和 文章类型拼接成字符串作为Key存入redis缓存中 *可以根据实际修改 * / public class RedisKeyUtil { private static String SPLIT = ":"; private static String BIZ_LIKE = "LIKE"; privat...
asp+acc点赞 踩程序
11-30
asp+acc点赞+踩程序，也是为了不懂的小白们学会如何写点赞系统，大家一起讨论 学习，共同成长。努力。
Android listview点赞问题分析
09-01
在这个示例中，数据存储在一个`List<Bean>`中，每个Bean对象包含点赞数（praise）和踩数（step）。 2. **创建Adapter**：创建一个继承自`BaseAdapter`的自定义Adapter，例如`MainActivityAdapter`。Adapter是连接...
php+mysql+ajax点赞和踩的功能
11-27
php+mysql+ajax点赞和踩的功能,自己总结的一点经验，希望能帮到大家
点赞和踩功能的怎么实现php,php+js实现点赞功能的示例详解
weixin_28674303的博客
03-09 390
最近在做一个视频网站，需要实现视频的点赞功能，我是结合ajax和数据库实现的，数据库的格式为有四个字段：文章id,赞，踩，ip。因为需要一个ip只能点赞一次，所以需要一个ip字段存储点赞的ip,这样便于判断该ip是否已经点赞过了；我将点赞和踩的图片做成两个按钮；具体代码如下：js程序$(function(){var id=$("#vote").attr("rel");//获取到文章id;$("#v...
高仿微信朋友圈点赞、评论弹出框效果(自定义Popupwindow实现)
11-14
本Demo高仿微信朋友圈评论点赞弹出框动画效果，自定义popupwindow实现，可助你快速学习自定义popupwindow.
jQuery+ajax实现文章点赞功能的方法
10-23
主要介绍了jQuery+ajax实现文章点赞功能的方法,涉及jQuery基于ajax无刷新post提交实现点赞功能的具体步骤与相关技巧,需要的朋友可以参考下
BBS项目分布搭建四(点赞点踩及评论功能)
qq_38082146的博客
03-17 771
1. 点赞点踩样式准备 # 在base.html文件中 head标签内 添加css模块： {% block css %} {% endblock %} # 修改 article_detail.html内容： {% extends 'base.html' %} {% block css %} <style> #div_digg { float: right; margin-bottom: 10px
php列表页点赞功能实现,php+js实现点赞功能的示例详解
weixin_39874379的博客
03-09 232
最近在做一个视频网站，需要实现视频的点赞功能，我是结合ajax和数据库实现的，数据库的格式为有四个字段：文章id,赞，踩，ip。因为需要一个ip只能点赞一次，所以需要一个ip字段存储点赞的ip,这样便于判断该ip是否已经点赞过了；我将点赞和踩的图片做成两个按钮；具体代码如下：js程序$(function(){var id=$("#vote").attr('rel');//获取到文章id;$("#v...
Layui 使用 CSS+JavaScript 实现点赞评论功能
qq_42782011的博客
03-29 2851
html+css+js 实现点赞 评论等功能
2018.7.13-点赞踩和多级评论功能总结
weixin_30241919的博客
07-14 435
点赞功能的实现 首先在文章内容下写出两个div标签，并绑定点击事件，此事件函数需要传入的参数有本标签对象、文章id、判断赞还是踩的参数： <div> <span onclick="up_down_click(this, {{ select_article.nid }}, 1);">赞</span> <i ...
JQ简单点赞功能
weixin_30578677的博客
07-04 316
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>JQ简单点赞功能</title> <script src="https://cdn.boot...
layui使用心得
weixin_42498839的博客
03-29 395
layui使用心得 后台交互渲染table内的数据，接口返回的json串是多层。 接口返回的数据： parseData: function(res){ //res 即为原始返回的数据 return { “code”: res.code, //解析接口状态 “msg”: res.msg, //解析提示文本 “count”: res.data.count, //解析数据长度 “data”: ...
点赞和踩功能的怎么实现php,php结合ajax实现赞、顶、踩功能实例
weixin_36433524的博客
03-09 297
php应用越来越多，也越来越广泛，为了增加网站的丰富多彩，从而出现了很多新的技术。ajax是现代网站中不能缺少的一项技术，他可以异步刷新数据，而实现很多效果，比如刷新验证码，微博中的赞功能，都是运用这个。本次赞功能的效果图：主页文件(index.php):header("Content-type:text/html;charset=utf-8");include "finger_ajax.php"...
编写Python代码，实现用户在网页界面上点赞和踩的功能。在用户点赞或踩的同时，你需要更新数据库中对应用户的点赞数或踩数字段，并且在用户取消点赞或踩时也要相应地更新数据库中的数据。
最新发布
06-02
好的，以下是一个简单的示例代码，用来实现用户在网页界面上点赞和踩的功能，并且将数据保存到MySQL数据库中。 首先，我们需要先安装MySQL连接库。在这里，我以`pymysql`为例： ``` pip install pymysql ``` 然后，我们需要先创建一个MySQL数据库和表格，用来存储用户数据。这里我创建了一个名为`user_action`的数据库，其中包含一个名为`users`的表格： ```mysql CREATE DATABASE user_action; USE user_action; CREATE TABLE users ( id INT NOT NULL AUTO_INCREMENT, username VARCHAR(50) NOT NULL, likes INT NOT NULL, dislikes INT NOT NULL, PRIMARY KEY (id) ); ``` 接下来，我们可以编写Python代码，实现用户在网页界面上点赞和踩的功能： ```python import pymysql from flask import Flask, request, jsonify app = Flask(__name__) # 连接MySQL数据库 conn = pymysql.connect( host='localhost', user='root', password='password', database='user_action' ) # 定义一个查询数据库的函数 def get_user(username): with conn.cursor() as cursor: sql = "SELECT * FROM users WHERE username=%s" cursor.execute(sql, username) result = cursor.fetchone() return result # 定义一个更新数据库的函数 def update_user(username, likes, dislikes): with conn.cursor() as cursor: sql = "UPDATE users SET likes=%s, dislikes=%s WHERE username=%s" cursor.execute(sql, (likes, dislikes, username)) conn.commit() # 点赞和取消点赞的API @app.route('/like', methods=['POST']) def like(): data = request.get_json() username = data['username'] # 查询用户数据 user = get_user(username) if user is None: return jsonify({'message': 'User not found'}), 404 # 更新用户点赞数 likes = user[2] + 1 if data['action'] == 'like' else user[2] - 1 dislikes = user[3] update_user(username, likes, dislikes) return jsonify({'message': 'Success'}) # 踩和取消踩的API @app.route('/dislike', methods=['POST']) def dislike(): data = request.get_json() username = data['username'] # 查询用户数据 user = get_user(username) if user is None: return jsonify({'message': 'User not found'}), 404 # 更新用户踩数 likes = user[2] dislikes = user[3] + 1 if data['action'] == 'dislike' else user[3] - 1 update_user(username, likes, dislikes) return jsonify({'message': 'Success'}) if __name__ == '__main__': app.run() ``` 在这个示例代码中，我们使用了Flask框架来编写API接口。`/like`和`/dislike`分别用来处理用户点赞和踩的操作。当接收到用户的点赞或踩请求时，我们会先查询数据库中对应的用户数据，然后根据用户的操作来更新数据库中的点赞数或踩数字段。更新完成后，我们会返回一个JSON响应，表示操作成功。 这只是一个简单的示例代码，实际上在真实的应用中，我们可能需要更加完善的错误处理、用户认证和授权等功能。不过希望这个示例代码能够对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值