整体运行效果是这样的:
下面展示html部分的代码:
<!DOCTYPE html>
<html lang="zh-cn">
<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">
<title>华为购物车</title>
<link rel="stylesheet" href="css/cart.css">
</head>
<body>
<div class="float-box">
<div class="confirm-box">
<h4 class="confirm-title">
<span></span>
<i class="close-btn">
<span class="line-left"></span>
<span class="line-right"></span>
</i>
</h4>
<div class="confirm-content">
请选择您要删除的商品?
</div>
<div class="confirm-btn">
<a href="javascript:;" class="delete">删除</a>
<a href="javascript:;" class="cancel">取消</a>
</div>
</div>
</div>
<div class="header">
<div class="header-center">
</div>
</div>
<div class="mz-foot"></div>
<script src="js/jquery.min.js"></script>
<script src="js/cart.js"></script>
</body>
</html>
由于不能上传文件,只能上传到百度云供大家下载:
百度云下载链接:https://pan.baidu.com/s/1s6YIsF5sm3Ofoy3mYxaYUw
提取码:9fa6
该文件由三部分构成,如果要更改内容可用web编辑器打开cart.js,直接在里面更改就行了,可实现价格计算、删除商品,全选等功能。