html动态点击按钮加1减1如何实现_随笔

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<body>标签中，输入html代码：

再输入js代码：

function fun(a) {

$('span').text(parseInt($('span').text()) + a)

}

3、浏览器运行index.html页面，此时点击加号按钮会增加span文本的数值，点击减号按钮会减少span文本的数值。

加号和减号其实是一个触发按钮事件，写一个加function点加号的时候获取输入框中的值+1，写一个减function点减号的时候获取输入框中的值-1。

附加代码如下，你试试

$(function(){

var t = $("#text_box")

$("#add").click(function(){

t.val(parseInt(t.val())+1)

setTotal()

})

$("#min").click(function(){

t.val(parseInt(t.val())-1)

setTotal()

})

function setTotal(){

var tt = $("#text_box").val()

var pbinfoid=$("#pbinfoid").val()

if(tt<=0){

alert('输入的值错误！')

t.val(parseInt(t.val())+1)

}else{

window.location.href = "shopping!updateMyCart.action?pbinfoid="+pbinfoid+"&number="+tt

}

})

</script>

下面讲解html5如何设定input对所输入的数字限定。

1、首先新建一个html网页文件，把他命名为test.html，接下来用test.html文件来讲解html5如何设定input对所输入的数字限定。

2、在test.html文件内，需要创建一个表单<form action="" method="get"></form>。

3、给在表单内，加入一个Input，类型为number。<input type="number" name="test" min="1" max="10" />，意思是最小是1，最大是10。

4、最后在浏览器浏览一下test.html，来看看效果能否实现。需要用鼠标点中表单Submit按钮，就完成了。

欢迎分享，转载请注明来源：内存溢出

html动态点击按钮加1减1如何实现