开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 设置点赞次数

在JavaScript中设置点赞次数通常涉及到对点赞按钮的点击事件进行处理，并更新显示点赞数量的元素。以下是一个基础的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点赞示例</title>
</head>
<body>
    <button id="likeButton">点赞</button>
    <span id="likeCount">0</span> 次点赞

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    let likeCount = 0; // 初始化点赞次数
    const likeButton = document.getElementById('likeButton');
    const likeCountDisplay = document.getElementById('likeCount');

    // 点赞按钮点击事件处理
    likeButton.addEventListener('click', function() {
        likeCount++; // 点赞次数加1
        likeCountDisplay.textContent = likeCount; // 更新显示的点赞次数
    });
});

解释

HTML部分：
- 创建一个按钮用于点赞，ID为likeButton。
- 创建一个span元素用于显示点赞次数，ID为likeCount。

JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 初始化点赞次数likeCount为0。
- 获取点赞按钮和显示点赞次数的元素。
- 为点赞按钮添加点击事件监听器，每次点击时点赞次数加1，并更新显示的点赞次数。

优势

实时更新：用户点击点赞按钮后，点赞次数会立即更新，提供良好的用户体验。
简单易懂：代码结构简单，易于理解和维护。

应用场景

社交媒体：在社交平台上，用户可以对帖子、评论等进行点赞。
内容分享平台：在内容分享平台上，用户可以对文章、视频等进行点赞。

可能遇到的问题及解决方法

点赞次数不更新：
- 原因：可能是JavaScript代码未正确加载或事件监听器未正确绑定。
- 解决方法：检查JavaScript文件是否正确引入，确保DOMContentLoaded事件和点击事件监听器正确绑定。

点赞次数重复增加：
- 原因：可能是事件监听器多次绑定，导致每次点击时点赞次数增加多次。
- 解决方法：确保事件监听器只绑定一次，可以在绑定前先移除已有的监听器。

通过以上示例和解释，你应该能够在自己的项目中实现点赞功能，并处理常见的点赞次数更新问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【Auto.js】QQ名片点赞

"auto"; function 下滑(){ className("AbsListView").scrollable().scrollForward(); } function 赞(){ var like...= className("ImageView").desc("赞").find(); if(like){ like.click(); return true; } return false; } function...显示更多(){ for(let i = 0; i < 2;i++){ click("显示更多"); } } toast("请打开自己的资料页，点击点赞图标"); sleep(100); waitForActivity...com.tencent.mobileqq.activity.VisitorsActivity"); while(notStopped()){ var i = 0; while(i < 10){ i += 赞(

4.2K3 0

Redis实现点赞取消点赞

至于多久从 Redis 取一次数据存到数据库中，根据项目的实际情况定吧，我是暂时设了两个小时。项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...由于需要记录点赞人和被点赞人，还有点赞状态（点赞、取消点赞），还要固定时间间隔取出 Redis 中所有点赞数据，分析了下 Redis 数据格式中 Hash 最合适。...因为 Hash 里的数据都是存在一个键里，可以通过这个键很方便的把所有的点赞数据都取出。这个键里面的数据还可以存成键值对的形式，方便存入点赞人、被点赞人和点赞状态。...设点赞人的 id 为 likedPostId，被点赞人的 id 为 likedUserId ，点赞时状态为 1，取消点赞状态为 0。...id，点赞用户id，点赞状态。

3.1K3 1

Auto.js实现视频号自动点赞

