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

html-css06

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

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

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

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

<span>5</span>

<button onclick="fun(1)">+</button>

<button onclick="fun(-1)">-</button>

再输入js代码：

function fun(a) {

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

}

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

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

附加代码如下，你试试

<input id="min" name="" type="button" value="-" />

<input id="text_box" name="goodnum" type="text" value="${item.value.quantity }" style="width:25px" />

<input id="add" name="" type="button" value="+" /></td>

<script>

$(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>