地址：广州市增城区中新镇慈岭村埔咀路20号
邮箱：sales@gzdairan.cn
新闻中心 News 分类>>
JavaScript实现点赞功能的示例
2026-01-16 17:00:45
浏览次数： 次
返回列表目录
- 一、功能实现
- 二、主要知识点
- 1、var关键字
- 2、变量的自增自减
- 三、代码实现
- 四、效果图
一、功能实现
有两个按钮，分别是点赞和踩。点击点赞按钮的时候，点赞的数量会+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>
四、效果图
未点击前：
点击后：
