潮鞋购物网站,html5+css3+js,实现基本的添加购物车,自动计算金额等功能

news/2024/5/10 23:36:00/文章来源:https://blog.csdn.net/weixin_59334478/article/details/124548902

项目展示效果 

 实现添加购物鞋数量总金额自动变化

 实现连接购物车功能

 实现在购物车里收藏与删除

 下面是购物页面代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>购买精选</title><style type="text/css">
body{width: 1350px;height: 100%;}#div0{width: 100%;height: 2100px;}
#div1{width: 35%;height: 100px;float: left;}
#div2{width: 65%;height: 100px;float: left;}
#div2 ul{margin: 40px;}
#div2 ul li{float: left;list-style: none;width: 20%;font-size: 20px;color: #789;}
#div2 ul li a{text-decoration:none; color: gray;}
#div2 ul li:hover{color: black;}
#div3{width: 10%;height: 2000px;float: left;}
#div4{width: 80%;height: 400px;float: left;}
#div4 ul li{width: 20%;list-style: none;float: left;margin: 2%;}
#div4 ul li:hover{transform: translate(0,10px);}
#div6{width: 80%;height: 400px;float: left;}
#div6 ul li{width: 20%;list-style: none;float: left;margin: 2%;}
#div6 ul li:hover{transform: translate(0,10px);}
#div7{width: 80%;height: 400px;float: left;}
#div7 ul li{width: 20%;list-style: none;float: left;margin: 2%;}
#div7 ul li:hover{transform: translate(0,10px);}
#div8{width: 80%;height: 400px;float: left;}
#div8 ul li{width: 20%;list-style: none;float: left;margin: 2%;}
#div8 ul li:hover{transform: translate(0,10px);}
#div9{width: 80%;height: 400px;float: left;}
#div9 ul li{width: 20%;list-style: none;float: left;margin: 2%;}
#div9 ul li:hover{transform: translate(0,10px);}
#div10{position: fixed;top: 100px;right:10px;width: 50px;height: 400px;background: black;}
#div10 ul{padding: 10px;}
#div10 ul li{list-style: none;height: 100px;}
#div10 ul li img:hover{background: orange;}</style><script type="text/javascript">//减法function minus(index) {//获取当前数量的值var amounts=document.getElementsByName("amount");//得到第一个amount的元素的value属性的值var count=parseInt(amounts[index].value); //数量加1if (count<=1){alert("不能再减了,快没了!!");} else {//得到第一个amount的元素的value属性的值var count=parseInt(amounts[index].value)-1; //数量加1//重新把count的值绑定在数量文本框里amounts[index].value=count;var prices=document.getElementsByName("price");var price=parseFloat(prices[index].value);//乘以Math.pow(10,2)的原因为避免失真var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);document.getElementById("price"+index).innerHTML="¥:"+totalMoney;}total();}//加法function plus(index) {//获取当前数量的值var amounts=document.getElementsByName("amount");//得到第一个amount的元素的value属性的值var count=parseInt(amounts[index].value)+1; //数量加1//重新把count的值绑定在数量文本框里amounts[index].value=count;//当前操作端口的价格也要重新计算//得到当前端口的单价var prices=document.getElementsByName("price");var price=parseFloat(prices[index].value);//乘以Math.pow(10,2)的原因为避免失真var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);//把当前价格显示在文本中document.getElementById("price"+index).innerHTML="¥:"+totalMoney;total();}//求总金额function total() {//得到所有的数量var counts=document.getElementsByName("amount");//得到所有的单价var prices=document.getElementsByName("price");var sumMoney=0;for (var i=0;i<counts.length;i++){//乘以Math.pow(10,2)的原因为避免失真sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));}//把总金额显示再指定的元素中document.getElementById("totalPrice").innerHTML="¥:"+sumMoney;}//加入收藏function save() {if (confirm("确认要收藏吗?")){alert("收藏成功!");}}//删除function delete1() {if (confirm("确认要删除吗?")) {var del=document.getElementById("first");del.parentNode.removeChild(del);alert("删除成功!!");}}
</script></head>
<body>
<div id="div0"><a name="gouwu"></a>
<div id="div1"><img src="images/youxuan.png" width="200px"></div>
<div id="div2"><ul><li><b><a href="../高贵宝/web-16.1.html#sy">首页</b></li><li><b><a >购买精选</a></b></li><li><b><a href="../高贵宝/web-16.2.html#shequ">社区精选</a></b></li><li><b><a href="../赵江波/商家入驻.html"">商家入驻</a></b></li><li><b><a href="../邓/建议.html#guanyu">关于我们</a></b></li></ul>
</div>
<div id="div3"></div>
<div id="div4"><h2>Jordan</h2><figure><ul><li><img src="images/xie4.jpg" width="150px"><figcaption>Nike/耐克AIR JORDAN 1 男女篮球鞋AJ1黑紫脚趾553558-125紫葡萄
</figcaption>
¥:<input type="text" name="price" value="1299" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price0">¥:1299</font><br>
<input type="button"  value="+" name="plus" onclick="plus(0)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(0)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li><li><img src="images/xie3.jpg" width="150px"><figcaption>
Nike/耐克AIR JORDAN 1 MID女子篮球鞋AJ1玫瑰金555112-190中帮</figcaption>
¥:<input type="text" name="price" value="1549" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price1">¥:1549</font><br>
<input type="button"  value="+" name="plus" onclick="plus(1)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(1)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li><li><img src="images/xie2.jpg" width="150px"><figcaption>Nike/耐克AIR JORDAN 1 男女AJ1薄荷绿3M篮球鞋CQ9828-131 郭艾伦
</figcaption>
¥:<input type="text" name="price" value="2799" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price2">¥:2799</font><br>
<input type="button"  value="+" name="plus" onclick="plus(2)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(2)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li><li><img src="images/xie1.jpg" width="150px"><figcaption>Nike/耐克AIR JORDAN 1 MID女子篮球鞋AJ1糖果鸳鸯554725-083拼色
</figcaption>
¥:<input type="text" name="price" value="3200" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price3">¥:3200</font><br>
<input type="button"  value="+" name="plus" onclick="plus(3)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(3)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li></ul></figure>
</div>
<div id="div6">
<h2>Nike</h2>
<figure>
<ul>
<li><img src="images/xie5.jpg" width="150px"><figcaption>Nike耐克官方AIR FORCE 1 MID '男子运动鞋空军一号板鞋
传世风尚 </figcaption>
¥:<input type="text" name="price" value="721" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price4">¥:721</font><br>
<input type="button"  value="+" name="plus" onclick="plus(4)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(4)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie6.jpg" width="150px"><figcaption>Nike耐克官方NIKE ZOOM FLY 3 男子跑步鞋马拉松缓震回弹 AT8240</figcaption>¥:<input type="text" name="price" value="789" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price5">¥:789</font><br>
<input type="button"  value="+" name="plus" onclick="plus(5)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(5)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie7.jpg" width="150px"><figcaption>Nike耐克官方AIR MAX 270 REACT女子运动鞋休闲鞋气垫鞋DC3276</figcaption>
¥:<input type="text" name="price" value="1039" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price6">¥:1039</font><br>
<input type="button"  value="+" name="plus" onclick="plus(6)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(6)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie8.jpg" width="150px"><figcaption>Nike耐克官方FREE RN 5.0 2020 女子跑步鞋运动鞋慢跑鞋CJ0270</figcaption>
¥:<input type="text" name="price" value="379" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price7">¥:379</font><br>
<input type="button"  value="+" name="plus" onclick="plus(7)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(7)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
</ul>
</figure>
</div>
<div id="div7"><h2>LI-NING</h2>
<figure>
<ul>
<li><img src="images/xie9.jpg" width="150px"><figcaption>李宁羽毛球鞋男鞋情侣鞋男士鞋子专业防滑低帮运动鞋</figcaption>
¥:<input type="text" name="price" value="288" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price8">¥:288</font><br>
<input type="button"  value="+" name="plus" onclick="plus(8)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(8)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie10.jpg" width="150px"><figcaption>李宁旗舰官网男鞋2020新款全能王鞋子低帮运动鞋</figcaption>
¥:<input type="text" name="price" value="208" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price9">¥:208</font><br>
<input type="button"  value="+" name="plus" onclick="plus(9)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(9)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie11.jpg" width="150px"><figcaption>李宁羽毛球鞋女鞋耐磨防滑女士鞋子低帮运动鞋</figcaption>
¥:<input type="text" name="price" value="228" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price10">¥:228</font><br>
<input type="button"  value="+" name="plus" onclick="plus(10)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(10)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie12.jpg" width="150px"><figcaption>李宁羽毛球鞋男鞋专业防滑鞋子男士低帮运动羽毛球鞋</figcaption>
¥:<input type="text" name="price" value="238" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price11">¥:238</font><br>
<input type="button"  value="+" name="plus" onclick="plus(11)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(11)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
</ul>
</figure>
</div>
<div id="div8">
<h2>PUMA</h2>
<figure>
<ul>
<li><img src="images/xie13.jpg" width="150px"><figcaption>PUMA彪马官方新款女子经典休闲鞋 SMASH </figcaption>
¥:<input type="text" name="price" value="269" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price12">¥:269</font><br>
<input type="button"  value="+" name="plus" onclick="plus(12)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(12)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie14.jpg" width="150px"><figcaption>PUMA彪马官方 男女同款情侣SEGA联名款休闲鞋 </figcaption>
¥:<input type="text" name="price" value="429" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price13">¥:429</font><br>
<input type="button"  value="+" name="plus" onclick="plus(13)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(13)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie15.jpg" width="150px"><figcaption>PUMA彪马官方正品 刘雯同款新款女子复古休闲鞋 </figcaption>
¥:<input type="text" name="price" value="809" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price14">¥:809</font><br>
<input type="button"  value="+" name="plus" onclick="plus(14)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(14)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie16.jpg" width="150px"><figcaption>PUMA彪马官方正品 男女同款复古经典德训鞋休闲鞋 </figcaption>
¥:<input type="text" name="price" value="197" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price15">¥:197</font><br>
<input type="button"  value="+" name="plus" onclick="plus(15)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(15)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
</ul>
</figure>
</div><div id="div9">
<h2>VANS</h2>
<figure>
<ul>
<li><img src="images/xie17.jpg" width="150px"><figcaption>【燃冬季】Vans范斯官方黑白棋盘格宽条纹男鞋女鞋低帮板鞋运动鞋</figcaption>
¥:<input type="text" name="price" value="463" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price16">¥:463</font><br>
<input type="button"  value="+" name="plus" onclick="plus(16)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(16)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie18.jpg"  width="150px"><figcaption>【燃冬季】Vans范斯官方 黑色男鞋女鞋低帮职业滑板鞋
</figcaption>
¥:<input type="text" name="price" value="660" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price17">¥:660</font><br>
<input type="button"  value="+" name="plus" onclick="plus(17)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(17)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie19.jpg"  width="150px"><figcaption>【燃冬季】Vans范斯官方灰色Vans解构小香风男女SK8-Hi高帮板鞋</figcaption>
¥:<input type="text" name="price" value="465" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price18">¥:465</font><br>
<input type="button"  value="+" name="plus" onclick="plus(18)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(18)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie20.jpg"  width="150px"><figcaption>【燃冬季】Vans范斯官方 灰色侧边条纹男女Old Skool低帮板鞋</figcaption>
¥:<input type="text" name="price" value="423" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price19">¥:423</font><br>
<input type="button"  value="+" name="plus" onclick="plus(19)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(19)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
</ul>
</figure>
</div>
<div id="div10">
<ul>
<li><a href="../邓/dengru.html#dr"><img src="images/yonghu.png" width="30px"></a></li>
<li><a href="购物车.html#gouwuche"><img src="images/gouwu.png" width="30px" ></a></li>
<li><a href="../邓/建议.html#guanyu"><img src="images/lianxi.png" width="30px"></a></li>
<li><a href="../邓/建议.html#guanyu"><img src="images/shezhi.png" width="30px"></a></li>
</ul>
</div></div>	
</body>
</html>

