html中的购物车的增减不能直接传送到后台，可以通过ajax，在js中发送ajax
纯前端的话可以参考下面的
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>cart</title>
<style type="text/css">
body,p,a,input{
margin: 0;
padding: 0;
font-size: 12px;
}
container{
width: 100%;
}
main{
width: 1000px;
height: 500px;
margin:100px auto;
}
main cart-container table{
width: 100%;
}
main cart-container table tr{
text-align: center;
}
main cart-container table tr:hover{
background: rgba(128, 128, 128, 02);
}
main cart-container table table-header{
height: 30px;
background: #d9d9d9;
font-size: 12em;
}
main cart-container table table-header td:first-child{
border-left: solid 4px red;
box-sizing: border-box;
}
main cart-container table tr td:nth-child(1),
main cart-container table tr td:nth-child(2){
text-align: left;
}
main cart-container table tr td:nth-child(2){
width: 52%;
}
main cart-container table tr td:nth-child(3){
width: 12%;
}
main cart-container table tr td:nth-child(4){
width: 12%;
}
main cart-container table tr td:nth-child(5){
width: 12%;
}
main cart-container table tr td:last-child{
width: 10%;
}
cart-good{
height: 60px;
}
cart-good img{
float: left;
margin: 10px;
width: 60px;
}
cart-good td p{
margin: 10px 0px;
}
/加、减按钮/
cart-good td input[type='button']{
width: 20px;
height: 20px;
background: #00f300;
outline: none;
border: none;
}
cart-good td input[type='button']:disabled{
background: grey;
}
cart-good td input[type='button']:first-child{
margin-right: -4px;
}
cart-good td input[type='button']:last-child{
margin-left: -4px;
}
cart-good td input[type='text']{
width: 30px;
height: 20px;
outline: none;
border: none;
text-align: center;
}
table-footer{
display: flex;
justify-content: space-between;
line-height: 40px;
}
table-footer div{
font-size: 12em;
}
table-footer div button{
background: red;
width: 120px;
height: 40px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<header></header>
<section class="main">
<div class="cart-container">
<table cellspacing="0">
<tr class="table-header">
<td><input type="checkbox" id="chk_alla"></td>
<td>聚美优品发货</td>
<td>聚美价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<!--<tr class="cart-good">-->
<!--<td><input type="checkbox" id="001"></td>-->
<!--<td>-->
<!--<img src="https://p2jmstaticcom/product/001/293/1293263_std/1293263_60_60jpg" alt="">-->
<!--<p>[极速免税]PITTA MASK 口罩3枚入</p>-->
<!--<p>型号：新版防晒款 容量：3枚入</p>-->
<!--</td>-->
<!--<td>8900</td>-->
<!--<td>-->
<!--<input type="button" value="-">-->
<!--<input type="text" value="1">-->
<!--<input type="button" value="+">-->
<!--</td>-->
<!--<td>8900</td>-->
<!--<td><a href="#">删除</a></td>-->
<!--</tr>-->
</table>
<div class="table-footer">
<div>
<input type="checkbox" id="chk_allb"> <label for="chk_allb">全选</label>
<span style="margin-left: 20px">继续购物 | 清空选中商品</span>
</div>
<div>
共 <span id="good_count">5</span>件商品 商品应付总额：<span id="goods_total">¥22900</span>
<button class="btn_menu">去结算</button>
</div>
</div>
</div>
</section>
</div>
<script>
(function () {
var skin_products= [
{
"id":"002",
"title": "Estee Lauder 多效智妍精华霜15ml",
"img_url": "http://p0jmstaticcom/product/003/565/3565880_std/3565880_350_350jpg",
"price": 2490,
"number":6,
"acount": "520",
"ischecked":true
},
{
"id":"004",
"title": "EsteeLauder 肌透修护洁面乳30ml",
"img_url": "http://p4jmstaticcom/product/003/155/3155764_std/3155764_350_350jpg",
"price": 499,
"number":1,
"acount": "5911",
"ischecked":false
},
{
"id":"008",
"title": "雅诗兰黛无痕持妆粉底液",
"img_url": "http://p3jmstaticcom/product/003/662/3662318_std/3662318_350_350jpg",
"price": 699,
"number":2,
"acount": "3972",
"ischecked":true
},
{
"id":"0012",
"title": "Estee Lauder 肌初赋活原生液30ml",
"img_url": "http://p4jmstaticcom/product/003/565/3565914_std/3565914_350_350jpg",
"price": 1590,
"number":1,
"acount": "2338"
},
{
"id":"001",
"title": "雅诗兰黛无痕持妆粉底液30ml",
"img_url": "http://p2jmstaticcom/product/001/648/1648502_std/1648502_350_350jpg",
"price": 2980,
"number":4,
"acount": "5071",
"ischecked":false
},
{
"id":"009",
"title": "雅诗兰黛眼部精华霜15ml",
"img_url": "http://p1jmstaticcom/product/001/049/1049746_std/1049746_350_350jpg",
"price": 3990,
"number":1,
"acount": "4022",
"ischecked":false
}
]
// 添加商品
function load() {
var tbody=documentquerySelector('cart-container table tbody');
for(let good of skin_products){
tbodyinnerHTML+=` <tr class="cart-good" id="${goodid}">
<td><input type="checkbox" class="good-check" ${goodischecked"checked":''}></td>
<td>
<img src="${goodimg_url}" alt="">
<p>[极速免税]PITTA MASK 口罩3枚入</p>
<p>型号：新版防晒款 容量：3枚入</p>
</td>
<td>${goodprice}</td>
<td>
<input type="button" value="-" ${goodnumber<=1"disabled":''}>
<input type="text" value="${goodnumber}">
<input type="button" value="+">
</td>
<td>${goodpricegoodnumber}</td>
<td><a href="#">删除</a></td>
</tr>`
}
totalAcount();
}
load();
// end all
// 1 为table注册单击事件
var table01=documentquerySelector('cart-container table');
table01onclick=function (event) {
var node=eventtarget
if(nodegetAttribute('type')=='button'){
// alert(eventtargetvalue);
changeNumber(event);
subtotal(event);
checkedRow(event);
checkedAllRows();
}else if(nodeclassName=='good-check'){
checkedAllRows();
}else if(nodeid=='chk_alla'){
var f=eventtargetchecked;
var chks=documentquerySelectorAll('good-check');
for(var ck of chks){
ckchecked=f;
}
for(var good of skin_products){
goodischecked=f;
}
}else if(nodenodeNametoLowerCase()=='a'){
var tr=eventtargetparentNodeparentNode;
for(var i=0;i<skin_productslength;i++){
if(skin_products[i]id==trid){
skin_productssplice(i,1);
consolelog(skin_products);
}
}
trparentNoderemoveChild(tr);
}
totalAcount();
};
//单击增加或减少按钮的方法
function changeNumber(event) {
var node=event && eventtarget;
var v=0;
if(nodevalue && nodevalue=='+'){
// nodepreviousElementSiblingvalue=parseInt(nodepreviousElementSiblingvalue)+1;
nodepreviousElementSiblingvalue++;
v=nodepreviousElementSiblingvalue;
nodepreviousElementSiblingpreviousElementSiblingdisabled=false;
}else{
// if(nodevalue && nodevalue=='+')
if(nodenextElementSiblingvalue>1){
nodenextElementSiblingvalue--;
v=nodenextElementSiblingvalue;
if(v==1){
nodedisabled=true;
}
}
}
// 存储商品数量
var id=nodeparentNodeparentNodeid;
for(var good of skin_products){
if(id==goodid){
goodnumber=v;
}
}
}
// 每个商品小计的方法
function subtotal(event) {
var node=event && eventtarget;
// var id=nodeparentNodeparentNodeid;
// for(var g of skin_products){
// if(gid==id){
// alert(gprice);
// }
// }
// var price=；
var price=nodeparentNodepreviousElementSiblinginnerText;
var num=nodeparentNodechildren[1]value;
nodeparentNodenextElementSiblinginnerText=(numprice)toFixed(2);
}
// 检验该商品是否选中
function checkedRow(event) {
eventtargetparentNodeparentNodefirstElementChildfirstElementChildchecked=true;
// eventtargetparentNodeparentNodecells[0]firstElementChildchecked=true;
// var tbody=eventtargetparentNodeparentNodeparentNode;
// eventtargetparentNodeparentNodeparentNoderows[3]cells[0]firstElementChildchecked=true;
}
// 检查是否全选
function checkedAllRows() {
var chks=documentquerySelectorAll('good-check');
var flag=true;
for(var ck of chks){
if(!ckchecked){
flag=false;
break;
}
}
documentquerySelector('#chk_alla')checked=flag;
}
// 统计商品总量和总价格
function totalAcount() {
var total=0;
var total_price=0;
var chks=documentquerySelectorAll('good-check');
for(var ck of chks){
if(ckchecked){
id=ckparentNodeparentNodeid;
for(var good of skin_products){
if(id==goodid){
total+=~~goodnumber;
total_price=total_price+(goodnumbergoodprice);
goodischecked=true;
}
}
}
}
documentquerySelector('#good_count')innerText=total;
documentquerySelector('#goods_total')innerText=total_price;
}
})();
</script>
</body>
</html>
很多妹子们平时自己是很注重护肤的，可是男朋友好像不太懂护肤，皮肤非常粗糙，自己是在是看不下去了，也想要男友适当的护肤，让皮肤变得更好，不知道男士适合用哪些护肤品，那么送男友什么护肤品好？男士适合用哪些护肤品呢？
1、男士适用的护肤品
所有肌肤类型都适用：
LAMER海蓝之谜晶钻去角质霜
参考价格：RMB900/100ml
清透凉爽，镇静舒缓，轻轻按摩，立刻发挥作用。产品还融合了海洋中另一种富神奇效果的珍品——经发酵处理的深海海泥，能软化肌肤，温和去除干燥的表皮细胞。使用后能展现肌肤更佳的柔顺度和清澈度，肌肤被调理得充满光泽，光彩照人！
所有肌肤类型都适用：
Biotherm碧欧泉水动力保湿爽肤水
参考价格：RMB240/200ML
隐形水膜科技：独特的乳液化水科技，能清爽不粘腻的把水分注入肌肤并形成保湿水膜。矿物微量元素+5000公升矿物温泉精华PTP：立体保湿并促进肌肤更新，带给肌肤健康活力。
所有肌肤类型都适用：
ampm多效维他命毛孔紧致精华乳
参考价格：市场价RMB320_网络价RMB199
能同时达到紧致毛孔、加强保湿、改善粗糙、抗皱修护、赋予弹力等功效的全方位保养品，不只解决油性肌肤问题，连缺水的干荒肌也能完善照料，彻底拯救年久失修的问题肤况，培养青春美肌！
所有肌肤类型都适用：
Origins悦木之源白米焕肤霜
参考价格：RMB420/50ML
利用白米的柔韧、黏稠力来达到焕肤效果的天然焕肤霜，能够抚平岁月痕迹，让肌肤呈现出完美的光亮透澈感。不同于诊所的微晶焕肤疗程，它以温和、天然的方式达到同样的焕肤效果——可深层洗净并且去除角质，卸除老废角质层，抚平肌肤表层因紫外线的伤害所造成的不平；匀亮、抚平肌肤，令肌肤呈现透亮光泽；长期使用会发现细纹、皱纹现象获得渐渐改善。
所有肌肤类型都适用：
EstéeLauder雅诗兰黛细嫩修护精华露
参考价格：RMB570/30MLRMB850/50ML
使用后毛孔即刻缩小1/3，肌肤顺滑细致；彻底清除老化角质，恢复肌肤自然健康的新陈代谢；深入毛孔溶解淤积杂质，紧致收缩已扩张的毛孔；改善肌肤油脂分泌状况，均匀肤色，令肌肤平滑匀透。
所有肌肤类型都适用：
曼秀雷敦能量爽肤水
参考价格：RMB599/120ml
提高肌肤保水力，富含卓越保湿成分透明质酸，优越锁水。焕醒肌肤活力，富含氨基酸微量元素复合物，补充多种矿物质，令肌肤充满活力。有效舒缓须后皮肤，富含绿茶抗氧化成分，并带清新气味让您格外舒适，舒缓须后皮肤。
适合肌肤偏油性的他：
我的美丽日志苹果多酚面膜
参考价格：RMB79/10片
苹果萃取协同芙蓉花酸精萃及柠檬萃取精华，发挥苹果美肌焕肤力量，温和代谢老旧角质，促进肌肤更新，透出苹果般的粉嫩光泽；搭配山金车、黄龙胆等植物精华，平衡油脂分泌，使肌肤洁净舒缓、毛孔细致！
适合肌肤偏油性的他：
Origins悦木之源挥别油光蒲葵控油洁面乳
参考价格：RMB220/150ML
彻底洁净及畅通毛孔，赋予肌肤清爽柔滑感觉。蒲葵、海藻与芦荟三步调控，即时去除脸部多余油脂及杂质；水杨酸有效褪去老旧角质及收紧毛孔；添加薄荷成份，使用后_凉爽快，让肌肤倍感清新舒爽。
适合肌肤偏干性的他：
Biotherm碧欧泉水动力保湿乳(中性/干性)
参考价格：RMB450/75ML
镇牌之宝口碑保湿，蕴含5000公升矿物温泉精华PTP，肌肤充沛畅饮。12小时长效保湿，肌肤持久水润不干燥，感觉舒适清爽。舒缓镇静男士肌肤，缓解发红紧绷等肌肤不适。
适合肌肤偏干性的他：
曼秀雷敦活力修护润肤乳
参考价格：RMB699/50g
修护干燥皮肤，富含珍贵乳木果油精华，即时舒缓肌肤干燥，用后舒爽无比。深层滋润，富含卓越保湿成分透明质酸及天然保湿因子，令肌肤持久健康润泽。柔滑温和，富含植物性角鲨烷，性质温和，使肌肤恢复弹性及柔软。
2、男士护肤方法
1、注重洗脸
男士们应该特别注重洗脸，如果是皮肤为干性的，建议使用冷热水交替的方式洗脸能够帮助刺激局部皮肤的血液循环，增强脸部肌肤的弹性；如果是皮肤偏油性的话可以先用热毛巾敷脸5分钟的样子再用香皂洗脸，如果可以建议洗脸后再进行脸部按摩，这样能够促进皮肤的血液循环，改善其营养状况；中性皮肤的话两种洗脸方式都可以。
2、坚持刮脸
男士们长有胡须，胡须是最容易附着尘埃、病菌等空气中的污物的，经常刮脸能够保持皮肤的洁净，有主意常保青春容颜。另外剃须之后皮肤会变得粗糙，这个时候最好是使用男士剃须后的保养品来帮助舒缓脸部皮肤，帮助毛孔自然收缩。
3、定期去角质
男士因为受到身体荷尔蒙的影响，其皮肤很容易毛孔粗大、油脂分泌旺盛，所以男士的皮肤也更容易沾染上空气中的污垢细菌，每周定期去角质能够帮助清除脸部死皮，促进皮肤对于保养品的吸收。一般男士们选用清爽型的磨砂膏进行去角质即可。
4、特别护理
男士要注意护理皮肤，除了日常要做好防晒工作之外，还可以坚持每周2次左右的面膜护理，帮助补充皮肤需要的营养，深层滋养肌肤。但是要注意的是男士应该使用男士专用面膜，混合使用女士面膜并不能起到好的保养效果。
5、保证睡眠
男士们也是可以睡“美容觉”的。保持充足的睡眠能够有效避免脸部皮肤肤色暗黄、眼袋显露、皱纹滋生等等问题。但是要注意男士们在保证充足睡眠的时候也不宜睡得过久，以免适得其反，另外睡前脸部的清洁工作能够让美容觉的效果更好。
6、均衡营养
男士们想要脸部皮肤看上去健康有活力，一定要注意饮食的营养均衡。特别是经常吗，忙于工作应酬的男士，饮食无节又或者有抽烟喝酒等不良习惯的人，一定要注意多吃蔬菜水果以及其他营养丰富的食物，如果可以最好戒烟戒酒。
干皮真的要注意，第一洗面奶一定要温和，其次是清洁。尽量用氨基酸洗面奶，否则很容易让自己皮肤变成敏感肌，干皮用洗面奶总结：这几款是我经常用的洗面奶，都是之前做了很多功课买的，都适合干皮哦，洗完后不紧绷！对洗面奶的要求是清洁力要强，其次是洗完后不紧绷！
1先介绍贵的cbp 洗面奶，这款洗面奶给我的第一感觉是真的很耐用，挤一点泡沫就很丰富，而且洗完后不紧绷，膏体像乳液质地一样，没有颗粒感！不愧是一分钱一分货，昧道也好闻麟目前我这里面最喜欢的一款
2FreePlus 洗面奶～这款是从日亚上海淘的，之前一直在用国内版的，这个牌子我买了有 5 支了！给人的感觉很温和！日本版的这个颗粒感要强些，泡沫比之前国内版的要丰富些，清洁力度还可以，平价党推荐这款应唯一一个缺点是真的很不耐用，很快就完了，每次我都是用到底后使劲挤，不相信它这么快就用完了。
3elta MO 洗面奶～买这款洗面奶的原因是据说它适合干皮，而且清洁能力强，最主要是耐用，一瓶能用很久，不像芙丽芳丝那公陕就用完！这款是我第三瓶了应它的质地是乳液状的，比 cpb要稀很多，但是泡沫也很丰富，如果想要耐用些
4推荐这款感最后一款是无印良品的，我这瓶是我用积分兑的，之前也做过功课，这款是泡沫型的，比管状那款要好用些，清洁力可以，也不紧绷，唯一不好也是我不会回购的一个原因：不小心进到眼睛后会很疼！真的很疼很疼！我洗脸总喜欢连眼周也洗，因为会画眼妆，眼部清洁后也会用洗面奶再洗一下！
欢迎分享，转载请注明来源：品搜搜测评网
微信扫一扫
支付宝扫一扫
