牛骨文教育服务平台(让学习变的简单)
博文笔记

js中记录某个按钮的点击次数

创建时间:2016-04-15 投稿人: 浏览次数:7836

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

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

<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="-" onclick="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框的输入值。




声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。