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>
阅读更多
相关文章推荐
- JavaScript实现无操作后屏保效果
- Javascript实现打字效果
- 原生javascript实现图片放大镜效果
- 用JavaScript实现页面百叶窗效果
- JavaScript实现城市选择控件的效果
- 基于JavaScript实现窗口拖动效果
- JavaScript 实现的颠倒的效果
- 原生javascript 实现jQuery代码效果对比
- Javascript--如何实现水印效果
- php+jQuery+Ajax实现点赞效果的方法(附源码下载)
- JavaScript实现评论点赞功能
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- 用javascript怎样实现图片模糊效果
- javascript实现的textarea运行框效果代码 不用指定id批量指定
- 原生javascript实现的一个简单动画效果
- 用JavaScript实现仿Windows关机效果
- 使用javascript实现图片上下切换效果并且实现顺序循环播放
- SurfaceView实现点赞效果
- JavaScript实现图片的渐变效果
- Javascript 实现DIV透明度渐变、移动放大等效果