js实现简单点赞操作
2020-03-18 12:09
537 查看
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" onclick="sendGood()"> <img src="img/good.jpg" style="width: 25px; height: 25px;" /> </span> [<span id="good"></span>] <span id="badSpan" onclick="sendBad()"> <img src="img/good.jpg" style="width: 25px; height: 25px; transform: rotate(180deg);" /> </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(); } } /*踩的数量:*/ function sendBad(){ bad = parseInt(bad) + 1; document.getElementById("bad").innerText = bad; document.getElementById("badSpan").onclick = function(e){ e.preventDefault(); e.stopImmediatePropagation(); } } </script> </body> </html>
结果如下:
下面是点赞图片:可直接拖动图片另存为保存到本地,再使用。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 简单实现JS对dom操作封装
- JS实现简单表格排序操作示例
- JS 实现简单的操作(数量,单价,金额)
- JS实现的JSON序列化操作简单示例
- JS实现数组简单去重及数组根据对象中的元素去重操作示例
- Node.js实现批量下载图片简单操作示例
- js使用DOM操作实现简单留言板的方法
- 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现。
- JS数组操作之增删改查的简单实现
- JS数组操作之增删改查的简单实现
- 原生JS实现一些简单的操作
- JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
- JS实现简单的点赞与踩功能示例
- js操作数据库实现注册和登陆的简单实例
- 使用vue.js 在移动端简单实现的下拉加载更多 和一些常用的js/jq操作和vueFilter,v-if和v-show运用
- 简单实现JS对dom操作封装
- 原生js实现简单的链式操作
- JS简单实现获取元素的封装操作示例
- js 前端简单操作操作实现总结
- JS实现简单的对dom操作封装