前端JS 购物车的加减数量、计算总价

前端页面用JS技术对购物车页面添加功能

前端页面

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>完善当当购物车页面</title><link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body><div class="content"><div class="logo" ><img src="data:images/dd_logo.jpg"><span id="close">关闭</span></div><div class="cartList"><ul><li>¥<input type="text" name="price" value="21.90"></li><li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li><li id="price0">¥21.90</li><li><p>移入收藏</p><p>删除</p></li></ul><ul><li>¥<input type="text" name="price" value="24.00"></li><li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li><li id="price1">¥24.00</li><li><p>移入收藏</p><p>删除</p></li></ul><ol><li id="totalPrice">&nbsp;</li><li><span onclick="account()">结 算</span></li></ol></div>
</div>
<script type="text/javascript" src="js/dang.js"></script>
</body>
</html>

js脚本页面

//关闭
document.getElementById("close").onclick = function() {if(confirm("是否确认关闭")){window.close();}
}
//得到减号
var minus = document.getElementsByName("minus");
//得到加号
var plus = document.getElementsByName("plus");
//得到数量值
var amount = document.getElementsByName("amount");
//获取金额
var price = document.getElementsByName("price");//一开始载入页面时显示的总金额
var s = 0;
for(let i = 0; i < amount.length; i++) {s += Math.round(price[i].value * amount[i].value * 100) / 100;
}
document.getElementById("totalPrice").innerHTML = s;//当点击加号时
function plusa(index) {//得到商品数量 数量之加一amount[index].value = parseInt(amount[index].value) + 1;//重新计算金额数document.getElementById("price" + index).innerHTML = "¥" + Math.round(price[index].value * amount[index].value * 100) / 100;total();
}
//当点击减号时
function minusa(index) {if(amount[index].value == 1) {alert("不能再减了~~");return;}amount[index].value = parseInt(amount[index].value) - 1;document.getElementById("price" + index).innerHTML = "¥" + Math.round(price[index].value * amount[index].value * 100) / 100;total();
}
//计算总额
function total() {let sum = 0;for(let i = 0; i < amount.length; i++) {sum += Math.round(price[i].value * amount[i].value * 100) / 100;}document.getElementById("totalPrice").innerHTML = sum;return sum;
}//对第一个加号进行操作
plus[0].onclick = function() {plusa(0);
}
minus[0].onclick = function() {minusa(0);
}
//对第二个加号进行操作
plus[1].onclick = function() {plusa(1);
}
minus[1].onclick = function() {minusa(1);
}//一共有多少数量
function amounts(){var shu = 0;for (let i=0; i<amount.length; i++) {shu += parseInt(amount[i].value);}return shu;
}//点击结算
function account(){confirm("您本次购买的商品信息如下: \n\n"+ "商品名称: 白岩松:白说、岛上书店; \n"+ "商品数量: "+ amounts() +"件; \n"+ "商品总计: "+ total() +"; \n"+ "运费: 0元; \n\n"+ "请确认以上信息是否有误!!!");
}

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("../images/shoppingBg.jpg") no-repeat;height: 414px;overflow: hidden;
}
.cartList ul{float: right;width: 450px;
}
.cartList ul:nth-of-type(1){margin-top: 125px;
}
.cartList ul:nth-of-type(2){margin-top:70px;
}
.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: 60px;
}
.cartList ol li{float: left;
}
.cartList ol li:nth-of-type(1){color: #ff0000;width: 120px;
}
.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;}

图片

前端JS 购物车的加减数量、计算总价相关推荐

JavaScript学习（十六）—实现购物车加减数量，计算总金额
JavaScript学习(十六)-实现购物车加减数量,计算总金额代码如下: <table border="2" cellspacing="0" soli ...
js实现日期加减获取年龄
//js实现日期加减获取年龄var birthday=new Date('2021-01-01'.replace(/-/g, "\/")); //传入时间var d=new Dat ...
android 购物车数量加减,自定义View 购物车加减数量
首先我们需要的是加(botton) 减 (botton) 输入数量(editText) [这里我还设置了最大值] 然后对加减按钮设置监听,点击对ed ...
js对日期加减指定天、时、分、秒
在前端编程中,经常需要对日期进行加减天.时.分.秒的操作,例如使用JS实现日期的倒计时.类似于C#中的AddDays.AddHours等,下面介绍在js中对日期加减的方法. 例如:当前日期为 2016 ...
html5购物车数字加减,jQuery实现购物车数字加减效果
我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文将介绍常见的几种使用spi ...
html5购物车数字加减,jQuery实现购物车数字加减效果_jquery
我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文将介绍常见的几种使用spi ...
java 整数加减_Java计算长整数加减（字符串表示）
1 /** 2 * Created by areful on 2019/11/133 */ 4 public classCalcStringNumber {5 private static final ...
使用js实现日期加减
使用js实现日期年月日的加减,自动处理闰年: function setDateTest() {addOrReduceDate("D","2019-6-15 14:45:1 ...
python,时间加减,时间计算,时间格式化,时间提取汇总
From: http://bbs.chinaunix.net/thread-1371304-1-1.html 不知道这么写题目会不会让人误会,不过这个题目可以让从搜索引擎上搜索问题的菜鸟们一下找到这篇 ...

前端JS 购物车的加减数量、计算总价

前端JS 购物车的加减数量、计算总价相关推荐

最新文章

热门文章