js实现点赞按钮功能的实例代码


Posted in Javascript onMarch 06, 2020

js实现点赞按钮功能,包括只能点赞一次,超过一次时提示文字(3秒后消失),点击时次数加一(给后端传值在这里解决)。

js实现点赞按钮功能的实例代码
js实现点赞按钮功能的实例代码

没有按钮加图片,只用了改变颜色来表示
首先明确html页面代码

<span id="tixing0" ></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>

首先我们要知道。在DOM中id是唯一的,这就表明我们获取span标签并进行区分时需要费点劲。我是根据button的id来标记和他一起的另外两个sapn标签,js中是这样实现的

var i=2;//评论条数
var Atixing=new Array(); //存储提示字的id名
var Acishu=new Array(); //存储次数的id名
var count=new Array();//限制每次按钮只可以单击一次
window.onload = function(){//页面加载出来后实现下列方法

bianliButtonCount();//获取所有按钮id
button1();//根据button 不同id进入不同标签
chushizhi();//将数据初始化
}
function bianliButtonCount(){
 for(var j = 0;j<i;j++){
 Atixing[j] = String("tixing"+j);
 Acishu[j] = String("cishu"+j);
 //alert(Atixing[j]); 
 }
}

这样便将一条评论的button标签和另外两个span标签合并了
类似:button id = 0;
span id= tixing0;
span id = cishu0;
这样就可以实现一个三者的捆绑,不会错乱。
接下来就是点击按钮式进入一个函数
第一次实现次数+1,并向后端传值
其他的都是显示提示字(提示字3秒消失)

function button1(){
var arr = document.getElementsByTagName('button');
 for(var i = 0;i<arr.length;i++){
 arr[i].onclick = function(){
 var btn = document.getElementById(this.id);
 btn.style.background="red";
 change(this.id);//根据button id,通过这个函数改变次数、提示字
 }
 
 }
}
function change(id){
if(count[id]!=1){
 document.getElementById(Acishu[id]).innerHTML="14"; 
 count[id]=1;
}else{
 document.getElementById(Atixing[id]).innerHTML="亲,您的赞太多了~";
 setTimeout(function(){document.getElementById(Atixing[id]).innerHTML="";},3000);//提示字三秒消失
}
}

还有一点,评论条数是从后端传来的,我们这里只是模拟了两条,已经评论的次数都是模拟的。

完整代码如下:HTML

<!--评论1-->
 <div class="content_2_box1">
 <div class="content_2_box1_1">
 <img src="images/001.gif" >
 <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>
 
 <!--评论1-->
 <div class="content_2_box1">
 <div class="content_2_box1_1">
 <img src="images/001.gif" >
 <font class="content_2_box1_1_font">网络用户</font>
 <span id="tixing1" style="font-size:30px;color:red;position:relative;left:200px;top:-40px;"></span>
 <div class="dianzan_11">
 <div class="dianzan_font">
 <center><span id="cishu1"></span></center>
 </div>
 <button class="btn" id="1" onclick=""></button>
 </div>
 </div>
 <div class="content_2_box1_2">
 <font>阿斯达四大撒大所,爱仕达撒所大所所大所,阿斯达萨达萨达!阿斯达四大撒大所
 奥术大师大所!啊啊撒大所大所</font>
 </div>
 </div>

js代码

var i=2;//评论条数
var Atixing=new Array(); //存储提示字的id名 
var Acishu=new Array(); //存储次数的id名
var count=new Array();//限制每次按钮只可以单击一次
window.onload = function(){//页面加载出来后实现下列方法

bianliButtonCount();//获取所有按钮id
button1();//根据button 不同id进入不同标签
chushizhi();//将数据初始化
}
function bianliButtonCount(){
 for(var j = 0;j<i;j++){
 Atixing[j] = String("tixing"+j);
 Acishu[j] = String("cishu"+j);
 //alert(Atixing[j]); 
 }

}
function chushizhi(){
for(var m = 0;m<i;m++){
 document.getElementById(Atixing[m]).innerHTML=""; 
 document.getElementById(Acishu[m]).innerHTML="13"; 
 }

}
function button1(){
var arr = document.getElementsByTagName('button');
 for(var i = 0;i<arr.length;i++){
 arr[i].onclick = function(){
 var btn = document.getElementById(this.id);
 btn.style.background="red";
 change(this.id);//根据button id,通过这个函数改变次数、提示字
 }
 
 }
}
function change(id){
if(count[id]!=1){
 document.getElementById(Acishu[id]).innerHTML="14"; 
 count[id]=1;
}else{
 document.getElementById(Atixing[id]).innerHTML="亲,您的赞太多了~";
 setTimeout(function(){document.getElementById(Atixing[id]).innerHTML="";},3000);//提示字三秒消失
}

}

总结

到此这篇关于js实现点赞按钮功能的文章就介绍到这了,更多相关js实现点赞按钮功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
Javascript中的解构赋值语法详解
Apr 02 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 #Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 #Javascript
vue-router 路由传参用法实例分析
Mar 06 #Javascript
JavaScript前端实现压缩图片功能
Mar 06 #Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 #Javascript
vue2路由基本用法实例分析
Mar 06 #Javascript
vue 动态组件用法示例小结
Mar 06 #Javascript
You might like
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
python迭代器实例简析
2014/09/25 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python requests库用法实例详解
2018/08/14 Python
python程序封装为win32服务的方法
2021/03/07 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
keras topN显示,自编写代码案例
2020/07/03 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
公司董事长职责
2013/12/12 职场文书
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
采购主管岗位职责
2014/02/01 职场文书
广告词串烧
2014/03/19 职场文书
全陪导游词
2015/02/04 职场文书
鼋头渚导游词
2015/02/05 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
php将xml转化对象的实例详解
2021/11/17 PHP