JS实现点赞效果 CSS加JS点赞代码分享

时间:2021-11-24
类别:教程 - 网页设计

JS实现点赞效果,javascript实现点赞或踩加一,再点一次减一的效果,今天给大家分享一个采用js写的简单方法。

JS实现点赞效果

一、HTML代码,可直接ctrl + c复制代码:

  1. <div class="dian"
  2.  
  3.     <div id="zan"
  4.  
  5.         <img src="images/college_Likes_ic3.png" alt="很棒,赞一个"
  6.  
  7.         <div id="num1">30</div> 
  8.  
  9.     </div> 
  10.  
  11.    <div id="cai"
  12.  
  13.       <img src="images/college_Likes_ic.png" alt="不行,踩一下"
  14.  
  15.       <div id="num2">30</div> 
  16.  
  17.     </div> 
  18.  
  19. </div> 

二、CSS代码,可直接ctrl + c复制代码(注:样式不一样自己调,请根据自行需要修改)

  1. .dian { 
  2.  
  3.     display: flex; 
  4.  
  5.     flex-direction: row; 
  6.  
  7.  
  8.  
  9.  
  10. #zan, 
  11.  
  12. #cai { 
  13.  
  14.     width: 55px; 
  15.  
  16.     height: 22px; 
  17.  
  18.     display: flex; 
  19.  
  20.     flex-direction: row; 
  21.  
  22.     justify-content: space-between; 
  23.  
  24.     background-color: #F3F3F3; 
  25.  
  26.     margin: 0 10px; 
  27.  
  28.     border-radius: 6px; 
  29.  
  30.     user-select: none; 
  31.  
  32.     cursor: pointer; 
  33.  
  34.  
  35.  
  36.  
  37. #zan img, 
  38.  
  39. #cai img { 
  40.  
  41.     width: 14px; 
  42.  
  43.     height: 14px; 
  44.  
  45.     margin: 5px 5px 0 5px; 
  46.  
  47.  
  48.  
  49.  
  50. #zan #num1, 
  51.  
  52. #cai #num2 { 
  53.  
  54.     line-height: 22px; 
  55.  
  56.     margin-right: 3px; 
  57.  

三、JS代码,可直接ctrl + c复制代码。

  1. var zan = document.getElementById('zan'); 
  2.  
  3. var cai = document.getElementById('cai'); 
  4.  
  5. var num1 = document.getElementById('num1'); 
  6.  
  7. var num2 = document.getElementById('num2'); 
  8.  
  9. var flag1 = 0; 
  10.  
  11. var flag2 = 0; 
  12.  
  13. zan.onclick = function() { 
  14.  
  15.     if (flag1 == 0) { 
  16.  
  17.         num1.innerHTML++; 
  18.  
  19.     } 
  20.  
  21.     if (flag1 == 1) { 
  22.  
  23.         num1.innerHTML--; 
  24.  
  25.     } 
  26.  
  27.     if (flag1 == 2) { 
  28.  
  29.         num1.innerHTML++; 
  30.  
  31.         flag1 = 0; 
  32.  
  33.     } 
  34.  
  35.     flag1++; 
  36.  
  37.  
  38. cai.onclick = function() { 
  39.  
  40.     if (flag2 == 0) { 
  41.  
  42.         num2.innerHTML++; 
  43.  
  44.     } 
  45.  
  46.     if (flag2 == 1) { 
  47.  
  48.        num2.innerHTML--; 
  49.  
  50.     } 
  51.  
  52.     if (flag2 == 2) { 
  53.  
  54.         num2.innerHTML++; 
  55.  
  56.         flag2 = 0; 
  57.  
  58.     } 
  59.  
  60.     flag2++; 
  61.  

以上就是通过JS来实现简单的点赞效果,如有问题请指出。

    收藏