商品价格计算方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
user-select: none
}
body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
ol,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
}
#goods {
width: 600px;
margin: 100px auto;
border-collapse: collapse;
}
#goods th {
height: 30px;
}
#goods td {
height: 100px;
text-align: center;
}
#goods td span#sub,
#goods td span#add {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
background-color: #f3f3f3;
color: #666;
}
#goods td span#number {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<table id='goods' border="1">
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr>
<td>漂亮发卡</td>
<td>20</td>
<td>
<span id="sub">-</span>
<span id="number">0</span>
<span id="add">+</span>
</td>
<td id="zongjia">0</td>
</tr>
</table>
<script>
//只要碰到在页面基础上频繁操作页面数据的就要想到信号量
//1、获取元素
let oAdd = document.getElementById('add');
let oSub = document.getElementById('sub');
let oNum = document.getElementById('number')
let oZj = document.getElementById('zongjia')
//2、定义信号量
let num = 0;//信号量 信号量变number的值就跟着变
let price = 20;//单价是固定的所以直接定义个信号量就行
//绑定事件
oAdd.onclick = function () { //点击+号事件
// console.log(+oNum.innerHTML);//number的值转为数字形式
// let num =+oNum.innerHTML; //更简单的方法：点击事件外定义一个信号量等于初始值的num 省去获取值的麻烦
num++;
oNum.innerHTML = num;
oZj.innerHTML = num * price;//总价
}
oSub.onclick = function () {
num--;
if (num < 0) { // 也可三目num = num>0 ? num--:num 数量不能小于0
num = 0;
return //num<0 就没有必要给页面赋值了，每次给页面重新赋值都会重新渲染页面
}
oNum.innerHTML = num; //给页面赋值
oZj.innerHTML = num * price;//总价
}
</script>
</body>
</html>
商品价格计算优化写法（抽离共用代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
user-select: none
}
body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
ol,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
}
#goods {
width: 600px;
margin: 100px auto;
border-collapse: collapse;
}
#goods th {
height: 30px;
}
#goods td {
height: 100px;
text-align: center;
}
#goods td span#sub,
#goods td span#add {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
background-color: #f3f3f3;
color: #666;
}
#goods td span#number {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<table id='goods' border="1">
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr>
<td>漂亮发卡</td>
<td>20</td>
<td>
<span id="sub">-</span>
<span id="number">0</span>
<span id="add">+</span>
</td>
<td id="zongjia">0</td>
</tr>
</table>
<script>
//只要碰到在页面基础上频繁操作页面数据的就要想到信号量
//1、获取元素
let oAdd = document.getElementById('add');
let oSub = document.getElementById('sub');
let oNum = document.getElementById('number')
let oZj = document.getElementById('zongjia')
//2、定义信号量
let num = 0;
let price = 20;
//绑定事件
oAdd.onclick = function () {
change(true) //加就是true
}
oSub.onclick = function () {
change(false) //减就是false
}
function change(bol) { //抽离出来的增和减总价共用代码
bol ? num++ : num--
if (num < 0) {
num = 0;
return
}
oNum.innerHTML = num;
oZj.innerHTML = num * price;
}
</script>
</body>
</html>
网友评论