微客导航 » 文章资讯 » js实现点赞效果

js实现点赞效果

2023-07-28 14:59:09 314

javascript实现点赞或踩加一，再点一次减一的效果

好多新手在网上找不到点赞效果的代码，今天给大家分享一个采用js写的简单方法（有点错误，已修正）

效果图如下

HTML代码

可直接ctrl+c复制代码

CSS代码

可直接ctrl+c复制代码（注：样式不一样自己调，请根据自行需要修改）

.dian{
display:flex;
flex-direction:row;
}

#zan,
#cai{
width:55px;
height:22px;
display:flex;
flex-direction:row;
justify-content:space-between;
background-color:#F3F3F3;
margin:010px;
border-radius:6px;
user-select:none;
cursor:pointer;
}

#zanimg,
#caiimg{
width:14px;
height:14px;
margin:5px5px05px;
}

#zan#num1,
#cai#num2{
line-height:22px;
margin-right:3px;
}

JS代码

可直接ctrl+c复制代码

varzan=document.getElementById('zan');
varcai=document.getElementById('cai');
varnum1=document.getElementById('num1');
varnum2=document.getElementById('num2');
varflag1=0;
varflag2=0;
zan.onclick=function(){
if(flag1==0){
num1.innerHTML++;
}
if(flag1==1){
num1.innerHTML--;
}
if(flag1==2){
num1.innerHTML++;
flag1=0;
}
flag1++;
}
cai.onclick=function(){
if(flag2==0){
num2.innerHTML++;
}
if(flag2==1){
num2.innerHTML--;
}
if(flag2==2){
num2.innerHTML++;
flag2=0;
}
flag2++;
}

作为一个前端小白，代码比较拙劣，如有问题请指出，我一定悉心改正，谢谢！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现点赞效果

热门推荐

随机推荐