最近在学脚本开发，今天终于有小有所成，写了一个微信视频号自动点赞的功能，以下是代码实现，特此记录。...function goodClick(){ // 点赞的容器 let goodBox = id("com.tencent.mm:id/a2s").findOne(); //...点赞的图标 let goodIcon = goodBox.children().findOne(id("com.tencent.mm:id/f1x")); // 点击的范围 let...:id/fnp")); // 点赞前文字 let num1 = goodNum1.text() - 0; // 开始来点赞 obj.click(); sleep...// 点赞后文字 let num2 = goodNum2.text() - 0; // 如果取消赞 if(num1>num2){ // 补回点赞

4.7K4 2

【Auto.js】为任何指定QQ好友点赞

/** * 为指定QQ点赞, 理论兼容所有安卓机...具体效果我也不知道,只在安卓7.0+版本测试了 * 如果有问题,群里说吧.QQ号码格式看下面 * 注意: 运行本脚本需要安卓7.0以上或者已经...root的设备,最低运行版本不建议低于安卓5.0 */ auto.waitFor(); var QQNum_Arry = [ //按照如下格式添加你要点赞的QQ号 "289986635",...com.tencent.mobileqq.activity.FriendProfileCardActivity"); sleep(3000); let Btn = descEndsWith("次赞"

1.5K2 0

Redis是如何实现点赞、取消点赞的？

至于多久从 Redis 取一次数据存到数据库中，根据项目的实际情况定吧，我是暂时设了两个小时。项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...1.4 点赞数据在 Redis 中的存储格式用 Redis 存储两种数据，一种是记录点赞人、被点赞人、点赞状态的数据，另一种是每个用户被点赞了多少次，做个简单的计数。...由于需要记录点赞人和被点赞人，还有点赞状态（点赞、取消点赞），还要固定时间间隔取出 Redis 中所有点赞数据，分析了下 Redis 数据格式中 Hash 最合适。...设点赞人的 id 为 likedPostId，被点赞人的 id 为 likedUserId ，点赞时状态为 1，取消点赞状态为 0。...id，点赞用户id，点赞状态。

3.3K5 0

Auto.js实现朋友圈自动点赞

最近在学脚本开发，今天终于有小有所成，写了一个朋友圈自动点赞的功能，以下是代码实现，特此记录。...// 单个页面点击 function pageClick(){ // 整个页面"两点"集合 var twoDotList = id("com.tencent.mm:id/ik").find...(); // 循环操作每个"两点" twoDotList.forEach(item => { // 点击"两点" item.click();...// 等待"赞"出现 sleep(1500); // 获取"赞"控件 var good = text("赞").findOnce();...if(good){ // 获取"赞"父控件 var goodParent = good.parent(); goodParent.click

3.3K2 0

Redis是如何实现点赞、取消点赞的？

至于多久从 Redis 取一次数据存到数据库中，根据项目的实际情况定吧，我是暂时设了两个小时。项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...1.4 点赞数据在 Redis 中的存储格式用 Redis 存储两种数据，一种是记录点赞人、被点赞人、点赞状态的数据，另一种是每个用户被点赞了多少次，做个简单的计数。...由于需要记录点赞人和被点赞人，还有点赞状态（点赞、取消点赞），还要固定时间间隔取出 Redis 中所有点赞数据，分析了下 Redis 数据格式中 Hash 最合适。...设点赞人的 id 为 likedPostId，被点赞人的 id 为 likedUserId ，点赞时状态为 1，取消点赞状态为 0。...id，点赞用户id，点赞状态。

2.6K2 0

Redis是如何实现点赞、取消点赞的？

至于多久从 Redis 取一次数据存到数据库中，根据项目的实际情况定吧，我是暂时设了两个小时。项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...由于需要记录点赞人和被点赞人，还有点赞状态（点赞、取消点赞），还要固定时间间隔取出 Redis 中所有点赞数据，分析了下 Redis 数据格式中 Hash 最合适。...设点赞人的 id 为 likedPostId，被点赞人的 id 为 likedUserId ，点赞时状态为 1，取消点赞状态为 0。...id，点赞用户id，点赞状态。...scheduleBuilder = SimpleScheduleBuilder.simpleSchedule() // .withIntervalInSeconds(10) //设置时间周期单位秒

2.5K2 0

Redis 是如何实现点赞、取消点赞的？

至于多久从 Redis 取一次数据存到数据库中，根据项目的实际情况定吧，我是暂时设了两个小时。项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...1.4 点赞数据在 Redis 中的存储格式用 Redis 存储两种数据，一种是记录点赞人、被点赞人、点赞状态的数据，另一种是每个用户被点赞了多少次，做个简单的计数。...由于需要记录点赞人和被点赞人，还有点赞状态（点赞、取消点赞），还要固定时间间隔取出 Redis 中所有点赞数据，分析了下 Redis 数据格式中 Hash 最合适。...id，点赞用户 id，点赞状态。...scheduleBuilder = SimpleScheduleBuilder.simpleSchedule() // .withIntervalInSeconds(10) //设置时间周期单位秒

7K6 4

Redis 是如何实现点赞、取消点赞的？

至于多久从 Redis 取一次数据存到数据库中，根据项目的实际情况定吧，我是暂时设了两个小时。项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...1.4 点赞数据在 Redis 中的存储格式用 Redis 存储两种数据，一种是记录点赞人、被点赞人、点赞状态的数据，另一种是每个用户被点赞了多少次，做个简单的计数。...由于需要记录点赞人和被点赞人，还有点赞状态（点赞、取消点赞），还要固定时间间隔取出 Redis 中所有点赞数据，分析了下 Redis 数据格式中 Hash 最合适。...id，点赞用户 id，点赞状态。...scheduleBuilder = SimpleScheduleBuilder.simpleSchedule() // .withIntervalInSeconds(10) //设置时间周期单位秒

2.9K1 0

使用 Redis 如何实现点赞，取消点赞呢？

至于多久从 Redis 取一次数据存到数据库中，根据项目的实际情况定吧，我是暂时设了两个小时。项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...1.4 点赞数据在 Redis 中的存储格式用 Redis 存储两种数据，一种是记录点赞人、被点赞人、点赞状态的数据，另一种是每个用户被点赞了多少次，做个简单的计数。...由于需要记录点赞人和被点赞人，还有点赞状态（点赞、取消点赞），还要固定时间间隔取出 Redis 中所有点赞数据，分析了下 Redis 数据格式中 Hash 最合适。...设点赞人的 id 为 likedPostId，被点赞人的 id 为 likedUserId ，点赞时状态为 1，取消点赞状态为 0。...id，点赞用户id，点赞状态。

2.3K2 0

Auto.js实现视频号点赞自动化

给大家分享一个自动化点赞视频号的功能，仅供大家学习参考，请勿滥用！基本实现思路： 1. 找到点赞图标和点赞数量的父容器A； 2. 通过父容器A找到点赞图标的可点击对象B； 3....点击可点击对象B进行点赞；正常来说，上面的操作已经完成了我们想要的功能，但是可能会因为人为的滑屏，将已经点赞了再次点击，变为了取消赞，所以要做下面的操作： 5....再次通过父容器A找到点赞数量D； 6. 比较点赞前的点赞数量C与点赞后的点赞数量D，如果数量C大于数量D说明之前取消了点赞，再次点击可点击对象B补回点赞； 7....().findOne(id("com.tencent.mm:id/fnp")); // 点赞前文字 let num1 = goodNum1.text() - 0; // 开始来点赞...// 补回点赞 obj.click(); sleep(1000); }; }; while(true){ // 开始点赞 goodClick(

1.6K1 0

点赞+1 效果

/js/zepto.min.js"> $("html,body").on("click",".divclass",function(e){

5773 0

HarmonyOS实战—实现抖音点赞和取消点赞效果

双击点赞和双击取消点赞如：在抖音中双击屏幕之后就可以点赞，小红心就会变亮 [在这里插入图片描述] 把白色和红色的心形图片复制到 media 下 [在这里插入图片描述] [在这里插入图片描述] 需要图片的可以自取...业务分析：双击屏幕之后点赞。（上面已实现），再次双击屏幕之后，不会取消点赞，只有点击后红心之后才能取消点赞。...单击红心也可以点赞，再次单击红心就会取消点赞实现思路：给最外层的布局添加双击事件，双击之后点赞，变成红色心。如果已经被点赞，那么还是修改为红色心，相当于不做任何处理。给图片添加单击事件。...如果没有点赞，单击之后，白色心变成红色心。如果已经点赞了，单击之后，红色心变成白色心。...代码实现：上面布局文件不变，MainAbilitySlice 如下：给布局添加双击事件，因为再次双击不会取消点赞，所以把else代码里设置为红色后就把 flag 取反去掉，就不会出现再次双击取消点赞了

2K2 0

有赞埋点实践

目前有赞支持两种采集方式： 3.1 无痕埋点（或全埋点）利用浏览器或APP自带的监听方式，对用户的浏览页面、点击等行为进行收集，可以收集到的信息主要有：页面的url、APP的包名等点击元素的xpath...采集到的信息需要进行二次标注，才可以被用户识别当按钮的位置不固定、名称存在重复或页面重构时，无法做到准确的标识无痕埋点在有赞一般用来做粗粒度的快速业务探索。...四、埋点sdk 为简化前端同学的埋点开发工作，使其只需要关注于业务本身，并对埋点的一些约定进行必要的约束，有赞开发了多个端（js/小程序/android/ios/java）的埋点sdk。...七、埋点管理平台有赞的早期阶段，所有业务的埋点方案都是记录在wiki中。...业务：由业务类型（微商城、零售等）和SDK类型（js/小程序/android/ios/java）唯一确定。页面、组件、展位、事件等属于且仅属于一个业务。

2.6K2 1

豆瓣自动批量点赞

下载：http://xfxuezhang.cn/WEB/SHARE/ => [电脑版]豆瓣自动点赞 - 自动点赞教程：http://xfxuezhang.cn/index.php/archives/320..., ck, start, cid): """ http post模拟请求进行点赞 :param url: 点赞链接 :param headers: 请求头 :param...开始点赞 >> 本页点赞数/总共点赞数/当前页数: 1/1/1 >> 当前id: 3232107331 >> [√] 点赞结果：成功 >> 延迟时间(s)：5 ---------------------...----------------------------- >> 本页点赞数/总共点赞数/当前页数: 2/2/1 >> 当前id: 3232108220 >> [√] 点赞结果：成功 >> 延迟时间(s...点赞结束 >> 当前账号: 111 >> 检测Cookie有效性 >> × Cookie无效 >> 进入浏览器模拟登陆，请暂时不要操作鼠标

3.2K3 0

某音电脑端网页版自动回复、点赞之js脚本

所以弄个自动回复，点赞。需要先点击显示评论框。...setTimeout(handlerByPmouse, 3000, { type: "moveAndClick", x: x + 500, y: y + 360 }); //再次点击（和上一次形成双击，点赞..._node = $(_ele); } }) console.log(_node.text()); //视频播放到第3秒时，触发自动回复和双击视频画面点赞...function init() { videoPlaying(); } eval(getScript("https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js

1.4K2 1

你还敢乱点赞吗？

点赞真的是成本低、效率高的社交好方法吗？ ? 疑惑你在社交媒体（例如微信、QQ和微博等）上点过赞没有？一定点过吧？有的人一天还要点很多次赞呢。问题是你在什么情况下点赞？...面对你的点赞，要么人家不打算理你，要么想理你也没有合适的办法。于是只能不理你。误会刚才还只是说点赞这个行为在社交中收益不高而已，下面我们来谈谈潜在损失吧。点赞究竟代表什么意思？你真说得清楚吗？...因为我没点赞，我直接微信问候啊！也许你并不在乎产生误会，认为发生概率很小，而且也没啥了不起，解释一下就完了。即便这样，你也不应该随便点赞。为什么？请往下看。...不知你刚才是否留意，在他们的主页上显著位置就设置好几个社交媒体链接，其中就包括了Facebook点赞按钮。 ? 你可能觉得没有什么了不得嘛。点了赞，不就是可能会给我发广告吗？...讨论看到这里，你还敢随便点赞吗？你觉得什么情况下最适合点赞？欢迎留言，我们一起讨论。 ----

9062 0

Pbootcms ajax 无刷新点赞

先引入 jq 文件 js"> 无须使用 API，把以下代码放入合适的位置即可...，可自定义 css 点赞 $('.support').on('click', //绑定事件 function() { $.ajax({ url: '{content:likeslink}', //点赞链接...likes' }, success: function(data) { $('#support_number').load(location.href + " #support_number"); //点赞后刷新...#support_numbe if (data.state) {} else { $(".supported").html("已点赞！")

4.7K1 0

Airtest给爱豆点赞

0.5*y),duration=1) 点击一次坐标为(100,100)的位置 touch((100,100),times=1) 测试示例2：这段测试是用Airtest在抖音APP给自己爱豆的相关视频点赞...运行视频： Airtest简单测试因为我用的模拟器，没有登录抖音账号，所以把点赞的代码注释了。

1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