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 相关文章推荐
关于URL中的特殊符号使用介绍
Nov 03 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
extjs render 用法介绍
Sep 11 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
JavaScript中的Proxy对象
Nov 27 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
计数器详细设计
2006/10/09 PHP
php基础知识:类与对象(5) static
2006/12/13 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
python+pyqt实现12306图片验证效果
2017/10/25 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Django之腾讯云短信的实现
2020/06/12 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
新闻专业个人自我评价
2013/09/21 职场文书
销售行业个人求职自荐信
2013/09/25 职场文书
工程业务员岗位职责
2013/12/31 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
世界地球日活动总结
2015/02/09 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书