JavaScript实现点赞功能的示例
作者：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 点赞内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！