javasrtipt 打开页面,点赞数量均为0,如图 2.10 所示,当单击某个点赞按钮调用函数时,实现每单击一次点赞按钮,点赞按钮上的数字加 1,如图 2.11 所示。要求此功能必须使用闭包的方式实现
时间: 2023-08-04 20:08:11 浏览: 75
以下是一个使用闭包实现点赞功能的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点赞示例</title>
</head>
<body>
<button id="like-btn">点赞</button>
<span id="like-count">0</span>
<script>
// 使用闭包实现点赞功能
function createLikeHandler() {
let count = 0; // 点赞数量初始值为 0
return function () {
count++;
document.getElementById('like-count').textContent = count;
};
}
const likeHandler = createLikeHandler();
document.getElementById('like-btn').addEventListener('click', likeHandler);
</script>
</body>
</html>
```
在这个示例中,我们定义了一个 `createLikeHandler` 函数来创建一个点赞处理函数。`createLikeHandler` 函数返回一个闭包,该闭包包含了一个 `count` 变量和一个内部函数,内部函数用于更新点赞数量并更新页面上的点赞数量显示。
然后我们调用 `createLikeHandler` 函数来创建一个点赞处理函数,并将其绑定到页面的点赞按钮上。每次单击点赞按钮时,点赞处理函数都会被调用,这样就能实现点赞数量加 1 的功能。