麻烦告知这道web前端题怎么做
\u9ebb\u70e6\u5404\u4f4d\u544a\u77e5\u4e00\u4e0b\u8fd9\u9053\u9898\u600e\u4e48\u505a5\u5757\u94b1
\u3002\u6709\u4e0d\u61c2\u7684\u53ef\u4ee5\u8ffd\u95ee
这就是购物车的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车功能实现</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.fl {float: left;}
.fr {float: right;}
.clear {clear: both;}
.main {
width: 1200px;
margin: 0 auto;
}
.quanxuan,.quanxuan1 {margin-top: 20px;}
.checkbox {
width: 16px;
height: 16px;
border: 1px solid #e5e5e5;
}
.checked {
background: url(images/dui.png) no-repeat;
background-size: 100%;
}
.reduce{
margin-left: 20px;
cursor: pointer;
display: block;
text-align: center;
width: 20px;
height: 20px;
background-color: #C1E2B3;
}
.add{
cursor: pointer;
text-align: center;
width: 20px;
height: 20px;
background-color: #C1E2B3;
}
.number{
width: 50px;
height: 20px;
padding-left: 10px;
border: 1px solid #e5e5e5;
background-color: #fff;
}
.sum{margin-left: 100px;}
</style>
</head>
<body>
<div class="main">
<div class="quanxuan">
<p class="checkbox fl"></p>
<p class="fl">全选</p>
<div class="clear"></div>
</div>
<div class="all">
<div class="quanxuan1">
<p class="checkbox fl"></p>
<div class="fl">
<div class="fl">
<span class="reduce fl">-</span>
<span class="fl number">1</span>
<span class="add fl">+</span>
<div class="clear"></div>
</div>
<span class="fl sum">300</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="quanxuan1">
<p class="checkbox fl"></p>
<div class="fl">
<div class="fl">
<span class="reduce fl">-</span>
<span class="fl number">1</span>
<span class="add fl">+</span>
<div class="clear"></div>
</div>
<span class="fl sum">300</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="quanxuan1">
<p class="checkbox fl"></p>
<div class="fl">
<div class="fl">
<span class="reduce fl">-</span>
<span class="fl number">1</span>
<span class="add fl">+</span>
<div class="clear"></div>
</div>
<span class="fl sum">300</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="quanxuan1">
<p class="checkbox fl"></p>
<div class="fl">
<div class="fl">
<span class="reduce fl">-</span>
<span class="fl number">1</span>
<span class="add fl">+</span>
<div class="clear"></div>
</div>
<span class="fl sum">300</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<!--计算总价-->
<span class="zong">0</span>
</div>
<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/shop.js"></script>
</body>
</html>
$(function() {
//单选
$(".quanxuan1 .checkbox").click(function(){
if ($(this).hasClass("checked")) {
$(this).removeClass("checked");
$(".quanxuan").find(".checkbox").removeClass("checked");
$(this).siblings("div").find(".sum").removeClass("yong");
var arr1 = [];
var lastMoney = 0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for (var i = 0; i < arr1.length; i++) {
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}else{
$(this).addClass("checked");
$(this).siblings("div").find(".sum").addClass("yong");
var arr1 = [];
var lastMoney = 0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for (var i = 0; i < arr1.length; i++) {
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}
})
//全选功能
$(".quanxuan .checkbox").click(function(){
if ($(this).hasClass("checked")) {
$(this).removeClass("checked");
$(".sum").removeClass("yong");
$(".quanxuan .checkbox").removeClass("checked");
$(".quanxuan1 .checkbox").removeClass("checked");
var arr1 = [];
var lastMoney = 0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for (var i = 0; i < arr1.length; i++) {
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}else{
$(this).addClass("checked");
$(".sum").addClass("yong");
$(".quanxuan .checkbox").addClass("checked");
$(".quanxuan1 .checkbox").addClass("checked");
var arr1 = [];
var lastMoney = 0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for (var i = 0; i < arr1.length; i++) {
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}
})
//增加数量
$(".add").click(function() {
what = $(this);
var numadd = parseInt(what.prev().text());
var sum1 = parseInt(what.parents("div").siblings(".sum").text());
var num = parseInt(numadd) + 1;
what.prev().text(num);
var sumd = sum1 / numadd;
var sum2 = sumd * num;
var a = what.parents("div").siblings(".sum").text(sum2);
var arr1 = [];
var lastMoney = 0;
$(".yong").each(function() {
arr1.push(parseInt($(this).text()))
})
for(var i = 0; i < arr1.length; i++) {
lastMoney += arr1[i]
}
$(".zong").text(lastMoney);
})
//减少数量
$(".reduce").click(function() {
what = $(this);
var numadd = parseInt(what.next().text());
var sum1 = parseInt(what.parents("div").siblings(".sum").text());
if(what.next().text() == 1) {
return false;
} else {
var num = parseInt(numadd) - 1;
what.next().text(num);
var sumd = sum1 / numadd;
var sum2 = sumd * num;
var a = what.parents("div").siblings(".sum").text(sum2);
var arr1 = [];
var lastMoney = 0;
$(".yong").each(function() {
arr1.push(parseInt($(this).text()))
})
for(var i = 0; i < arr1.length; i++) {
lastMoney += arr1[i]
}
$(".zong").text(lastMoney);
}
})
})自己下载一个jQuery文件
绛旓細<!DOCTYPE html>璐墿杞﹀姛鑳藉疄鐜* { padding: 0; margin: 0; box-sizing: border-box;}.fl {float: left;}.fr {float: right;}.clear {clear: both;}.main { width: 1200px; margin: 0 auto;}.quanxuan,.quanxuan1 {margin-top: 20px;}.checkbox { width: 16px;...
绛旓細鎸夌収灏哄鐢诲氨濂戒簡
绛旓細鐩墠杩欐鍙煡閬擄紝b 鏄痓akery锛屼綘鍐嶅線涓嬫媿锛屾妸鏁存鏂囧瓧閮芥媿涓嬫潵锛孈鎴戝氨濂戒簡
绛旓細绗笁涓涓瀭鐩村悜涓嬶紝涓婁笅涓ゆ潯骞宠绾匡紝灏辨槸涓婇潰涓や釜鐩磋锛屼笅闈袱涓洿瑙掋
绛旓細9876脳9+11116=100000
绛旓細鏋佹湁鍙兘鏄洜涓篿nline-block闂锛宨nline-block浼氬嚭鐜板搴﹀拰楂樺害闂撮殭闂锛岃缃妸鏈塱nline-block鐨剆ection璁剧疆font-size: 0; line-height: 0; 鍏跺疄鏈濂芥敼鍙樺竷灞鏂瑰紡銆傛瀬鏈夊彲鑳芥槸鍥犱负inline-block闂锛宨nline-block浼氬嚭鐜板搴﹀拰楂樺害闂撮殭闂锛岃缃妸鏈塱nline-block鐨剆ection璁剧疆font-size: 0; line-height: ...
绛旓細銆傛湁涓嶆噦鐨勫彲浠ヨ拷闂
绛旓細锛10x2锛壝凤紙3-1锛=10鍙紝10x3=30鍙
绛旓細渚濇嵁绀句氦缃戠粶浜х敓浜嗘捣閲忕敤鎴蜂互鍙婂疄鏃跺拰瀹屾暣鐨勬暟鎹紝鍚屾椂绀句氦缃戠粶涔熻褰曚簡鐢ㄦ埛缇や綋鐨勶紙 C锛夛紝閫氳繃娣卞叆鎸栨帢杩欎簺鏁版嵁鏉ヤ簡瑙ｇ敤鎴凤紝鐒跺悗灏嗚繖浜涘垎鏋愬悗鐨勬暟鎹俊鎭帹缁欓渶瑕佺殑鍝佺墝鍟嗗鎴栨槸寰崥钀ラ攢鍏徃銆俛.鍦板潃 b.琛屼负 c.鎯呯华 d.鏉ユ簮
绛旓細鎷熶汉锛屾瘮鍠伙紝姣斿柣锛屾嫙浜恒
