JavaScript实现点赞效果

最新推荐文章于 2024-04-28 11:08:40 发布

晨读秀秀

最新推荐文章于 2024-04-28 11:08:40 发布

阅读量9.7k

点赞数 11

分类专栏： js小实例练习文章标签： javascript js

本文链接：https://blog.csdn.net/vayulu/article/details/80290957

版权

js小实例练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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].οnclick=getvalue();
			}
		</script>

晨读秀秀

关注

11
点赞
踩
20

收藏

觉得还不错? 一键收藏
5
评论
JavaScript实现点赞效果

1：通过自定义封装函数来获取标签元素；2：创建闭包来实现数据缓冲的效果3：循环遍历按钮，设置点击事件本文重点：了解闭包的作用，通过闭包可以实现数据的缓冲，即外层函数与里层函数之间的语句在调用外层函数时只会执行一次示例代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;titl...
复制链接

扫一扫