localStorage实现购物车数量单价和结算页面的实时同步
While there is life there is hope.
一息若存，希望不灭
用localStorage实现简易的购物车数量单价和结算页面两个页面的实时同步：
购物车页面：
实时更新页面，在input的value发生改变的时候存储localStorage
<script>
window.onload=function(){
var oNum=document.getElementById('num');
oNum.onchange=function(){
localStorage.apple=oNum.value;
};
};
</script>
</head>
<body>
苹果：<input type="number" id="num" max="10" min="0" required step="2"/>
单价：20元/个
</body>
结算页面：
利用onstorage事件实时获取购物车页面实时存储的数据，并计算展示实时的总价格，当然我们可以继续完善这个页面
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
window.onstorage=function(ev){
oDiv.innerHTML='共消费￥'+localStorage.apple*20+'元';
};
};
</script>
</head>
<body>
<div>共消费￥元</div>
</body>
localStorage实现购物车数量单价和结算页面的实时同步的更多相关文章
- localStorage实现购物车数量单价和总价实时同步（二）
利用localStorage实时显示购物车小计和总价页面显示: 和昨天的原理相同,本地存储同时实时循环计算总价之和,注意循环时候的先清空再计算 Success is getting what you ...
- day85:luffy:购物车根据有效期不同切换价格&购物车删除操作&价格结算&订单页面前戏
目录 1.购物车有效期切换 2.根据有效期不同切换价格 3.购物车删除操作 4.价格结算 5.订单页面-初始化 1.购物车有效期切换 1.关于有效期表结构的设计 1.course/models.py ...
- 基于rest_framework和redis实现购物车的操作，结算，支付
前奏: 首先,要在主机中安装redis,windows中安装,下载一个镜像,直接进行下一步的安装,安装成功后,在cmd中输入redis-cli 安装python的依赖库: redis 和 ...
- day86:luffy:前端发送请求生成订单&结算页面优惠劵的实现
目录 1.前端发送请求生成订单 1.前端点击支付按钮生成订单 2.结算成功之后应该清除结算页面的数据 3.后端计算结算页面总原价格和总的真实价格并存到数据库订单表中 2.优惠劵 1.准备工作 2.前端 ...
- localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...
- JAVAEE——宜立方商城12：购物车实现、订单确认页面展示
1. 学习计划 第十二天: 1.购物车实现 2.订单确认页面展示 2. 购物车的实现 2.1. 功能分析 1.购物车是一个独立的表现层工程. 2.添加购物车不要求登录.可以指定购买商品的数量. 3.展 ...
- web框架实现购物车数量加减
企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...
- js实现购物车数量的增加与减少，js实现购物车数量的自增与自减
js实现购物车数量的增加与减少,js实现购物车数量的自增与自减 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- vue-实现一个购物车结算页面
这是路由之间的跳转,传递值最好采用传参,而不是用$emit和$on,不起作用 如果实在一个页面中的兄弟组件,可以使用$emit和$on 中间件,eventBus.js 放在components目录下面 ...
随机推荐
- RHEL7软件包管理
本文介绍RHEL7的软件包管理 RHEL7下主要有RPM和YUM这两种包管理: YUM使用简单但需要联网,YUM会去网上的YUM包源去获取所需要的软件包并获取该包依赖的其他包 RPM的需要的操作精度比 ...
- sublimeText插件推荐
工欲善其事必先利其器.sublimeText是前端开发工程师的一把利器,它的优点包含: 随时保留文件的修改 Goto Anything,智能搜索; 简单全面的插件体系; 代码地图; 快速启动 ... ...
- SAP中给当前指定的活动用户发系统信息的函数
函数名:TH_POPUP 输入集团.当前在线用户.Message即可
- JS常用的三种匿名函数
第一种: var f1=function(p1,p2){ return p1+p2; };//将函数赋值给一个变量 alert(f1(1,3)); 匿名函数没法调用,只能赋值给一个变量,由于是赋值语句 ...
- 通过重写OnScrollListener来监听RecyclerView是否滑动到底部
为了增加复用性和灵活性,我们还是定义一个接口来做监听滚动到底部的回调,这样你就可以把它用在listview,scrollView中去. OnBottomListener package kale.co ...
- 深入理解Android的startservice和bindservice
一.首先,让我们确认下什么是service? service就是android系统中的服务,它有这么几个特点:它无法与用户直接进行交互.它必须由用户或者其他程序显式的启动.它的优先级比 ...
- iOS 利用CoreLocation和MapKit开发搜索附近的商场功能
代码如下: //// SearchNearbyShopViewController.m// SearchNearbyShop//// Created by Linzhixiao on 16/2/ ...
- IOS之UI--自定义按钮实现代理监听点击事件
前言: Objective-C提供的按钮监听事件的方法是 不含参数的监听方法 [button实例对象 addTarget:self action:@selector(func) forControlE ...
- C# Socket和TCP连接的区别
网络通信七层参考模型介绍: 物理层: HUB,网线 链路层: MAC,ARP,交换机 网络层:IP,ICMP,IGMP,路由器 传输层: TCP,UDP 会话层: HTTP,SMTP,FTP,POP3 ...
- 窗体DataGridView控件中按回车键时,单元格向下移动,如何能改成向右移动
方法一:protected override void OnKeyUp(System.Windows.Forms.KeyEventArgs e) { base.OnKeyUp(e); if (e.Ke ...