JS实现点赞效果,javascript实现点赞或踩加一,再点一次减一的效果,今天给大家分享一个采用js写的简单方法。
一、HTML代码,可直接ctrl + c复制代码:
- <div class="dian">
- <div id="zan">
- <img src="images/college_Likes_ic3.png" alt="很棒,赞一个">
- <div id="num1">30</div>
- </div>
- <div id="cai">
- <img src="images/college_Likes_ic.png" alt="不行,踩一下">
- <div id="num2">30</div>
- </div>
- </div>
二、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: 0 10px;
- border-radius: 6px;
- user-select: none;
- cursor: pointer;
- }
- #zan img,
- #cai img {
- width: 14px;
- height: 14px;
- margin: 5px 5px 0 5px;
- }
- #zan #num1,
- #cai #num2 {
- line-height: 22px;
- margin-right: 3px;
- }
三、JS代码,可直接ctrl + c复制代码。
- var zan = document.getElementById('zan');
- var cai = document.getElementById('cai');
- var num1 = document.getElementById('num1');
- var num2 = document.getElementById('num2');
- var flag1 = 0;
- var flag2 = 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++;
- }
以上就是通过JS来实现简单的点赞效果,如有问题请指出。
收藏