购物车
1. 全选按钮
1.1 将所有的单选按钮和全选按钮保持一致， 并且所有的全选按钮也保持一致
1.2 将总件数变成单选按钮的个数
1.3 计算总计
2. 单选按钮功能：
2.1 判断单选按钮的选中个数，控制全选按钮是否被选中
2.2 需要计算当前的合计，以及选中的件数数
3. 加号按钮功能的实现
4. 减法按钮功能的实现
5. 删除功能
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="catbox">
<table id="cartTable">
<thead>
<tr>
<th><label>
<input class="check-all check" type="checkbox"/> 全选</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="../images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="../images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
<td class="price">3888.50</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">3888.50</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="../images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
<td class="price">1428.50</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">1428.50</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="../images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
<td class="price">640.60</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">640.60</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
</tbody>
</table>
<div class="foot" id="foot">
<label class="fl select-all"><input type="checkbox" class="check-all check"/> 全选</label>
<a class="fl delete" id="deleteAll" >删除</a>
<div class="fr closing" >结 算</div>
<input type="hidden" id="cartTotalPrice" />
<div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
<div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
<div class="selected-view">
<div id="selectedViewList" class="clearfix">
<div><img src="images/1.jpg"><span>取消选择</span></div>
</div>
<span class="arrow">◆<span>◆</span></span> </div>
</div>
</div>
<script>
//1.全选按钮
//1.1将所有的单选按钮和全选按钮保持一致， 并且所有的全选按钮也保持一致
//1.2将总件数变成单选按钮的个数
//1.3计算总计
window.onload=function(){
//找到当前页面上所有的全选按钮
var checkAlls=document.getElementsByClassName('check-all');
//找到当前页面上所有的单选按钮
var checkOnes=document.getElementsByClassName('check-one');
//找到当前页面上放置总件数的标签(sapn)
var selectedTotal=document.getElementById('selectedTotal');
//找到当前页面上放置 每行 小计 的标签
var subtotal=document.getElementsByClassName('subtotal');
//找到当前页面中放置 合计 的标签
var priceTotal=document.getElementById('priceTotal');
for(var n=0;n<checkAlls.length;n++){
checkAlls[n].onchange=function(){
//让所有的单选按钮保持一致
for(var j=0;j<checkOnes.length;j++){
checkOnes[j].checked=this.checked;
}
//让所有的全选按钮保持一致
for(var j=0;j<checkAlls.length;j++){
checkAlls[j].checked=this.checked;
}
//根据全选是否选中来判断件数是多少， 如果选中了，件数=单选按钮的个数，如果没有选中，件数=0；
if (this.checked==true) {
selectedTotal.innerHTML=checkOnes.length;
//计算总计， 1.先找到每一行的小计 2.加和到一起
var sum=0;
for(var n=0;n<subtotal.length;n++){
sum=sum+parseFloat(subtotal[n].innerHTML);
}
priceTotal.innerHTML=sum.toFixed(2);
}else{
selectedTotal.innerHTML=0;
priceTotal.innerHTML=0;
}
}
}
//单选按钮功能：
//1. 判断单选按钮的选中个数，控制全选按钮是否被选中
//2. 需要计算当前的合计，以及选中的件数数
for(var n=0;n<checkOnes.length;n++){
checkOnes[n].onchange=function(){
var sum=0;//用来放置选中单选按钮的个数
var total=0;//用来放置合计
for(var j=0;j<checkOnes.length;j++){
if (checkOnes[j].checked==true) {
sum++;
total=total+parseFloat(subtotal[j].innerHTML);
}
}
//根据单选按钮选中的个数，判断全选按钮是否需要被选中
if (sum==checkOnes.length) {
for(var n=0;n<checkAlls.length;n++){
checkAlls[n].checked=true;
}
}else{
for(var n=0;n<checkAlls.length;n++){
checkAlls[n].checked=false;
}
}
selectedTotal.innerHTML=sum;
priceTotal.innerHTML=total.toFixed(2);
}
}
//加号按钮功能的实现
//找到所有的加法按钮
var adds=document.getElementsByClassName("add");
//找到所有的input框
var countInputs=document.getElementsByClassName('count-input');
//找到所有的单价按钮
var prices=document.getElementsByClassName('price');
for(var n=0;n<adds.length;n++){
adds[n].index=n;
adds[n].onclick=function(){
//拿到所对应的input框的数量
//console.log(this.index)
var num=countInputs[this.index].value;
num++;
countInputs[this.index].value=num;
//找到对应的单价
var price=prices[this.index].innerHTML;
//console.log(price)
var sum=price*num;
subtotal[this.index].innerHTML=sum.toFixed(2);
//如果它对应的合计checked=true,则合计也要发生变化
if (checkOnes[this.index]) {
var total=0;
for(var j=0;j<checkOnes.length;j++){
if (checkOnes[j].checked) {
total+=parseFloat(subtotal[j].innerHTML)
}
}
priceTotal.innerHTML=total.toFixed(2);
}
}
}
//减法按钮功能的实现
var reduces=document.getElementsByClassName('reduce');
for(var n=0;n<reduces.length;n++){
reduces[n].index=n;
reduces[n].onclick=function(){
var num=countInputs[this.index].value;
if (num>1) {
num--;
}else{
alert("亲，不能再减了");
}
countInputs[this.index].value=num;
var price=prices[this.index].innerHTML;
var sum=price*num;
subtotal[this.index].innerHTML=sum.toFixed(2);
if (checkOnes[this.index]) {
var total=0;
for(var j=0;j<checkOnes.length;j++){
if (checkOnes[j].checked) {
total+=parseFloat(subtotal[j].innerHTML)
}
}
priceTotal.innerHTML=total.toFixed(2);
}
}
}
//删除功能
var deletes=document.getElementsByClassName('delete');
for(var n=0;n<deletes.length;n++){
deletes[n].onclick=function(){
var tr=this.parentNode.parentNode;
var table=tr.parentNode;
table.removeChild(tr);
var total=0;
var sum=0;
for(var j=0;j<checkOnes.length;j++){
if (checkOnes[j].checked) {
sum++;
total+=parseFloat(subtotal[j].innerHTML);
}
}
for(var n=0;n<adds.length;n++){
adds[n].index=n;
}
priceTotal.innerHTML=total.toFixed(2);
selectedTotal.innerHTML=sum;
}
}
}
</script>
</body>
</html>优化（封装了一些函数）后的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车优化版</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="catbox">
<table id="cartTable">
<thead>
<tr>
<th><label>
<input class="check-all check" type="checkbox"/> 全选</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="../images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="../images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
<td class="price">3888.50</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">3888.50</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="../images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
<td class="price">1428.50</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">1428.50</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="../images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
<td class="price">640.60</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">640.60</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
</tbody>
</table>
<div class="foot" id="foot">
<label class="fl select-all"><input type="checkbox" class="check-all check"/> 全选</label>
<a class="fl delete0" id="deleteAll" >删除</a>
<div class="fr closing" >结 算</div>
<input type="hidden" id="cartTotalPrice" />
<div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
<div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
<div class="selected-view">
<div id="selectedViewList" class="clearfix">
<div><img src="images/1.jpg"><span>取消选择</span></div>
</div>
<span class="arrow">◆<span>◆</span></span> </div>
</div>
<script>
//1. 全选按钮的功能
window.onload=function(){
var checkAlls=document.getElementsByClassName('check-all');//多选按钮
var checkOnes=document.getElementsByClassName('check-one');//单选按钮
for(var n=0;n<checkAlls.length;n++){
checkAlls[n].onchange=function(){
for(var j=0;j<checkOnes.length;j++){
checkOnes[j].checked=this.checked;
}
checked(this.checked);
count();//这个地方不需要接收sum值
}
}
//2.单选按钮的功能
for(var n=0;n<checkOnes.length;n++){
checkOnes[n].onchange=function(){
count();
var Sum=count();//return将sum这个值返回出来，用一个新的变量接收一下；
var t=Sum==checkOnes.length;
checked(t);
}
}
//3.加减按钮的功能
var adds=document.getElementsByClassName('add');
var reduces=document.getElementsByClassName('reduce');
var countInputs=document.getElementsByClassName('count-input');
var subtotal=document.getElementsByClassName('subtotal');
var prices=document.getElementsByClassName('price');
for(var n=0;n<adds.length;n++){
adds[n].index=n;
reduces[n].index=n;
adds[n].onclick=function(){
var num=countInputs[this.index].value;
num++;
xiaoji(num,this.index);
count();
}
reduces[n].onclick=function(){
var num=countInputs[this.index].value;
if (num==0) {
num=0;
}else{
num--;
}
xiaoji(num,this.index);
count();
}
}
//删除功能的实现
var deletes=document.getElementsByClassName('delete');
for(var n=0;n<deletes.length;n++){
deletes[n].onclick=function(){
var tr=this.parentNode.parentNode;
var tbody=tr.parentNode;
tbody.removeChild(tr)
count();
for(var j=0;j<adds.length;j++){
adds[j].index=j;
reduces[j].index=j;
}
var tbody=document.getElementsByTagName('tbody')[0];
var trs=tbody.getElementsByTagName('tr');
if (trs.length==0) {
var creatTr=document.createElement('tr');
creatTr.innerHTML="<span class='sdf'>购物车已清空</span>";
creatTr.className="s";
tbody.append(creatTr);
}
}
}
//删除全部
var deleteAll=document.getElementById('deleteAll');
deleteAll.onclick=function(){
var tbody=document.getElementsByTagName('tbody')[0];
var trs=tbody.getElementsByTagName('tr');
var x=trs.length;
for(var n=0;n<trs.length;n++){
tbody.removeChild(trs[n])
n--;
}
length();
}
//结算功能
var close=document.getElementsByClassName('closing')[0];
close.onclick=function(){
count();
var x=confirm("您一共消费"+priceTotal.innerHTML+"元，"+"是否去付款")
}
function length(){
length();
}
//函数四：判断数组的长度，提示购物车清空
function length(){
var tbody=document.getElementsByTagName('tbody')[0];
var tr=tbody.getElementsByTagName('tr');
if (tr.length==0) {
var creatTr=document.createElement('tr');
creatTr.innerHTML="<span class='sdf'>购物车已清空</span>";
creatTr.className="s";
tbody.append(creatTr);
}
}
//函数三：小计的计算
function xiaoji(num,index){
countInputs[index].value=num;
var sum1=num*prices[index].innerHTML;
subtotal[index].innerHTML=sum1;
}
//函数二：控制全选按钮的选中与否
function checked(x){
for(var n=0;n<checkAlls.length;n++){
checkAlls[n].checked=x;
}
}
//函数一：//统计数量和合计
function count(){
var selectedTotal=document.getElementById('selectedTotal');
var subtotal=document.getElementsByClassName('subtotal');//小计
var priceTotal=document.getElementById('priceTotal');//合计
var sum=0;//统计单选按钮被选中的数量
var total=0;
for(var n=0;n<checkOnes.length;n++){
if (checkOnes[n].checked==true) {
sum++;
total+=parseFloat(subtotal[n].innerHTML)
//通过遍历的方式，找到对应的元素
// var tr=checkOnes[n].parentNode.parentNode;
// var td=tr.getElementsByClassName('subtotal')[0];
// total=total+parseFloat(td.innerHTML);
}
}
selectedTotal.innerHTML=sum;
priceTotal.innerHTML=total.toFixed(2);
return sum;//将sum值返回出来
}
}
</script>
</body>
</html>
css代码
@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a{color:#666;text-decoration:none;}
table{border-collapse:collapse;border-spacing:0;border:0;}
body{color:#666;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
*html .clearfix{height:1%}
.clearfix{display:block}
*+html .clearfix{min-height:1%}
.fl{float:left;}
.fr{float:right;}
/*素材家园 - www.sucaijiayuan.com*/
.catbox{width:940px;margin:100px auto;}
.catbox table{text-align:center;width:100%;}
.catbox table th,.catbox table td{border:1px solid #CADEFF;}
.catbox table th{background:#e2f2ff;border-top:3px solid #a7cbff;height:30px;}
.catbox table td{padding:10px;color:#444;}
.catbox table tbody tr:hover{background:RGB(238,246,255);}
.checkbox{width:60px;}
.check-all{ vertical-align:middle;}
.goods{width:300px;}
.goods span{width:180px;margin-top:20px;text-align:left;float:left;}
.goods img{width:100px;height:80px;margin-right:10px;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 span:hover,a:hover{cursor:pointer;color:red;text-decoration:underline;}
.foot{margin-top:0px;color:#666;height:48px;border:1px solid #c8c8c8;border-top:0;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:80px;height:48px;line-height:48px;color:#666;text-align:center;}
.foot .delete{padding-left:10px;}
.foot .closing{border-left:1px solid #c8c8c8;width:103px;text-align:center;color:#666;font-weight:bold;cursor:pointer;background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));}
.foot .closing:hover{background-image:linear-gradient(RGB(226,226,226),RGB(241,241,241));color:#333;}
.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:938px;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:10px 20px 10px 20px;}
#selectedViewList div{display:inline-block;position:relative;width:100px;height:80px;border:1px solid #ccc;margin:10px;float:left;}
#selectedViewList div img{width:100px;height:80px;margin-right:10px;float:left;}
#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:#000;cursor:pointer;}
#selectedViewList div:hover span{display:block;}原生js实现楼梯导航的制作
这是一个固定楼层导航栏，要实现三个功能：
其一：固定导航栏滚动到一定位置出现，否则就消失
其二：当我们滚动页面的时候，滚动到相应的位置时，相应的楼层导航栏的位置也要进行改变
其三：当我们点击楼层导航的时候，窗口能够自动滚动到相应的位置
然后还要强调一个知识点offset().top,这个是指 元素与document 的上边的距离
上面三个功能的思路：
1.对应其一，根据上文描述，其思路就是判断窗口的滚动高度(document.documentElement.scrollTop)是否大于一定高度，大于就把固定导航栏显示，否则就隐藏
2.对应其二，其思路是窗口滚动触发事件，分别得到窗口滚动的高度，以及每个导航对应内容的高度，依次判断窗口滚动的高度是否大于导航栏对应内容的高度，如果符合条件的话，固定导航栏就滚动到相应的位置。
3.对应其三，其思路是点击导航栏时触发事件，得到导航栏选中对象的index值或者是能够辨别内容的值，然后就对应滚动到对应内容区域的顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>楼梯导航</title>
<style>
*{
margin: 0;
padding: 0;
}
#header{
height: 600px;
font-size: 100px;
background-color: red;
text-align: center;
line-height: 600px;
}
#leftNav{
position: fixed;
top: 220px;
left: 0;
display: none;
}
#leftNav li{
width: 50px;
height: 50px;
list-style: none;
border: 1px solid #ccc;
text-align: center;
line-height: 50px;
}
#leftNav .active{
background-color: gray;
}
.main div{
height: 800px;
}
.main .a{
background-color: orange;
}
.main .b{
background-color: yellow;
}
.main .c{
background-color: green;
}
.main .d{
background-color: blue;
}
.main .e{
background-color: pink;
}
.main .f{
background-color: purple;
}
</style>
</head>
<body>
<ul id="leftNav">
<li class="active">1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
<li>6F</li>
<li class="botLi">置顶</li>
</ul>
<div id="header">我是header</div>
<div class="main">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
</div>
<script>
//1. 当滚动条滚动到一定位置时，让导航显示出来，
//2. 点击对应li是，滚动到对应的楼层；需要知道每一层距离顶层的高度
window.onload=function(){
var main=document.getElementsByClassName('main')[0];
var mainDivs=main.getElementsByTagName('div');
var mainTop=main.offsetTop;
var leftNav=document.getElementById('leftNav');
var leftNavLis=leftNav.getElementsByTagName('li');
var arr=[];
for(var n=0;n<mainDivs.length;n++){
arr.push(mainDivs[n].offsetTop);
}
arr.push(0);
window.onscroll=function(){
if (document.documentElement.scrollTop>=mainTop) {
leftNav.style.display="block";
}else{
leftNav.style.display="none";
}
var height=document.documentElement.scrollTop;
for(var n=0;n<arr.length;n++){
//如果当前滚动条的高度小于其底部距离最上方的高度，则选中对应li图标
//距离顶端的高度，加上其本身的高度（offsetHeight）
if (height<arr[n]+mainDivs[n].offsetHeight) {
for(var j=0;j<leftNavLis.length;j++){
leftNavLis[j].className="";
}
leftNavLis[n].className="active";
break;
}
}
for(var n=0;n<leftNavLis.length;n++){
leftNavLis[n].index=n;
leftNavLis[n].onclick=function(){
for(var j=0;j<leftNavLis.length;j++){
leftNavLis[j].className="";
document.documentElement.scrollTop=arr[this.index];
}
this.className="active";
}
}
}
}
</script>
</body>
</html>
