html中js图标点赞,js实现简单点赞操作

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

前期准备：

① 导入jQuery文件；

② 导入bootstrap文件；

③ 点赞图片；

对span标签控制鼠标点击

图片文字并排摆放，文字局域图片腰部

[]

/*点赞的数量：*/

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();

}

结果如下：

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

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

html中js图标点赞,js实现简单点赞操作相关推荐

sql查询计算机系学生的学号和姓名,实验5数据库的简单查询操作答案.docx
(6) 从学生信息表中查询计算机系年龄小于 (6) 从学生信息表中查询计算机系年龄小于 20 的学生的信息 SQL 代码如下: (2) (2) 从学生信息表中查询所有学生的姓名和学号信息并分别实验 ...
js中的json ajax,js结合json实现ajax简单实例
这篇文章主要为大家详细介绍了js结合json实现ajax简单实例的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下前期准备 1.安装wampserver或者其他相似软件来搭建本地集成安装环 ...
自动点击微信c语言,【Ctrl.js】微信中给微信运动的朋友自动点赞源码
[JavaScript] 纯文本查看复制代码//--------------------------------------------------------------------------- ...
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
JQuery版本:1.7.1: 编写一个JS类(ck.layer.js): [javascript] view plaincopy /********************************* ...
简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程作者:茄果链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
auto.js 实现信息发送、QQ点赞、微信点赞、健康日报签到
文章目录 auto.js开发文档安装total control 在手机端安装auto.js apk 安装vscode 短信多条发送 QQ点赞微信点赞健康日报填写叠猫猫 auto.js开发文档 ...
AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别
AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解, ...
node mysql await_node.js中对 mysql 进行增删改查等操作和async，await处理
要对mysql进行操作,我们需要安装一个mysql的库. 一.安装mysql库 npm install mysql --save 二.对mysql进行简单查询操作 const mysql = requ ...
Eclipse中导入项目后js报错解决方法
Eclipse中导入项目后js报错的原因与解决方法在我们将项目导入Eclipse后,配置好各种编译条件.加载好jar包.配置好tomcat后发现项目还是报错,(前提是项目本身并没有错误,而是我们在初 ...
node.js中对 mysql 进行增删改查等操作和async，await处理
要对mysql进行操作,我们需要安装一个mysql的库. 一.安装mysql库 npm install mysql --save 二.对mysql进行简单查询操作 const mysql = requ ...

html中js图标点赞,js实现简单点赞操作

图片文字并排摆放，文字局域图片腰部

html中js图标点赞,js实现简单点赞操作相关推荐

最新文章

热门文章