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实现购物车数量单价和结算页面的实时同步的更多相关文章

  1. localStorage实现购物车数量单价和总价实时同步（二）

    利用localStorage实时显示购物车小计和总价页面显示: 和昨天的原理相同,本地存储同时实时循环计算总价之和,注意循环时候的先清空再计算 Success is getting what you ...

  2. day85:luffy:购物车根据有效期不同切换价格&购物车删除操作&价格结算&订单页面前戏

    目录 1.购物车有效期切换 2.根据有效期不同切换价格 3.购物车删除操作 4.价格结算 5.订单页面-初始化 1.购物车有效期切换 1.关于有效期表结构的设计 1.course/models.py ...

  3. 基于rest_framework和redis实现购物车的操作，结算，支付

    前奏: 首先,要在主机中安装redis,windows中安装,下载一个镜像,直接进行下一步的安装,安装成功后,在cmd中输入redis-cli 安装python的依赖库: redis     和   ...

  4. day86:luffy:前端发送请求生成订单&结算页面优惠劵的实现

    目录 1.前端发送请求生成订单 1.前端点击支付按钮生成订单 2.结算成功之后应该清除结算页面的数据 3.后端计算结算页面总原价格和总的真实价格并存到数据库订单表中 2.优惠劵 1.准备工作 2.前端 ...

  5. localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车

    localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...

  6. JAVAEE——宜立方商城12：购物车实现、订单确认页面展示

    1. 学习计划 第十二天: 1.购物车实现 2.订单确认页面展示 2. 购物车的实现 2.1. 功能分析 1.购物车是一个独立的表现层工程. 2.添加购物车不要求登录.可以指定购买商品的数量. 3.展 ...

  7. web框架实现购物车数量加减

    企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...

  8. js实现购物车数量的增加与减少，js实现购物车数量的自增与自减

    js实现购物车数量的增加与减少,js实现购物车数量的自增与自减 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  9. vue-实现一个购物车结算页面

    这是路由之间的跳转,传递值最好采用传参,而不是用$emit和$on,不起作用 如果实在一个页面中的兄弟组件,可以使用$emit和$on 中间件,eventBus.js 放在components目录下面 ...

随机推荐

  1. js事件绑定

    事件绑定,常见的是odiv.onclick=function(){..........};  这种方式绑定事件太单一,如果绑定多个,那么最后一个事件会覆盖掉之前的,也就是说只执行最后一次绑定的事件,这 ...

  2. parseInt第二个参数详解

    前阵子在stackOverflow上看到两个这样的问题: 为什么parseInt(8,3) == NaN,parseInt(16,3) == 1? 为什么parseInt('dsff66',16) = ...

  3. 极光推送和百度lbs android sdk一起使用使用proguard 混淆的问题

    主要是http得类被混淆后,导致apk定位失败.经过确认,保留apache 的http类就好了 # To enable ProGuard in your project, edit project.p ...

  4. 关于Kb/s，KB/s的一些知识

    我们常见的有KB/s和Kb/s两种 1,Kb/s也就是Kbps.这里面小写的b是bit(比特)的缩写,是位的意思.一个位就是二进制的0或者1.一般代表传输单位,p就是/号,s是秒.bps就是b/s=比 ...

  5. IOS 网络浅析－（四 get&post）

    网络请求默认是get 网络请求有很多种:GET查  POST改  PUT增  DELETE删 HEAD 在平时开发中主要用的 是 get 和 post. get 获得数据 (获取用户信息) get 请 ...

  6. iOS提醒用户进入设置界面进行重新授权通知定位等功能

    iOS 8及以上版本最不为人知的一个特点是与应用设置的深层链接,用户可以根据APP的需要授权启用位置.通知.联系人.相机.日历以及健康等设置. 大多数应用程序仅仅是弹出一个包含操作指令的警示窗口,如“ ...

  7. iOS label根据显示内容自适应大小

    - (void)setupLabel { //准备工作 UILabel *textLabel = [[UILabel alloc] init]; textLabel.font = [UIFont sy ...

  8. 建立JDBC的环境配置和相关下载（Mac）

    首先已经安装好XMAPP和Workbench. 1.打开MySQL,然后打开Workbench: 然后我们需要下载MySQL的JDBC驱动. 1.进入MySQL官网:http://dev.mysql. ...

  9. Wing IDE 5 的破解

    Wing IDE 百度百科 1.安装好Python,已测的是Python 2.7.10: 2.新建一个py文件CalcActivationCode.py(名字自己随便取): 3.CalcActivat ...

  10. java控制台输入

    一.java控制台输入 java控制台输入有如下几个方法 1.JDK 1.4 及以下版本读取的方法 JDK 1.4 及以下的版本中要想从控制台中输入数据只有一种办法,即使用System.in获得系统的 ...