JavaScript实现淘宝风格数量选择器
作者:青柠时间:2026-10-25 17:18:59浏览:313
本文介绍如何使用JavaScript实现类似淘宝的商品数量选择功能。通过监听“+”和“-”按钮点击事件,动态更新输入框数值,并设置最大限购9件、最小0件的边界限制。
JavaScript实现淘宝风格数量选择器
本文分享了一段使用JavaScript实现淘宝风格商品数量选择器的具体代码,供开发者参考。
该功能模拟了电商购物场景中的数量增减逻辑:用户点击“+”或“-”按钮时,输入框内的数值会相应增加或减少1。系统设定了数量范围,最大值限制为9件,最小值限制为0件。
具体实现代码如下:
<!DOCTYPE html>
<html>
<head>
<script LANGUAGE="JavaScript" type="text/javascript">
function addnum()
{
var num = document.getElementById("res").value;
num = parseInt(num) + 1;
if (num>9)
{
alert("已经是最大够件数!");
}
else
{
document.getElementById("res").value = num;
}
}
function decnum()
{
var num = document.getElementById("res").value;
num = parseInt(num) - 1;
if (num<0)
{
alert("已经是最小够件数!");
}
else
{
document.getElementById("res").value = num;
}
}
</script>
</head>
<body>
<form id="myform" >
<p>数量</p>
<input type="button" id="dec" value="-" onclick="decnum()">
<input type="text" value="0" id="res">
<input type="button" id="add" value="+" onclick="addnum()">
<p>限购9件</p>
</form>
</body>
</html>程序运行效果如下:
当尝试超过最大限购数量时,系统会提示“已经是最大够件数!”


当数量减少至0时,达到最小购买件数限制。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
