微信小程序平台开发_js完成简略点赞操作

日期:2021-01-05 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

js实现简单点赞操作       这篇文章主要为大家详细介绍了js实现简单点赞操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

JavaScript实现点赞操作:(练手·初级),供大家参考,具体内容如下

前期准备:

① 导入jQuery文件;

② 导入bootstrap文件;

③ 点赞图片;

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 title 对span标签控制鼠标点击 /title 
 script type="text/javascript" src="js/jquery-3.3.1.js" /script 
 script type="text/javascript" src="js/bootstrap.min.js" /script 
 /head 
 body 
 h5 style="font-family: '微软雅黑';" 图片文字并排摆放,文字局域图片腰部 /h5 
 !-- span style="font-family: '微软雅黑';color: orangered;font-size: 10px; " 注意:有些浏览器不支持旋转的特性transform:正如你所看到的 br/ /span -- 
 span id="goodSpan" 
 img src="img/good.jpg" / 
 /span 
 [ span id="good" /span ]
 span id="badSpan" 
 img src="img/good.jpg" / 
 /span 
 [ span id="bad" /span ]
 script 
 /*点赞的数量:*/
 document.getElementById("good").innerText = "";
 var good = document.getElementById("good").textContent;
 document.getElementById("bad").innerText = "";
 var bad = document.getElementById("bad").textContent;
 window.onload = function(){
 if (good == "") {
 good = 0;
 document.getElementById("good").innerText = 0;
 if (bad == "") {
 bad = 0;
 document.getElementById("bad").innerText = 0;
 /*点赞的数量:*/
 function sendGood(){
 good = parseInt(good) + 1;
 document.getElementById("good").innerText = good;
 document.getElementById("goodSpan").onclick = function(e){
 e.preventDefault();
 e.stopImmediatePropagation();

document.getElementById("bad").innerText = bad; document.getElementById("badSpan").onclick = function(e){ e.preventDefault(); e.stopImmediatePropagation(); /script /body /html

结果如下:

下面是点赞图片:可直接拖动图片另存为保存到本地,再使用。

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