JavaScript：模拟简易淘宝商城商品价格的计算
JavaScript：模拟简易淘宝商城商品价格的计算
我是一名在校大学生，初次写博客，希望各位大佬不喜勿喷，这个小程序，仅供参考，希望对大家有所帮助。
效果展示：
分析过程：
- 使用
<marquee></marquee>标签，是Welcome to TaoBao滚动效果的实现标，类似于跑马灯，从右向左。 - 定义5个
<input>标签，其中2个text，3个button。 - 初始默认有1件商品，当用户点击添加按钮，当前数量+1，当前总价+28。当用户点击删除按钮，当前数量-1，当前总价-28，点击清零按钮时，当前数量=0，当前总价=0。但是设置了一个条件，当前数量最多不大于9，最少不小于0，如果超出范围，则自动执行清零按钮。
- 使用
document.表单名.ID号.value获取文本框的值，将操作结果显示在对应文本框里。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>淘宝</title>
<meta charset="utf-8">
<script type="text/javascript">
var x=1;
var y=28;
function jia(i)
{
if(x<9)
{
x=x+1;
y=y+28;
}
else
alert("当前数量超过9件!");
document.taobao.nb1.value=x;
document.taobao.nb2.value=y;
}
function jian(i)
{
if(x>0)
{
x=x-1;
y=y-28;
}
else
alert("当前数量小于0件!");
document.taobao.nb1.value=x;
document.taobao.nb2.value=y;
}
function qingling()
{
x=0;
y=0;
document.taobao.nb1.value=x;
document.taobao.nb2.value=y;
}
</script>
</head>
<body bgcolor="#23c4ba">
<marquee><h1>Welcome to TaoBao</h1></marquee>
<form name="taobao" action="NULL" method="post" align="center">
<h3>商品单价： 28￥</h3><br>
数量选择：
<input type="button" value="+" onclick="jia(x)">
<input type="button" value="-" onclick="jian(x)">
<h3>当前数量： <input type="text" name="nb1" value="1"></h3>
<h3>当前总价： <input type="text" name="nb2" value="28"></h3>
<input type="button" value="清零" onclick="qingling(2)">
</form>
</body>
</html>