下面是购物车页面

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>完善当当购物车页面</title><style type="text/css">body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
ul,li,ol{list-style: none;}
.content{width: 810px; margin: 0 auto;  font-family: "微软雅黑";}
.logo{margin: 10px 0;}
.logo span{display: inline-block;float: right;width: 60px;height: 30px;line-height: 30px;font-size: 14px;background: #ff0000;color: #ffffff;text-align: center;border-radius: 10px;margin-top: 5px;margin-right: 10px;cursor: pointer;font-weight: bold;
}
.cartList{/*background: url("../image/02.jpg") no-repeat;*//*height: 414px;*/overflow: hidden;
}
.cartList ul{display: flex;justify-content: space-between;/*float: right;*//*width: 450px;*/
}
.cartList ul:nth-of-type(1){display: flex;margin-top: 125px;
}
.cartList ul:nth-of-type(2){margin: 20px 0;
}
.cartList ul li{font-family: "微软雅黑";font-size: 12px;color: #666666;text-align: center;line-height: 25px;/*float: left;*/
}
.cartList ul li input[name="price"]{border: none;background: transparent;width: 45px;text-align: center;
}
.cartList ul li input[name="amount"]{width: 45px;text-align: center;border: 1px solid #999999;border-left: none;border-right: none;height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{height: 25px;border: 1px #999999 solid;width: 25px;text-align: center;
}
.cartList ul li:nth-of-type(1){width: 130px;}
.cartList ul li:nth-of-type(2){width: 100px;}
.cartList ul li:nth-of-type(3){width: 130px;}
.cartList ul li p{cursor: pointer;}
.cartList ol{float: right;clear: both;margin-top: 40px;
}
.cartList ol li{float: left;
}
.cartList ol li:nth-of-type(1){color: #ff0000;width: 80px;height: 35px;line-height: 35px;text-align: center;
}
.cartList ol li span{display: inline-block;float: right;width: 80px;height: 35px;line-height: 35px;font-size: 14px;font-family: "微软雅黑";background: #ff0000;color: #ffffff;text-align: center;/*margin-top: 5px;*//*margin-right: 15px;*/cursor: pointer;font-weight: bold;}</style>
</head><!--onload,在加载时计算好原始金额-->
<body onload="total()"><div class="content"><div class="logo"><span ><a href="购买精选.html#gouwu" style="color: white;text-decoration: none;">关闭</a></span></div><div class="cartList"><ul><a name="gouwuche"><li>商品信息</li></a><li>商品图片</li><li>单价(元)</li><li>数量</li><li>金额(元)</li><li>操作</li></ul><ul style="display: flex;justify-content: space-between;align-items: center" id="first"><li>Nike/耐克AIR JORDAN 1 男女AJ1薄荷绿</li><li><img src="images/xie2.jpg" alt="" width="50" height="50"></li><li>¥<input type="text" name="price" value="2799"></li><li><input type="button" name="minus" value="-" onclick="minus(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0)" ></li><li id="price0">¥2799</li><li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li></ul><ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;"><li>Nike耐克官方AIR MAX 270 REACT女子运动鞋</li><li><img src="images/xie7.jpg" alt="" width="50" height="50"></li><li>¥<input type="text" name="price" value="1039"></li><li><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="2"><input type="button" name="plus" value="+" onclick="plus(1)"></li><li id="price1">¥1039</li><li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li></ul>
<ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;"><li>李宁羽毛球鞋女鞋防滑女士鞋子低帮运动鞋</li><li><img src="images/xie11.jpg" alt="" width="50" height="50"></li><li>¥<input type="text" name="price" value="228"></li><li><input type="button" name="minus" value="-" onclick="minus(2)"><input type="text" name="amount" value="3"><input type="button" name="plus" value="+" onclick="plus(2)"></li><li id="price2">¥228</li><li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li></ul><ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;"><li>PUMA彪马官方正品 刘雯同款新款女子复古休闲鞋</li><li><img src="images/xie15.jpg" alt="" width="50" height="50"></li><li>¥<input type="text" name="price" value="809"></li><li><input type="button" name="minus" value="-" onclick="minus(3)"><input type="text" name="amount" value="4"><input type="button" name="plus" value="+" onclick="plus(3)"></li><li id="price3">¥809</li><li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li></ul><ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;"><li>【燃冬季】Vans范斯官方灰色Vans解构小香风男女</li><li><img src="images/xie19.jpg" alt="" width="50" height="50"></li><li>¥<input type="text" name="price" value="465"></li><li><input type="button" name="minus" value="-" onclick="minus(4)"><input type="text" name="amount" value="5"><input type="button" name="plus" value="+" onclick="plus(4)"></li><li id="price4">¥465</li><li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li></ul><ol><li id="totalPrice">&nbsp;</li><li><span>结算</span></li></ol></div>
</div>
</body>
</html><script>//减法function minus(index) {//获取当前数量的值var amounts=document.getElementsByName("amount");//得到第一个amount的元素的value属性的值var count=parseInt(amounts[index].value); //数量加1if (count<=1){alert("不能再减了,快没了!!");} else {//得到第一个amount的元素的value属性的值var count=parseInt(amounts[index].value)-1; //数量加1//重新把count的值绑定在数量文本框里amounts[index].value=count;var prices=document.getElementsByName("price");var price=parseFloat(prices[index].value);//乘以Math.pow(10,2)的原因为避免失真var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);document.getElementById("price"+index).innerHTML="¥:"+totalMoney;}total();}//加法function plus(index) {//获取当前数量的值var amounts=document.getElementsByName("amount");//得到第一个amount的元素的value属性的值var count=parseInt(amounts[index].value)+1; //数量加1//重新把count的值绑定在数量文本框里amounts[index].value=count;//当前操作端口的价格也要重新计算//得到当前端口的单价var prices=document.getElementsByName("price");var price=parseFloat(prices[index].value);//乘以Math.pow(10,2)的原因为避免失真var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);//把当前价格显示在文本中document.getElementById("price"+index).innerHTML="¥:"+totalMoney;total();}//求总金额function total() {//得到所有的数量var counts=document.getElementsByName("amount");//得到所有的单价var prices=document.getElementsByName("price");var sumMoney=0;for (var i=0;i<counts.length;i++){//乘以Math.pow(10,2)的原因为避免失真sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));}//把总金额显示再指定的元素中document.getElementById("totalPrice").innerHTML="¥:"+sumMoney;}//加入收藏function save() {if (confirm("确认要收藏吗?")){alert("收藏成功!");}}//删除function delete1() {if (confirm("确认要删除吗?")) {var del=document.getElementById("first");del.parentNode.removeChild(del);alert("删除成功!!");}}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_827990.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

想要那种有提示声音的网站吗?我教你怎么做!

您有新的外卖订单请及时查收&#xff01;熟悉不能再熟悉的声音了&#xff0c;今天小编就做了这样一个网站的提示新订单的功能&#xff0c;接下来就教你怎么玩转这个小功能&#xff01;首先我们前端的代码是这样写的&#xff1a;var playSound function () { var borswer wind…

基于ELK 搭建网站流量可视化监控平台

2019独角兽企业重金招聘Python工程师标准>>> ELK 组成&#xff1a;&#xff1a; 通过上图我们可以看到&#xff0c;ELK 是由三个Elastic 的产品组合而成&#xff0c;分别是ElasticSearch、Logstash 和Kibana。三者之间是的部署关系如下图所示&#xff1a; Logstash …

不修改代码就能优化ASP.NET网站性能的一些方法

本文将介绍一些方法用于优化ASP.NET网站性能&#xff0c;这些方法都是不需要修改程序代码的。 它们主要分为二个方面&#xff1a; 1. 利用ASP.NET自身的扩展性进行优化。 2. 优化IIS设置。 配置OutputCache 用缓存来优化网站性能的方法&#xff0c;估计是无人不知的。 ASP.NET…

通过建站学运维1901-09任务

4.21LNMP环境介绍 什么是LNMP Linux NginxMySQL/MariadbPHP Linux就是操作系统 Nginx 是一个web服务器&#xff0c;提供HTTP服务的。之所以能够访问网站就是Nginx在起作用。 Nginx的功能&#xff1a; 接收用户请求&#xff0c;处理图片、js、css等静态请求。接收但不处理php请求…

【Web】Bootstrap框架实现简单旅游网站页面

这里主要是为了熟悉以下Bootstrap框架的简单使用&#xff0c;采用了响应式布局。 代码如下&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" conte…

4.Nginx静态网站部署

Nginx是一个HTTP的web服务器&#xff0c;可以将服务器上的静态文件&#xff08;如HTML、图片等&#xff09;通过HTTP协议返回给浏览器客户端。 一、项目实例 1.进入opt目录下&#xff0c;新建static目录 2.通过Xftp将ace-master到linux服务器/opt/static目录下 为了让后面的配…

Apache下通过shell脚本提交网站404死链

网站运营人员对于死链这个概念一定不陌生&#xff0c;网站的一些数据删除或页面改版等都容易制造死链&#xff0c;影响用户体验不说&#xff0c;过多的死链还会影响到网站的整体权重或排名。 百度站长平台提供的死链提交工具,可将网站存在的死链(协议死链、404页面)进行提交,可…

Django的安装使用,以及建立本地网站

一、安装Django pip install django 完成后即可 二、pycharm 建立django 点击file ——>new project 选择django项目——>more setting填写appname 生成以下项目结构 -views.py中处理视图逻辑&#xff0c;一般为大量函数方法。一般被urls处理调用&#xff0c;收到请求&am…

看透 Spring MVC 源代码分析与实践 —— 网站基础知识

网站架构及其演变过程友情提示&#xff1a;欢迎关注公众号【芋道源码】。?关注后&#xff0c;拉你进【源码圈】微信群讨论技术和源码。友情提示&#xff1a;欢迎关注公众号【芋道源码】。?关注后&#xff0c;拉你进【源码圈】微信群讨论技术和源码。友情提示&#xff1a;欢迎…

某政府网站信息文章标题、链接、刊布时间等信息获取

目录一、需求信息二、过程感触三、实战code一、需求信息 需要信息&#xff1a; 每个内容下开篇的索引号、发布机构、组配分类、标题、发布时间和链接地址&#xff0c;部分实例如下图&#xff1a; 上图中左侧的目录结构对应的刊布信息中的如下信息&#xff1a; 题外话&#x…

大型分布式网站术语分析 15 条,你知道几条?

点击上方“芋道源码”&#xff0c;选择“置顶公众号”技术文章第一时间送达&#xff01;源码精品专栏 精尽 Dubbo 原理与源码专栏( 已经完成 69 篇&#xff0c;预计总共 75 篇 )中文详细注释的开源项目Java 并发源码合集RocketMQ 源码合集Sharding-JDBC 源码解析合集Spring MVC…

几个大型网站的Feeds(Timeline)设计简单对比

点击上方“芋道源码”&#xff0c;选择“置顶公众号”技术文章第一时间送达&#xff01;源码精品专栏 精尽 Dubbo 原理与源码专栏( 已经完成 69 篇&#xff0c;预计总共 75 篇 )中文详细注释的开源项目Java 并发源码合集RocketMQ 源码合集Sharding-JDBC 源码解析合集Spring MVC…

基于LAMP环境发布一个Discuz论坛网站

一、LAMP是什么 1、LAMP是常见的Web服务器环境解决方案&#xff0c;用于创建和管理Web应用程序的开源开发平台。Linux用作后端操作系统&#xff0c;Apache是​​Web服务器&#xff0c;MySQL是数据库&#xff0c;PHP是脚本语言。 2、LAMP 为 Linux、Apache、MySQL、PHP 的简称…

尾随《大型网站技术架构》作者,从零单排「大数据」

李智慧大佬&#xff0c;《大型网站技术架构》&#xff08;艿艿的架构启蒙读物&#xff09;的作者&#xff0c;豆瓣评分 7.9 分&#xff0c;出了「大数据」专栏。所以&#xff0c;如果你数据量挺大的&#xff0c;可以扫码买一买。如果你数据量不大&#xff0c;但是想膨胀膨胀&am…

大型网站架构演进的五大阶段盘点

点击上方“芋道源码”&#xff0c;选择“设为星标”做积极的人&#xff0c;而不是积极废人&#xff01;源码精品专栏 精尽 Dubbo 原理与源码 69 篇精尽 Netty 原理与源码 61 篇中文详细注释的开源项目Java 并发源码合集RocketMQ 源码合集Sharding-JDBC 源码解析合集Spring MVC …

初步了解网站压力测试工具

http://www.51testing.com/html/index.html(51测试网) 一、ab网站压力测试 ab是apache自带的压力测试工具&#xff0c;ab是apachebench命令缩写。它不仅可以对apache服务器进行网站访问压力测试&#xff0c;也可以对或其它类型的服务器进行压力测试。比如nginx、tomcat、IIS等。…

用户在电商网站中购买成功了,那么 TA 在微服务中经历了什么?

点击上方“芋道源码”&#xff0c;选择“设为星标”做积极的人&#xff0c;而不是积极废人&#xff01;源码精品专栏 原创 | Java 2019 超神之路&#xff0c;很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析网络应用框架 Netty 源码解析消息中间件 RocketMQ 源码解析数据库…

Python采集网站随机header

不废话直接代码&#xff1a; import randomclass UserAgent:def __init__(self):self.headers ["Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36","Mozilla/5.0 (Macintosh; Intel Mac OS X…

分享Html模板5合一模板---50电影模板、56个游、86个体育项目、95个音乐网站、116个时尚

模板下载链接:https://pan.baidu.com/s/1zNvc5K8tpWbxAKuIziGgjg 密码:agk4 50电影模板Html模板&#xff01; 56个游戏Html模板 86个体育项目Html模板 95个音乐网站Html模板 116个时尚Html模板 我就不相信没有你需要的&#xff01; 50电影模板Html模板&#xff01; 儿童…

《大型网站系统与Java中间件》读书笔记(上)

前言 只有光头才能变强。 文本已收录至我的GitHub仓库&#xff0c;欢迎Star&#xff1a;github.com/ZhongFuChen… &#xff08;想自学习编程的小伙伴请搜索圈T社区&#xff0c;更多行业相关资讯更有行业相关免费视频教程。完全免费哦!&#xff09; 一、为什么分布式&#xff…