JavaScript---动态的添加节点实现点赞页面点赞功能

最新推荐文章于 2024-06-14 10:42:57 发布
最新推荐文章于 2024-06-14 10:42:57 发布
阅读量2.3k 收藏 12
点赞数 2
分类专栏： JavaScript 文章标签： 点赞页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maidu_xbd/article/details/90409025
版权

动态的添加节点，添加效果如下右图（点赞页面）：

                      

左图html代码如下：

  //引用bootstrap
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<body>
    <div class="container">
        <div class="header">
            <input type="text" class="form-control" id="myInput" placeholder="请输入编号或标题">
        </div>
        <div class="sperate-line"></div>
    </div>
    <div class="container">
        <div class="content">
            <h3 class="content-title">2019年优秀共产党员评选活动</h3>
            <div class="row" id="row">

                <!-- 此处动态的添加图片展示区 -->

            </div>
        </div>
    </div>
    </div>
</body>

思路：给class="row"节点逐步添加子节点，主要包括图片和图片下方的文本区和点赞区

创建文本节点"11111" 的两种方法

（1）通过textContent

var p1 = document.createElement("p");

p1.textContent = "11111" ;

（2）通过createTextNode

var p1 = document.createElement("p");

var textP1 = document.createTextNode("11111" );

p1.appendChild(textP1);

第（1）中方法更简单

为相同class添加事件

注意涉及到imgLike[i]这个对象不能使用imgLike[i],要用this代替，this.nextSibling获取其兄弟节点，通过this.nextSibling.textContent设置imgLike[i]兄弟节点的值。

function doLike() {
                var imgLike = document.getElementsByClassName("title-right-like");
                for (var i = 0; i < imgLike.length; i++) {
                    imgLike[i].onclick = function () {
                        //注意涉及到这个对象不能使用imgLike[i],要用this代替
                        this.src = "../images/like3.png";
                        // 将点赞图片下方的p节点的文本值加1，通过nextSibling关联当前的点赞位置
                        this.nextSibling.textContent = parseInt(this.nextSibling.textContent) + 1;
                    };
                }
            }

javaScript动态添加实现代码：

 <script type="text/javascript">
        window.onload = function () {
            // d动态的添加content 
            addContent();

            // 动态的添加content
            function addContent() {
                var address = ["广东省深圳市", "湖北省武汉市", "江西省南昌市", "福建省厦门市", "湖北省武汉市", "广东省深圳市", "湖北省武汉市", "江西省南昌市", "福建省厦门市", "湖北省武汉市",]
                for (var i = 0; i < 10; i++) {
                    // 获取节点class="row"
                    var row = document.getElementsByClassName("row")[0];
                    // 创建div元素节点，并设置其class="col-xs-6"
                    var contentDiv = document.createElement('div');
                    contentDiv.className = "col-xs-6";
                    // 创建img节点,设置其src及class
                    var contentImg = document.createElement("img");
                    contentImg.src = "../images/" + (i + 1) + ".jpg";
                    contentImg.className = "img";
                    // 1.创建title
                    // 创建div元素节点，设置class
                    var titleDiv = document.createElement("div");
                    titleDiv.className = "title";
                    // 1.1创建title-left，设置class
                    var titleLeftDiv = document.createElement("div");
                    titleLeftDiv.className = "title-left";
                    // 创建p元素节点，设置文本内容，textContent
                    var p1 = document.createElement("p");
                    p1.textContent = "编号:" + (i + 1);
                    // var textP1 = document.createTextNode("编号:" + (i + 1));
                    // p1.appendChild(textP1);
                    // 创建p元素节点，设置文本内容，textContent，class
                    var p2 = document.createElement("p");
                    var textP2 = document.createTextNode(address[i]);
                    p2.appendChild(textP2);
                    p2.className = "title-left-address";
                    // 添加子节点
                    titleLeftDiv.appendChild(p1);
                    titleLeftDiv.appendChild(p2);

                    // 1.2 创建title-right
                    var titleRightDiv = document.createElement("div");
                    titleRightDiv.className = "title-right";
                    var titleRightImg = document.createElement("img");
                    titleRightImg.src = "../images/like1.png";
                    titleRightImg.className = "title-right-like";
                    var p3 = document.createElement("p");
                    p3.textContent = randomNum(1, 20);
                    p3.className = "title-right-numLike";
                    titleRightDiv.appendChild(titleRightImg);
                    titleRightDiv.appendChild(p3);
                    // 点赞功能
                    titleRightImg.onclick = function () {
                        this.src = "../images/like3.png";
                        this.nextSibling.textContent = parseInt(this.nextSibling.textContent) + 1;
                    }
                    // 为titleDiv添加子节点
                    titleDiv.appendChild(titleLeftDiv);
                    titleDiv.appendChild(titleRightDiv);
                    contentDiv.appendChild(contentImg);
                    contentDiv.appendChild(titleDiv)
                    row.appendChild(contentDiv);
                }
            }
            //生成从minNum到maxNum的随机数
            function randomNum(minNum, maxNum) {
                switch (arguments.length) {
                    case 1:
                        return parseInt(Math.random() * minNum + 1, 10);
                        break;
                    case 2:
                        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                        break;
                    default:
                        return 0;
                        break;
                }
            }

        }

    </script>

