我是靠谱客的博主 悲凉洋葱,最近开发中收集的这篇文章主要介绍js中记录某个按钮的点击次数,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

近期项目中用到的一个功能如下图所示:

统计加号按钮的点击次数,然后根据点击次数生成端口行,点击减号删除该行,最后要获取内部和外部相对应端口号。代码如下:

<span style="font-size:12px;">/*统计加号的点击次数*/
var times = 1;
function countClickedTimes(){
//	alert("当前点击次数:"+times);
times ++;
addPort(times);
}</span>
<span style="font-size:12px;">/*增加端口*/
function addPort(times){
$('#port').append('<div class="item" id="add_port_'+ times +'"
style="white-space: nowrap;">'+
'<input type="text" id="inner_port_'+ times +'" name="inner_port_add" placeholder="内部端口" style="width: 31%;border: 1px solid #ccc;height: 30px;margin-left: 16px">'+
'<input type="text" id="out_port_'+ times +'" name="out_port_add" placeholder="对外暴露端口" style="width: 31%;border: 1px solid #ccc;height: 30px;margin-left: 31px;">'+
'<input type="button" id="delete_port_'+ times +'" name="delete_port"
value="-" οnclick="deletePort('+times+');" style="width: 19%;border: 1px solid #ccc;height: 30px;margin-left: 33px;">'+
'</div>');
}</span>
获取端口号

<span style="font-size:12px;">/*端口相关*/
var conPort = "";
var objInner = [];
var objOut = [];
var inner_out ;
objInner = document.getElementsByName('inner_port_add');
objOut = document.getElementsByName('out_port_add');
for(var i=0;i<objInner.length;i++){
var innerPort = objInner[i];
var outPort = objOut[i];
if(i == objInner.length-1){
inner_out = innerPort.value+"#"+outPort.value;
}else{
inner_out = innerPort.value+"#"+outPort.value+",";
}
conPort += inner_out;
}
/*端口相关*/</span>
html中name可以同时标记多个元素,在获取端口号时通过name来获取name名相同的内容,返回的是一个对象的集合,元素数组。outPort.value获取到input框的输入值。




最后

以上就是悲凉洋葱为你收集整理的js中记录某个按钮的点击次数的全部内容,希望文章能够帮你解决js中记录某个按钮的点击次数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(41)

评论列表共有 0 条评论

立即
投稿
返回
顶部