简单实现购物车结算功能
2019-11-26 本文已影响0人
橙赎
一、效果
dangdang.gif
二、代码
这里重点介绍js部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/cartStyle.css">
<title>Document</title>
</head>
<body>
<div class="content">
<div class="logo">
<img src="image/dd_logo.jpg" alt=""><span>关闭</span>
</div>
<div class="cartList">
<ul>
<li>¥<input type="text" name="price" value="21.90"></li>
<li><input type="button" name="minus" value="-"><input type="text" name="amount" value="2"><input type="button" name="plus" value="+"></li>
<li id="price0">¥21.90</li>
<li>
<p>移入收藏</p>
<p>删除</p>
</li>
</ul>
<ul>
<li>¥<input type="text" name="price" value="24.00"></li>
<li><input type="button" name="minus" value="-"><input type="text" name="amount" value="3"><input type="button" name="plus" value="+"></li>
<li id="price1">¥24.00</li>
<li>
<p>移入收藏</p>
<p>删除</p>
</li>
</ul>
<ol>
<li id="totalPrice"> </li>
<li onclick="jiesuan()"><span>结 算</span></li>
</ol>
</div>
<p id="c1"></p>
</div>
<script>
function jiesuan() {
const show = document.getElementById("c1");
const elobj = document.getElementsByClassName("cartList")[0];
const price = elobj.firstElementChild.firstElementChild.firstElementChild.value;
const number = elobj.firstElementChild.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.value;
const totalPrice = parseFloat(price * number);
const price1 = elobj.firstElementChild.nextElementSibling.firstElementChild.firstElementChild.value;
const number1 = elobj.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.value;
const totalPrice1 = parseFloat(price1 * number1);
show.innerHTML = `白岩松 白说：${totalPrice}<br>
岛上书店：${totalPrice1}<br>
总价：${totalPrice+totalPrice1}<br>`;
}
</script>
</body>
</html>
三、用到的技术
1.首先会用到bom浏览器对象模型中的document对象来获取html对象元素。用tElement系列来获取：
- 用id来获取：
document.getElementById(); - 用class来获取：
document.getElementsByClassName(); - 标签名来获取：
document.getElementsByTagName(); - 用name来获取：
document.getElementsByName();
注意：除了id，其余取到的都是数组，如果要取当前html元素需在后面加document.getElementsByName()[0];
2.使用层次关系来访问。
-
parentNode：返回节点的父节点。 -
childNodes：返回子节点集合。 -
firstChild：返回节点的第一个子节点，最常用的是访问该元素的文本节点。 -
lastChild：返回节点的最后一个节点。 -
nextSibling：下一个节点。 -
firstElementChild：返回节点的第一个子节点，最常用的是访问该元素的元素节点。 -
lastElementChild：返回节点的最后一个元素节点。 -
nextElementChild：下一个元素节点。 -
previousElementChild：上一个元素节点。
四、需要完善的地方
在点击结算功能时，并没有用javascript来动态添加节点，而是直接显示在html中写死的一个p标签，下一次案例会详细介绍如何使用javascript来向html动态添加元素和内容。