css样式代码

body{
    background: #ccc;
    padding: 5px;
}
/* header开始 */
.header{
    margin-top: 10px;
    background: #fad8dd;
    height: 56px;
    padding:10px;
}
.sperate-line{
    margin-top: 20px;
    border: 1;
    border-top: 1px solid rgb(182, 176, 176);
}
/* header。结束 */
/* content开始 */
.content-title{
    border-left: 6px solid #f61738;
    text-indent: 10px;
    font-size: 16px;
    font-weight: bold
}
.img{
    width: 100%;
    border-radius:10px; 
    margin: 5px 0px;  
}
.title{
    padding:5px 5px;
}
.title-left{
    float:left;
    padding-right: 10px;
    border-right: 1px solid #d8d2d2;
    line-height: 11px;
}
.title-left-address{
    font-size: 13px;
    color: #988f8f;
}
.title-right{
    float: right;
    margin-right: 15px;
}
.title-right-like{
	width: 22px;
}
.title-right-numLike{
margin-left: 10px;
}

maidu_xbd
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js实现点赞效果
10-15
主要为大家详细介绍了js实现点赞效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
全栈项目|小书架|服务器端-NodeJS+Koa2 实现点赞功能
龙衣
12-07 753
效果图 接口分析 通过上面的效果图可以看出，点赞入口主要是在书籍的详情页面。 而书籍详情页面，有以下几个功能是和点赞有关的： 获取点赞状态 点赞 取消点赞 所以项目中理论上与点赞相关的接口就以上三个。 点赞 model 的设计 既然明确了接口数量，那么下一步就是设计接口对应的model，通过model生成表格like，里面存放点赞数据。 那么需要存在哪些点赞数据呢？ 这里简单分析后，记录...
HTML+Jquery 点赞功能实现
最新发布
njihkj的博客
06-14 187
3、css 4、jquery
js +css3 动态点赞效果
09-19
js +css3 动态点赞效果 ，js +css3 动态点赞效果，js +css3 动态点赞效果
实现点赞动态效果
weixin_30415113的博客
11-03 635
点赞的动态效果,源码如下: ============== URL.py ================ url(r'^zan.html$', views.zan), ============== views.py =============== def zan(request): return render(request,'zan.html') =============...
Ajax+SSM实现点赞功能
0start1的博客
07-25 1172
前言：读者可以参考我的逻辑思路，以及ajax代码，具体代码需在自己实现 1、建立数据库 CREATE TABLE favorite_info ( user_id INT(4), activ_id INT(4) ); 2、service接口 // 添加点赞信息 √ public boolean addFavoriteInfo(Integer userId, Integer activId); //删除点赞信息 √ public bool
JavaScript评论点赞功能的实现方法
01-21
通过分析评论功能的逻辑关系，学会如何使用JavaScript实现评论、回复、点赞等各种功能 1.学会JavaScript处理日期和时间。 2.掌握Dom操作中的添加/删除子节点方法。 3.使用setTimeout设置定时器。 4.使用clearTimeout...
js点赞动画
08-10
在本场景中，"js点赞动画"指的是使用JavaScript技术来创建一个动态的、视觉上吸引人的点赞功能。这种动画效果通常包括用户点击点赞按钮后，点赞图标变化、数字跳动或者出现其他反馈效果，使得用户体验更加生动有趣。...
instagram-clone-node:instagram的克隆节点
03-18
它可能涵盖了用户注册、登录、发布图片、点赞、评论、关注等功能，这些都是Instagram等社交媒体应用的核心组件。开发者通过这个项目可以深入理解后端API设计、数据库交互以及前端用户体验的实现。 【标签】...
lab-fb-node-react-insta-stack-app:节点 - React - 角度
05-30
在现代Web开发中，JavaScript已经成为不可或缺的语言，尤其是在构建交互式、动态的Web应用程序时。本项目“lab-fb-node-react-insta-stack-app”旨在通过结合Node.js、React和Angular三大技术栈，创建一个类似于...
social-framework:节点框架
04-06
1. **用户关系管理**：轻松实现添加好友、关注、屏蔽等功能。 2. **动态推送**：实现实时的消息推送，让用户及时了解关注对象的最新动态。 3. **内容分享**：支持用户发布、评论、点赞等互动行为，促进信息的传播与...
微博、QQ动态点赞效果
05-20
blog原文 http://blog.csdn.net/qiaoidea/article/details/45850641 从简单的点赞效果看 cheackable和复杂动画的包装使用
JS实现简单的点赞与踩功能示例
10-17
主要介绍了JS实现简单的点赞与踩功能,涉及javascript针对页面元素动态操作相关实现技巧,需要的朋友可以参考下
SSM博客 点赞和文章浏览量实现
12-27 6963
本文目标主要介绍 通过 ajax+cookie 实现文章访问量和点赞数量的动态更新，并且在一次会话中，不会重复增加。即刷新网页，访问量不会增加，点赞数量也不能多次增加。  效果预览 点赞：点赞后再继续点，点赞数不会增加，刷新也不行 浏览量：浏览量+1，刷新不会继续增加 视图层代码如下 1、点赞的 html 部分 span class="like">     
基于node实现qq空间点赞
大风起兮云飞扬
06-17 783
由于浏览器的同源策略，我们想要调用其他网站的接口，通常会造成跨域。所以我们可以在后端服务中去请求第三方接口，这样就完美避开了浏览器的同源策略。
动态心点赞（粘贴即可使用h5代码和vue代码）
weixin_43431702的博客
05-11 447
1、html文件 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
七(5)查询动态-点赞评论-Redis(hash)
sweetcuter的博客
09-27 555
七(5)查询动态-点赞评论-Redis(hash)
JavaScript实现点赞功能
m0_74779077的博客
07-11 1367
var关键字可以定义、初始化一个变量。var定义的变量是有作用范围的，也就是在函数的作用域。定义在函数内部就是局部作用域，只在函数内部使用。如果定义在函数外部，就是全局作用域。①变量++（--）：表示先输出变量，然后在自加（减）1；②++（--）变量：表示先自加（减）1，然后在输出变量。小白编写，如果有错误的地方请各位大佬纠正【抱拳】！
html中js图标点赞,js实现简单点赞操作
weixin_30699915的博客
06-04 1090
JavaScript实现点赞操作：(练手·初级)，供大家参考，具体内容如下前期准备：① 导入jQuery文件；② 导入bootstrap文件；③ 点赞图片；对span标签控制鼠标点击图片文字并排摆放，文字局域图片腰部 [] []/*点赞的数量：*/document.getElementById("good").innerText = "";var good = docume...
vue使用vis-network实现动态添加修改删除节点和线
05-25
你可以使用以下步骤实现： 1. 引入vis-network库和Vue组件： ```javascript import { Network } from 'vis-network'; import { DataSet } from 'vis-data'; ``` 2. 创建Vue组件并在mounted钩子函数中初始化vis-network： ```javascript <template> <div ref="network"></div> </template> <script> export default { data() { return { nodes: new DataSet([]), edges: new DataSet([]) }; }, mounted() { const container = this.$refs.network; const options = {}; this.network = new Network(container, { nodes: this.nodes, edges: this.edges }, options); } }; </script> ``` 3. 添加节点和边： ```javascript // 添加节点 this.nodes.add({ id: 1, label: 'Node 1' }); this.nodes.add({ id: 2, label: 'Node 2' }); // 添加边 this.edges.add({ id: 1, from: 1, to: 2 }); ``` 4. 修改节点和边： ```javascript // 修改节点 this.nodes.update({ id: 1, label: 'New label' }); // 修改边 this.edges.update({ id: 1, label: 'New label' }); ``` 5. 删除节点和边： ```javascript // 删除节点 this.nodes.remove(1); // 删除边 this.edges.remove(1); ``` 6. 处理事件： ```javascript this.network.on('click', (params) => { console.log(params.nodes); }); ``` 以上是基本的使用方法，你可以根据自己的需求进行扩展。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值