<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易购物车</title>
<style>
.inputs{
width:50px;
text-align: center;
}
</style>
</head>
<body>
<div>
你已购买的商品:女士衣服
</div>
<div>
单价：<span id="jiage">100.00</span>
</div>
<div>
数量为：
<input type="button" value="-" id="shuBtn1">
<input type="text" value="1" class="inputs" id="txt">
<input type="button" value="+" id="shuBtn">
</div>
<div>
总价为：<span id="total">100.00</span>
</div>
<script>
// 找标签
let shuBtn1 = document.getElementById("shuBtn1");
let shuBtn = document.getElementById("shuBtn");
let txt = document.getElementById("txt");
let total = document.getElementById("total");
// 事件处理函数
let jiaFun = function(event){
// 取出当前的值
let v = txt.value ; // 获取当前值，字符串
let res = Number(v) + 1;
txt.value = res ;
console.info( res );
total.innerText = txt.value*100;
document.body.appendChild(total);
};
// 添加事件监听
shuBtn.addEventListener("click", jiaFun );
let jianFun = function(event){
// 取出当前的值
let v = txt.value ; // 获取当前值，字符串//
if(v<=1){//数量不能为负数
v=2;
}
let jian=Number(v)-1;
txt.value=jian;
console.info( jian );
total.innerText = txt.value*100;
document.body.appendChild(total);
};
// 添加事件监听
shuBtn1.addEventListener("click", jianFun );
</script>
</body>
</html>
7868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
