分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

JS简单实现点赞操作

发布时间:2023-09-06 01:58责任编辑:沈小雨关键词:暂无标签

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简单实现点赞操作

原文地址:https://www.cnblogs.com/superdrew/p/9141394.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved