网络编程

JS实现购物车特效
网络编程 2025/10/27 佚名
3 2

效果：

1.点击全选按钮可以全选，再点击就全不选

2.点击数量 ‘ + ' ‘ -  ' 可以自动计算。并且合计保持更新。当数量大于1时‘ - '出现。小于等于1时‘ - '消失

3.点击删除可以实现删除功能。

4.点击全选旁的删除按钮可以全部删除。

5.选好商品后点击已选商品，可以显示选中的商品

6.选中的商品可以取消选择。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>购物车</title>
</head>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}
a {
 color: #666;
 text-decoration: none;
}
body {
 padding: 20px;
 color: #666;
}
.fl{
 float: left;
}
.fr {
 float: right;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
 border: 0;
 text-align: center;
 width: 937px;
}
th, td {
 border: 1px solid #CADEFF;
}
th {
 background: #e2f2ff;
 border-top: 3px solid #a7cbff;
 height: 30px;
}
td {
 padding: 10px;
 color: #444;
}
tbody tr:hover {
 background: RGB(238,246,255);
}
.checkbox {
 width: 60px;
}
.goods {
 width: 300px;
}
.goods span {
 width: 180px;
 margin-top: 20px;
 text-align: left;
 float: left;
}
.price {
 width: 130px;
}
.count {
 width: 90px;
}
.count .add, .count input, .count .reduce {
 float: left;
 margin-right: -1px;
 position: relative;
 z-index: 0;
}
.count .add, .count .reduce {
 height: 23px;
 width: 17px;
 border: 1px solid #e5e5e5;
 background: #f0f0f0;
 text-align: center;
 line-height: 23px;
 color: #444;
}
.count .add:hover, .count .reduce:hover {
 color: #f50;
 z-index: 3;
 border-color: #f60;
 cursor: pointer;
}
.count input {
 width: 50px;
 height: 15px;
 line-height: 15px;
 border: 1px solid #aaa;
 color: #343434;
 text-align: center;
 padding: 4px 0;
 background-color: #fff;
 z-index: 2;
}
.subtotal {
 width: 150px;
 color: red;
 font-weight: bold;
}
.operation {
 width: 80px;
}
.operation span:hover, a:hover {
 cursor: pointer;
 color: red;
 text-decoration: underline;
}
img {
 width: 100px;
 height: 80px;
 /*border: 1px solid #ccc;*/
 margin-right: 10px;
 float: left;
}

.foot {
 width: 935px;
 margin-top: 10px;
 color: #666;
 height: 48px;
 border: 1px solid #c8c8c8;
 background-color: #eaeaea;
 background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
 position: relative;
 z-index: 8;
}
.foot div, .foot a {
 line-height: 48px;
 height: 48px;
}
.foot .select-all {
 width: 100px;
 height: 48px;
 line-height: 48px;
 padding-left: 5px;
 color: #666;
}
.foot .closing {
 border-left: 1px solid #c8c8c8;
 width: 100px;
 text-align: center;
 color: #000;
 font-weight: bold;
 background: RGB(238,238,238);
 cursor: pointer;
}
.foot .total{
 margin: 0 20px;
 cursor: pointer;
}
.foot #priceTotal, .foot #selectedTotal {
 color: red;
 font-family: "Microsoft Yahei";
 font-weight: bold;
}
.foot .selected {
 cursor: pointer;
}
.foot .selected .arrow {
 position: relative;
 top:-3px;
 margin-left: 3px;
}
.foot .selected .down {
 position: relative;
 top:3px;
 display: none;
}
 .show .selected .down {
 display: inline;
}
 .show .selected .up {
 display: none;
}
.foot .selected:hover .arrow {
 color: red;
}
.foot .selected-view {
 width: 935px;
 border: 1px solid #c8c8c8;
 position: absolute;
 height: auto;
 background: #ffffff;
 z-index: 9;
 bottom: 48px;
 left: -1px;
 display:none;
}
.show .selected-view {
 display: block;
}
.foot .selected-view div{
 height: auto;
}
.foot .selected-view .arrow {
 font-size: 16px;
 line-height: 100%;
 color:#c8c8c8;
 position: absolute;
 right: 330px;
 bottom: -9px;
}
.foot .selected-view .arrow span {
 color: #ffffff;
 position: absolute;
 left: 0px;
 bottom: 1px;
}
#selectedViewList {
 padding: 20px;
 margin-bottom: -20px;
}
#selectedViewList div{
 display: inline-block;
 position: relative;
 width: 100px;
 height: 80px;
 border: 1px solid #ccc;
 margin: 10px;
}
#selectedViewList div span {
 display: none;
 color: #ffffff;
 font-size: 12px;
 position: absolute;
 top: 0px;
 right: 0px;
 width: 60px;
 height: 18px;
 line-height: 18px;
 text-align: center;
 background: RGBA(0,0,0,.5);
 cursor: pointer;
}
#selectedViewList div:hover span {
 display: block;
}
</style>
<body>
<table id="cartTable">
 <thead>
  <tr>
   <th><label><input class="check-all check" type="checkbox"/>&nbsp;全选</label></th>
   <th>商品</th>
   <th>单价</th>
   <th>数量</th>
   <th>小计</th>
   <th>操作</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
   <td class="goods"><img src="/UploadFiles/2021-04-02/075704loo2mdzuux5123gu.jpg.editor.jpg">


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
标签：
js实现购物车,js购物车特效
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“JS实现购物车特效”

暂无“JS实现购物车特效”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com