js中记录某个按钮的点击次数
2016-04-15 17:28
603 查看
近期项目中用到的一个功能如下图所示:
统计加号按钮的点击次数,然后根据点击次数生成端口行,点击减号删除该行,最后要获取内部和外部相对应端口号。代码如下:
<span style="font-size:12px;">/*统计加号的点击次数*/
var times = 1;
function countClickedTimes(){
// alert("当前点击次数:"+times);
times ++;
addPort(times);
}</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框的输入值。
统计加号按钮的点击次数,然后根据点击次数生成端口行,点击减号删除该行,最后要获取内部和外部相对应端口号。代码如下:
<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框的输入值。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- [转载]Activity中ConfigChanges属性的用法
- Android学习笔记(二九):嵌入浏览器
- android之定时器AlarmManager
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- android上改变listView的选中颜色
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 最后一次说说闭包
- Ajax
- HTML5调用摄像头实例
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)