JavaScript实现点赞功能的示例
更新时间：2024年07月09日 11:59:45 作者：m0_74779077
本文主要介绍了JavaScript实现点赞功能的示例,分享给大家
一、功能实现
有两个按钮，分别是点赞👍和踩👎。点击点赞按钮的时候，点赞的数量会+1，当点击踩按钮时，踩的数量就会显示-1。
二、主要知识点
1、var关键字
var关键字可以定义、初始化一个变量。var定义的变量是有作用范围的，也就是函数作用域或全局作用域。定义在函数内部就是局部作用域，只在函数内部使用。如果定义在函数外部，就是全局作用域。
2、变量的自增自减
自增和自减分别分为两类：
①变量++（--）：表示先输出变量，然后在自加（减）1；
②++（--）变量：表示先自加（减）1，然后在输出变量。
三、代码实现
html、css代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点赞功能实现</title>
<style>
button:hover{
cursor: pointer;
}
</style>
</head>
<body>
<!-- 点赞👍和踩👎图标样式 -->
<p>欢迎来到HTML页面！</p>
<button class="btn1">点赞👍</button> <button class="btn2">踩👎</button>js代码：
<!-- 点赞和踩功能的实现 -->
<script>
window.onload = function(){
// 通过类名拿到两个按钮
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
// 初始化点赞数量
var addnum = 0;
// 给点赞按钮添加点击事件，自增并替换输出
btn1.addEventListener('click',function(){
++addnum;
btn1.textContent = "点赞+"+addnum;
})
// 初始化踩数量
var stepnum = 0;
// 给踩按钮添加点击事件，自减并替换输出
btn2.addEventListener('click',function(){
--stepnum;
btn2.textContent = "踩"+stepnum;
})
}
</script>
</body>
</html>四、效果图
未点击前：
点击后：
到此这篇关于JavaScript实现点赞功能的示例的文章就介绍到这了,更多相关JavaScript 点赞内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
微信小程序中我们创建页面时会自动创建四个文件分别为js文件,wxml文件wxss文件最后还有我们今天的主角json配置文件,下面这篇文章主要给大家介绍了关于微信小程序全局配置以及页面配置的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了前端实现界面切换主题的相关资料,文中介绍了两种方法,通过link标签的rel属性和通过变量设置,前者适用于确定的主题样式切换,后者则适用于在拾色器中任意选择颜色更换主题的情况,需要的朋友可以参考下2025-02-02
本文给大家分享一个简单的js路由跳转功能，非常不错，需要的朋友参考下吧2017-09-09
实际过程中你会发现图表在div中的位置不太理想,这时怎么去调整呢?下面这篇文章主要给大家介绍了关于Echarts图表位置调整的相关资料,需要的朋友可以参考下2022-10-10
javascript ES6 Template String模板字符串使用方法
这篇文章主要介绍了javascript ES6 模板字符串(Template String)是增强版的字符串，用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量,需要的朋友可以参考下2023-06-06
下面小编就为大家带来一篇仿百度换肤功能的简单实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Knockoutjs 的Components 是一种自定义的组件，它以一种强大、简介的方式将你自己的ui代码组织成一种单独的、可重用的模块。接下来通过本文给大家介绍knockoutjs动态加载外部的file作为component中的template数据源的实现方法，一起看看吧2016-09-09
这篇文章主要介绍了JavaScript forEach()遍历函数使用及介绍,本文讲解了使用forEach遍历数组的用法以及提前终止循环的一个方法技巧,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了详解用Webpack与Babel配置ES6开发环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
下面小编就为大家带来一篇使用JavaScript开发跨平台的桌面应用详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论