【练习2:Regexp对象的应用】 运用正则表达式对象,实现如下所示的购物车购买数量动态改变的效果,步骤如下。代码文件名为:lab08_2.html。 (1)在页面内,编写numcheck ()函数,通过正则表达式验证数量是否为正数、整数; (2)在页面内,编写addBuynum()函数实现数量增加; (3)在页面内,编写reduceBuynum ()函数实现数量减少; (4)在页面内,点击“+”图片,调用addBuynum()函数,实现数量增加,点击“-”图片,调用reduceBuynum()函数,实现数量减少。
时间: 2023-06-24 17:03:36 浏览: 109
lab08_2.html代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车数量动态改变</title>
<style>
img {
cursor: pointer;
}
</style>
<script>
function numcheck(num) {
var reg = /^[1-9]\d*$/;
if (!reg.test(num)) {
alert("请输入正整数!");
return false;
}
return true;
}
function addBuynum() {
var num = document.getElementById("buynum").value;
if (numcheck(num)) {
num = parseInt(num) + 1;
document.getElementById("buynum").value = num;
}
}
function reduceBuynum() {
var num = document.getElementById("buynum").value;
if (numcheck(num)) {
if (num > 1) {
num = parseInt(num) - 1;
document.getElementById("buynum").value = num;
} else {
alert("数量不能小于1!");
}
}
}
</script>
</head>
<body>
<h2>购物车数量动态改变</h2>
<input type="text" id="buynum" value="1" />
<img src="plus.png" onclick="addBuynum()" />
<img src="minus.png" onclick="reduceBuynum()" />
</body>
</html>
```
其中,使用了正则表达式对象的test方法,判断输入的数量是否为正整数。在addBuynum和reduceBuynum函数中,先调用numcheck函数进行验证,如果验证通过则进行数量的增加或减少。