js实现点赞效果
javascript实现点赞或踩加一,再点一次减一的效果
好多新手在网上找不到点赞效果的代码,今天给大家分享一个采用js写的简单方法(有点错误,已修正)
效果图如下
HTML代码
可直接ctrl+c复制代码
30
javascript实现点赞或踩加一,再点一次减一的效果
好多新手在网上找不到点赞效果的代码,今天给大家分享一个采用js写的简单方法(有点错误,已修正)
效果图如下
HTML代码
可直接ctrl+c复制代码
30
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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。