JS实现简单的点赞与踩功能示例
更新时间：2018年12月05日 09:39:21 作者：匿名的girl
这篇文章主要介绍了JS实现简单的点赞与踩功能,涉及javascript针对页面元素动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了JS实现简单的点赞与踩功能。分享给大家供大家参考，具体如下：
HTML部分：
赞:<button id="btn_zan">0</button> 踩:<button id="btn_cai">0</button>
JS部分：
function dianZan(){
var i = 0;
return function(){
this.innerHTML ="+"+ ++i;
}
}
btn_zan.onclick = dianZan();
function caiZan(){
var i = 0;
return function(){
this.innerHTML = --i;
}
}
btn_cai.onclick = caiZan();
感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun，测试上述代码运行效果。
或者使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试如下完整示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS点赞与踩</title>
</head>
<body>
赞:<button id="btn_zan">0</button>
踩:<button id="btn_cai">0</button>
<script>
function dianZan(){
var i = 0;
return function(){
this.innerHTML ="+"+ ++i;
}
}
btn_zan.onclick = dianZan();
function caiZan(){
var i = 0;
return function(){
this.innerHTML = --i;
}
}
btn_cai.onclick = caiZan();
</script>
</body>
</html>
运行效果如下图：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
在JavaScript中，判断两个对象是否相等有多种方法，取决于你对相等的定义以及对象属性的类型，本文将介绍几种常见的方法，感兴趣的同学可以参考阅读2023-05-05
这篇文章主要为大家介绍了javascript实现2016新年版日历的详细代码，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了JS+CSS实现Li列表隔行换色效果的方法,实例分析了js操作li节点的技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了通过实例解析javascript Date对象属性及方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
本文主要讲诉了使用js实现网站功能兼容IE6，非常的实用的小技巧，有需要的朋友可以参考下2014-09-09
Bootstrap每天必学之导航条，进一步向大家讲解了导航条养殖，以及导航条中元素的使用方法，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了JavaScript代码实现图片循环滚动效果的相关资料,非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要给大家介绍了uniapp开发App出现网络异常的解决方案,文中有相关的解决方法和步骤,具有一定的参考价值,需要的朋友可以参考下2023-09-09
本文为大家介绍下优化javascript的执行效率一些方法，个人感觉还不错，感兴趣的朋友可以了解下2013-12-12
这篇文章主要为大家详细介绍了如何使用JavaScript+CSS实现一个随机颜色生成器，文中的示例代码讲解详细，感兴趣的小伙伴可以动手尝试一下2022-08-08
最新评论