开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

点赞效果代码 js

要在网页上实现点赞效果，可以使用JavaScript结合HTML和CSS来完成。以下是一个简单的示例，展示了如何实现点赞按钮的基本功能和样式。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点赞效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="like-button" id="likeButton">点赞</div>
    <span id="likeCount">0</span>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.like-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.like-button:active {
    background-color: #0056b3;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const likeButton = document.getElementById('likeButton');
    const likeCount = document.getElementById('likeCount');
    let count = 0;

    likeButton.addEventListener('click', function() {
        count++;
        likeCount.textContent = count;
        likeButton.style.backgroundColor = '#28a745'; // 点赞后变色
        setTimeout(() => {
            likeButton.style.backgroundColor = '#007bff'; // 恢复原色
        }, 1000);
    });
});

解释

HTML部分：定义了一个点赞按钮和一个显示点赞数量的<span>元素。
CSS部分：设置了点赞按钮的基本样式，包括颜色、边框、圆角等，并添加了一个点击时的过渡效果。
JavaScript部分：
- 在文档加载完成后，获取点赞按钮和点赞数量的元素。
- 定义一个计数器count，初始值为0。
- 为点赞按钮添加点击事件监听器，每次点击时计数器加1，并更新显示的点赞数量。
- 点赞按钮点击后会变色，1秒后恢复原色。

应用场景

这种点赞效果常用于社交媒体、评论系统、博客文章等场景，用户可以通过点击点赞按钮来表达对内容的喜爱或支持。

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

点赞数量不更新：确保JavaScript代码正确获取并更新点赞数量的元素。
样式不生效：检查CSS文件是否正确链接，并确保CSS选择器正确。
按钮点击无反应：确保JavaScript代码在文档加载完成后执行，并检查事件监听器是否正确添加。

通过以上步骤，你可以实现一个简单的点赞效果，并根据需要进行进一步的优化和扩展。

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

有帮助

没帮助

相关·内容

点赞+1 效果

见图案代码附上： js/zepto.min.js"> $("html,body").on("click",".divclass",function(e){

5773 0

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

双击点赞和双击取消点赞如：在抖音中双击屏幕之后就可以点赞，小红心就会变亮 [在这里插入图片描述] 把白色和红色的心形图片复制到 media 下 [在这里插入图片描述] [在这里插入图片描述] 需要图片的可以自取...，下面白色图片由于没有背景，所以显示的是白色的，下载后鼠标点击就能看见了 [请添加图片描述] [请添加图片描述] 因为要双击屏幕才能点赞，所以还要给布局组件id 代码实现： ability_main <...业务分析：双击屏幕之后点赞。（上面已实现），再次双击屏幕之后，不会取消点赞，只有点击后红心之后才能取消点赞。...代码实现：上面布局文件不变，MainAbilitySlice 如下：给布局添加双击事件，因为再次双击不会取消点赞，所以把else代码里设置为红色后就把 flag 取反去掉，就不会出现再次双击取消点赞了...，再次双击屏幕就不会取消点赞了，只有点击小红心才能取消点赞 [在这里插入图片描述]

2K2 0

【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

QQ空间自动点赞代码

使用方法进入QQ空间网页版，并且登录复制以下代码 var x=5,y=10; function autoClick() { y=y+5; var zan...window.scrollBy(x,y); } window.setInterval(autoClick,2000); 按f12 进入console 粘贴如果嫌慢的话可以修改上面的这段代码

27.3K2 0

QQ空间自动点赞代码

前言原文地址：https://blog.ascv.cn/archives/41.html　每逢节假日，总有朋友同学发说说，求关注，自己又没时间去点赞。...现在让我们来在QQ空间控制台加上一段代码　一段Javascript代码，让电脑自动为我们点赞。...}; window.scrollBy(x,y); } window.setInterval(autoClick,2000);----使用方法1：进入QQ空间2：复制代码...3：按f12 进入控制台也就是console4：粘贴回车喝口水如果嫌慢的话可以修改这段代码window.setInterval(autoClick,2000);复制代码//2000代表两秒屏幕下滑

4.8K6 0

Redis实现点赞取消点赞

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

3.1K3 1

iOS开发中动画之点赞图标放大效果

https://blog.csdn.net/u010105969/article/details/73719527 大多数手机App的点赞图标在我们点击的时候都会有一个放大的效果，随后还原。...之前公司App有点赞功能但却没有这个放大之后还原的效果，于是研究一下准备将该效果添加到项目中。...思路：为点赞图标添加一个动画，该动画分为两步：1.让点赞图标放大一定的倍数 2.让点赞图标还原到原来的大小重写点击图标的点击事件，代码： - (void)touchesBegan:(NSSet<UITouch

1.2K1 0

typecho点赞实现代码分享

archive->request->do_action){ likeup($archive->request->likeup,$archive->request->do_action); exit; } } //点赞函数...$cid, ""); } echo $num; } post请求参数 likeup：文章id do_action：do或者undo likeup是指定文章id的，do_action是点赞动作，动作为do...为点赞，undo为取消点赞！...前端方面前端方面需要写ajax请求接口的函数，然后在post.php里加入按钮，点击按钮传递文章id与动作触发相关点赞或者取消点赞效果。...关于点赞数在post.php里添加cid,'kkb'); ?>即可显示点赞数，同时ajax动作请求完成也会返回点赞数。 linkCard('.post-content','0');

6382 0

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是如何实现点赞、取消点赞的？

