您的位置：首页 > Web前端 > JavaScript

JavaScript实现点赞效果

2018-05-12 13:58 218 查看

1：通过自定义封装函数来获取标签元素；

2：创建闭包来实现数据缓冲的效果

3：循环遍历按钮，设置点击事件

本文重点：了解闭包的作用，通过闭包可以实现数据的缓冲，即外层函数与里层函数之间的语句在调用外层函数时只会执行一次

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闭包实现点赞功能</title>
</head>
<body>
<div class="wrap">
<ul>
<li><img src="../img/banner/1.png" ><br/><input type="button"value="赞(1)"/></li>
<li><img src="../img/banner/2.png" ><br/><input type="button"value="赞(1)"/></li>
<li><img src="../img/banner/3.png" ><br/><input type="button"value="赞(1)"/></li>
<li><img src="../img/banner/4.png" ><br/><input type="button"value="赞(1)"/></li>
</ul>
</div>
</body>
</html>
<style>
.wrap{
width: 1000px;
height: 600px;
border: 1px solid #F1F1F1;
margin: 50px auto;
}
ul{
list-style-type: none;
}
ul li{
float: left;
margin-left:20px ;
}
li img{
width: 200px;
height: 250px;
}
</style>

<script>
//封装一个通过标签名获取元素的函数
function tagName$(name){
return document.getElementsByTagName(name);
}
//通过闭包的方式获取数据，并缓存
//通过闭包，外层函数与内层函数之间的语句只会执行一次
function getvalue(){
var value=2;
return function(){
this.value="赞("+(value++)+")";
}
}
//循环遍历获取按钮
var button=tagName$("input");
for (var i=0;i<button.length;i++) {
button[i].onclick=getvalue();
}
</script>


阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航