js中点击按钮时自动增加一行

JavaScript04

js中点击按钮时自动增加一行,第1张

1、新建一个html文件,命名为test.html。

2、在test.html文件里,创建一个button按钮,并设置其id属性为dz,用于下面获得按钮对象,实现js点击按钮事件。

3、给button绑定点击事件,当按钮被点击时,执行hs()函数。

4、在test.html文件的js标签内,定义hs()函数,在函数内使用alert() 方法弹出"我被点击了"的内容。

5、在js内,使用window对象中的onload事件,当网页加载完时,执行function函数。

6、在function函数内,通过getElementById()方法获得按钮对象,使用click()方法点击按钮。

7、在浏览器打开test.html文件,当打开网页时,js自动执行点击事件。

用jquery吧,给每个新增的文本框加一个class,比如J_item

然后计算的时候只要

var sum=0

$(".J_item").each(function(sum+=$(this).val()))

alert(sum)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="js/jquery-3.2.0.min.js"></script>

</head>

<body>

<p>初始值是0,点击按钮让其增加到10然后停止</p>

<span>0</span>

<button>开始</button>

<script>

$(function(){

$("button").click(function(event) {

var num = 0

// 调用计时函数

var t = setTimeout(timedCount(num),1000)

$("button").attr('disabled','disabled')

})

// 循环计时函数, 多次调用自身函数, num为被传递的参数

function timedCount(num){

num++

$("span").text(num)

// 设置条件使停止计时

if (num<10) {

var t = setTimeout(function(){timedCount(num)},1000)

}

}

})

</script>

</body>

</html>