项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...1.4 点赞数据在 Redis 中的存储格式用 Redis 存储两种数据，一种是记录点赞人、被点赞人、点赞状态的数据，另一种是每个用户被点赞了多少次，做个简单的计数。...由于需要记录点赞人和被点赞人，还有点赞状态（点赞、取消点赞），还要固定时间间隔取出 Redis 中所有点赞数据，分析了下 Redis 数据格式中 Hash 最合适。...id，点赞用户id，点赞状态。...如有更好的实现方案欢迎在评论区交流… 代码出自开源项目 CodeRiver，欢迎围观： https://github.com/cachecats/coderiver （完）

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是如何实现点赞、取消点赞的？

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

2.6K2 0

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

项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...由于需要记录点赞人和被点赞人，还有点赞状态（点赞、取消点赞），还要固定时间间隔取出 Redis 中所有点赞数据，分析了下 Redis 数据格式中 Hash 最合适。...设点赞人的 id 为 likedPostId，被点赞人的 id 为 likedUserId ，点赞时状态为 1，取消点赞状态为 0。...id，点赞用户id，点赞状态。...如有更好的实现方案欢迎在评论区交流… 代码出自开源项目 CodeRiver，欢迎围观： https://github.com/cachecats/coderiver【推荐阅读】

2.5K2 0

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

领读：点赞是个频率比较高的事件，也不是特别重要的记录，使用缓存来存储还是比较合理的，另外像排行榜、热议等都可以使用缓存，先来看看点赞是如何实现的吧，详细代码可以clone看下哈，跟紧脚步，学技术~ -...--- 作者：solocoder juejin.im/post/5bdc257e6fb9a049ba410098 代码出自开源项目 CodeRiver，欢迎围观： https://github.com/...项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...1.4 点赞数据在 Redis 中的存储格式用 Redis 存储两种数据，一种是记录点赞人、被点赞人、点赞状态的数据，另一种是每个用户被点赞了多少次，做个简单的计数。...id，点赞用户 id，点赞状态。

7K6 4

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

点击上方“码农沉思录”，选择“设为星标” 优质文章，及时送达代码出自开源项目 CodeRiver，欢迎围观： https://github.com/cachecats/coderiver 本文基于 SpringCloud...项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...1.4 点赞数据在 Redis 中的存储格式用 Redis 存储两种数据，一种是记录点赞人、被点赞人、点赞状态的数据，另一种是每个用户被点赞了多少次，做个简单的计数。...由于需要记录点赞人和被点赞人，还有点赞状态（点赞、取消点赞），还要固定时间间隔取出 Redis 中所有点赞数据，分析了下 Redis 数据格式中 Hash 最合适。...id，点赞用户 id，点赞状态。

2.9K1 0

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

项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...1.4 点赞数据在 Redis 中的存储格式用 Redis 存储两种数据，一种是记录点赞人、被点赞人、点赞状态的数据，另一种是每个用户被点赞了多少次，做个简单的计数。...由于需要记录点赞人和被点赞人，还有点赞状态（点赞、取消点赞），还要固定时间间隔取出 Redis 中所有点赞数据，分析了下 Redis 数据格式中 Hash 最合适。...id，点赞用户id，点赞状态。...以上就是点赞功能的设计与实现，不足之处还请各位大佬多多指教。如有更好的实现方案欢迎在评论区交流… 代码出自开源项目 CodeRiver，致力于打造全平台型全栈精品开源项目。

2.3K2 0

Python伪代码分析点赞器实现原理

许多社区类平台都具备点赞功能，应运而生的就是自动点赞器，今天用Python写一款点赞机器人，最简单易理解的核心逻辑。...全文涉及的伪代码，使用 Python 编写，由于是伪代码的原因，不懂Python，你也能看懂。一简介 1适用场景本次点赞机器人，主要面向电脑上的 Web 站点，不涉及 APP 端。...2核心逻辑模拟点击操作，触发点赞，喜欢等操作。实现点赞操作前，还有一步重要的代码实现，模拟登录。因此，点赞机器人的基本需求包括模拟登录、进行点赞；对该需求进行扩展后，存在两个常见的业务场景。...3点赞器伪代码实现伪代码实现如下：在调用点赞接口部分，你将碰到一个难点：接口中包含位置参数，例如上述的 B 站点赞链接中的 csrf，碰到未知参数的解决思路参考下述描述。...继续以B 站举例，打开浏览器开发者工具，切换到 network 选项卡，当点击点赞的时候，会出现点赞的数据请求，如下图所示。

6583 0

使用代码方式实现WordPress文章点赞功能

实现思路通过 ajax 实时显示点赞数量，自定义字段保存赞数量，Cookies 禁止重新点赞。...click", ".favorite", function() { $(this).postLike(); }); 修改文章页面single.php，在你需要的位置添加一个点赞按钮...> 通过上面的三段代码就已经实现文章点赞功能，但是样式效果惨不忍睹，作者还提供了下面的样式，添加到主题style.css中（下方样式xiaoz未经测试） .post-like...但如果您网站启用了CDN，或使用了WP-Super-Cache这类静态缓存插件后，页面会被提前缓存起来，这样判断也就失效了，便可以无限点赞，于是xiaoz进行了改进，通过js再判断一次COOKIES是否存在...; } else{ $(this).postLike(); } }); 总结最后实现的功能类似小z博客文章下方的点赞效果，这里主要提供思路和代码实现

1.1K1 0

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

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

1.6K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