使用JS实现当当购物车结算页面

实现效果:

1、添加、减少商品数量，总价随之改变；

2、点击删除，删除所选的商品；

3、点击关闭，关闭当前页面。

实现的效果图:

以下就是使用代码:

CSS:

            #imgs {width: 100px;height: 150px;}.box {width: 800px;height: 500px;border: 1px solid gray;margin: 0 auto;}#clo {float: right;background-color: red;}#settlement {float: right;background-color: red;}

HTML:

<div class="box"><img src="./images/dd_logo.jpg" alt=""><button id="clo">关闭</button><table border="0" cellspacing="0" cellpadding="10"><thead><tr><th>商品图片</th><th>商品信息</th><th>单价</th><th>数量</th><th>总价</th><th>操作</th></tr></thead><tbody><tr><td><img id="imgs" src="./images/dog.jpg" alt=""></td><td>我和狗狗活了下来</td><td>￥21.90</td><td><button class="active">-</button><input type="text" value="1"><button class="active">+</button></td><td>21.90</td><td><button class="del">移入收藏<br>删除</button></td></tr><tr><td><img id="imgs" src="./images/mai.jpg" alt=""></td><td>灰霾来了怎么办</td><td>￥24.00</td><td><button class="active">-</button><input type="text" value="1"><button class="active">+</button></td><td>24.00</td><td><button class="del">移入收藏<br>删除</button></td></tr></tbody><tfoot><tr><td colspan="6">总价：<button id="sum">结算</button></td></tr></tfoot></div>

JS:

//获取所有加减buttonvar _buttons = document.querySelectorAll(".active");_buttons.forEach(function(btn) {btn.onclick = function() {//实际参数cal(this, this.innerText);}})//单个tr的小计// tag：点击的按钮// params:加号或减号function cal(tag, params) {//数量var num = tag.parentNode.children[1].value * 1;//改变数量num = eval(num + params + 1);if (num < 0) {alert("当前数量已经为0!");return;}//从新放入inputtag.parentNode.children[1].value = num;//单价var unitPrice = tag.parentNode.previousElementSibling.innerText;unitPrice = unitPrice.slice(1);//总计var total = num * unitPrice;total = total.toFixed(2); //保留两位小数tag.parentNode.nextElementSibling.innerText = total;//重新计算总计sum();}//总计var _dels = document.querySelectorAll("tbody .del");var _sum = document.querySelector("#sum");function sum() {var _trs = document.querySelectorAll("tbody tr");var sum = 0; //总计Array.from(_trs).forEach(function(tag) {console.log(tag.children[4]);//获取小计var tal = tag.children[4].innerText * 1;sum += tal;})_sum.innerText = sum;}_dels.forEach(function(tag) {tag.onclick = function() {if (confirm("确认删除吗")) {tag.parentNode.parentNode.remove();}sum();}})

使用JS实现当当购物车结算页面相关推荐

怎样编写html购物车结算页面,原生JS实现购物车结算功能
原生JS实现购物车结算功能 @charset "utf-8"; *{margin:0;padding:0;list-style-type:none;} a{color:#666;t ...
商品结算页面html代码,前端开发jQuery购物车结算页面代码
/p> < 购物车结算 .shop-total, .all-total { height: 50px; line-height: 50px; font-weight: bold; colo ...
品优购项目--购物车结算页面
效果图 HTML部分 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
用JavaScript+html+css制作当当购物车
cartStyle.css body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;} ul,li,ol{list-style: none;} .content{ ...
jq实现购物车结算和数量更改功能
这是个仿碧欧泉官网的购物车结算页面. 这里仅提供思路和我的代码作参考,代码具体需要看自己的html界面. 其中的难点在于数量的更改以及价格的结算.当出现一个商品时的结算是较为简单的.但是若有多个商品, ...
luffcc项目-11-购物车实现，切换有效期选项、购物车商品的删除操作，结算页面，订单的生成
购物车实现一.切换有效期选项 1.改变课程有效期要实现课程有效期的计算,则必须我们要清楚一个课程可以有1到多个有效期选项.默认保存在课程模型中的价格如果有值,则这个值是永久有效的购买价格.如果有别 ...
制作简易的当当购物车页面
需求说明: 单击"半闭"按钮时,关闭当前页面购物车页面单击"移入收藏"弹出收藏提示单击"删除"弹出确认删除提示单击"结算&q ...
java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
html页面判断是否登录,egg(103)--egg之定义公共的中间件判断用户是否登录以及去结算页面制作...
判断用户是否登录中间件 app/middleware/userauth.js module.exports = (options, app) => { return async functio ...

使用JS实现当当购物车结算页面

实现效果:

实现的效果图:

以下就是使用代码:

CSS:

HTML:

JS:

使用JS实现当当购物车结算页面相关推荐

最新文章

热门文章