html+js实现点赞

html+js实现点赞

2版 2021-10-07
实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--评论1-->
<!--content n.所容纳之物; 所含之物; 内容; (书的)目录-->
<div class="content_2_box1">
    <div class="content_2_box1_1">
        <img src="images/001.jpeg" height="200" width="200">
        <font class="content_2_box1_1_font">网络用户</font>
        <span id="tixing0" style="font-size:30px;color:red;position:relative;left:200px;top:-40px;"></span>
        <div class="dianzan_11">
            <div class="dianzan_font">
                <center><span id="cishu0">18</span></center>
            </div>
            <button class="btn" id="0" onclick=""></button>
        </div>
    </div>
    <div class="content_2_box1_2">
        <font>阿斯达四大撒大所,爱仕达撒所大所所大所,阿斯达萨达萨达!阿斯达四大撒大所
            奥术大师大所!啊啊撒大所大所</font>
    </div>
</div>

<!--评论2-->
<div class="content_2_box1">
    <div class="content_2_box1_1">
        <img src="images/001.jpeg"  height="200" width="200">
        <font class="content_2_box1_1_font">网络用户</font>
        <span id="tixing1" style="font-size:30px;color:red
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
实现在点击点按钮时,点数加1并且爱心图标变成红色,可以结合HTML、CSS和JavaScript来完成。下面是一个示例的代码: ```html <!DOCTYPE html> <html> <head> <style> .like-button { display: inline-block; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; } .like-button .heart-icon { color: gray; transition: color 0.3s; } .like-button .like-count { margin-left: 5px; } .liked { color: red; } </style> </head> <body> <div class="like-button" onclick="likeButtonClicked()"> <span class="heart-icon">❤</span> <span class="like-count">0</span> </div> <script> var likeCount = 0; var likeButton = document.querySelector(".like-button"); var heartIcon = document.querySelector(".heart-icon"); var likeCountElement = document.querySelector(".like-count"); function likeButtonClicked() { likeCount++; likeCountElement.textContent = likeCount; // 添加/移除liked类来改变爱心图标颜色 heartIcon.classList.toggle("liked"); } </script> </body> </html> ``` 在上面的示例中,我们创建了一个点按钮,包含一个爱心图标和一个用于显示点数的文本。通过在JavaScript中监听按钮的点击事件,我们可以在点击时将点数加1,并通过添加/移除CSS类来改变爱心图标的颜色。 当你点击点按钮时,点数会增加,并且爱心图标会变成红色。再次点击按钮,点数会继续增加,并且爱心图标会恢复原来的颜色。你可以根据需要修改CSS样式和图标来适应你的项目。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_51297617

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值