<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style type="text/css">
* {
font-size: 14px;
font-family: "微软雅黑";
vertical-align: middle;
margin: 0;
padding: 0;
}
img {
width: 160px;
height: 120px;
}
/*span{display: inline-block;}*/
.imfor_top div {
height: 40px;
background-color: deepskyblue;
font-weight: bold;
}
.imfor div {
height: 140px;
line-height: 120px;
}
.imfor:hover {
background: RGB(238, 246, 255);
}
.check,
.check_top {
width: 70px;
}
.pudc,
.pudc_top {
width: 400px;
}
.pices,
.pices_top {
width: 60px;
}
.totle {
color: red;
}
.num,
.num_top {
width: 90px;
}
.num input {
width: 40px;
}
.num span {
height: 23px;
width: 17px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
cursor: pointer;
}
.totle,
.totle_top {
width: 60px;
}
.del,
.del_top {
width: 60px;
cursor: pointer;
}
.imfor_top div,
.imfor div {
float: left;
border: 1px solid deepskyblue;
text-align: center;
}
.imfor_top,
.imfor {
width: 800px;
}
.foot {
float: inherit;
}
#box,
#content_box {
width: 800px;
margin: 0 auto;
}
.foot_add,
.foot_del {
float: left;
cursor: pointer;
margin-left: 10px;
margin-top: 14px;
}
.foot {
width: 800px;
background-color: #eaeaea;
}
.foot_tol,
.foot_cash {
float: right;
cursor: pointer;
width: 80px;
margin-top: 14px;
margin-left: 100px;
}
#susum {
color: red;
}
</style>
</head>
<body>
<h3>购物车</h3>
<div id="box">
<div id="content_box">
<div class="imfor_top">
<div class="check_top">
<input type="checkbox" id="all" />全选
</div>
<div class="pudc_top">商品</div>
<div class="pices_top">单价</div>
<div class="num_top">数量</div>
<div class="totle_top">小计</div>
<div class="del_top">操作</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="images/1.jpg" />Casio/卡西欧 EX-TR350</span>
</div>
<div class="pices">5999.8</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">5999.8</div>
<div class="del">删除</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="images/2.jpg" /><span>Canon/佳能 PowerShot SX50 HS</span></div>
<div class="pices"> 3888.5</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">3888.5</div>
<div class="del">删除</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="images/3.jpg" /><span>Sony/索尼 DSC-WX300</span></div>
<div class="pices">1428.5</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">1428.5</div>
<div class="del">删除</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="images/4.jpg" /><span>Fujifilm/富士 instax mini 25</span></div>
<div class="pices">640.6</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">640.6</div>
<div class="del">删除</div>
</div>
</div>
<div class="foot">
<div class="foot_tol"><span>合计：￥</span><span id="susum">0</span></div>
</div>
</div>
<script>
var all = document.getElementById('all');
//获取所有的商品记录
function getProducts() {
return document.getElementsByClassName('imfor');
}
//获取所有的商品勾选按钮
function getChecks() {
return document.getElementsByClassName('Each');
}
//获取所有的减号按钮
function getReducs() {
return document.getElementsByClassName('reduc');
}
//获取所有的加号按钮
function getAdds() {
return document.getElementsByClassName('add');
}
//获取所有的删除按钮
function getDels() {
return document.getElementsByClassName('del');
}
//----------------------------------------------------------------
//获取商品勾选状态个数，status的值为true|false,true为勾选状态，false为未勾选状态
function getChecksNum(status) {
var allChecks = getChecks();
var num = 0;
for (var i = 0; i < allChecks.length; i++) {
if (allChecks[i].checked == status) {
num++;
}
}
return num;
}
//获取所有已勾选的商品总价
function getTotalPrice() {
var products = getProducts();
var totalPrice = 0;
for (var i = 0; i < products.length; i++) {
var check = products[i].children[0].children[0].checked; //获取当前商品的勾选状态
var price = parseFloat(products[i].children[4].innerHTML); //获取当前商品的价格
if (check) {
totalPrice += price;
}
}
return totalPrice;
}
//更新总价
function updateTotalPrice() {
var totalPrice = getTotalPrice();
document.getElementById('susum').innerHTML = totalPrice;
}
//全选/全不选
all.addEventListener('click', function() {
//获取所有的商品勾选按钮
《JavaScript高级应用》复习试题.rar
需积分: 0 124 浏览量
2022-12-12
14:42:29
上传
评论
收藏 1.95MB RAR 举报
《JavaScript高级应用》复习试题.rar （80个子文件） 
《JavaScript高级应用》复习试题 11Tab切换 css 
taskStyle.css 2KB
taskList.html 2KB images 
task02.png 12KB task01.png 11KB day02.png 9KB day03.png 11KB day01.png 11KB js jquery-1.12.4.js 297KB task.js 717B 07实现手风琴下拉菜单效果.html 3KB images 
01.jpg 26KB 2.jpg 20KB 1.jpg 14KB 04.jpg 28KB 3.jpg 33KB arrow-down.png 2KB 4.jpg 21KB arrow-right.png 3KB bg.jpg 93KB lily.jpg 30KB 03.jpg 41KB xnkl.png 45KB sunflower.jpg 28KB 02.jpg 81KB 03鼠标经过改变属性.html 1KB 新年快乐效果图.jpg 514KB 02实时显示当前系统日期时间.html 952B 12给图片添加边框 images clock.jpg 35KB jj.html 2KB index.html 584B js jquery-1.12.4.js 297KB 16制作今日团购模块 css shopping.css 839B images bt2.jpg 4KB pic3.jpg 15KB pic1.jpg 21KB pic2.jpg 19KB bt3.jpg 5KB bt1.jpg 5KB top.jpg 7KB index.html 1KB js jquery-1.12.4.js 297KB 05注册表单验证.html 7KB 13基本过滤选择器使用 css games.css 307B js jquery-1.12.4.js 297KB gamesList.html 2KB 01对象的创建和调用.html 702B 17制作课工场论坛发贴 css bbs.css 1KB images tou01.jpg 4KB tou02.jpg 4KB tou03.jpg 5KB tou04.jpg 5KB bbsList.html 849B js bbs.js 2KB 18制作轮播切换效果 css style.css 966B images 2.jpg 40KB 1.jpg 65KB 3.jpg 50KB js carousel.js 1KB jquery-1.12.4.js 297KB adver.html 485B 15制作隔行变色的商品列表 css product.css 321B images f4.jpg 10KB f1.jpg 12KB f3.jpg 6KB f2.jpg 9KB js jquery-1.12.4.js 297KB product.html 2KB 04购物车.html 11KB 19左移与右移 index.html 2KB js jquery-1.12.4.js 297KB 10选择你喜欢的花.html 1KB 08实现页面动画效果.html 3KB 06斑马纹表格效果.html 3KB 09商品轮播图效果.html 2KB 14使用正则表达式验证博客园注册页面 css register.css 795B images register.jpg 2KB banner.jpg 18KB logo.jpg 20KB js jquery-1.12.4.js 297KB register.html 3KB资源评论
