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判断客户端平台

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Q：解决每天第一次打开MSCRM系统展示慢的问题

    问题:第天第一次打开系统时,需要加载很长时间,基本为1分多钟,而第二次打开只需5秒. 解决方案:利用IIS中的Session. 一.打开IIS,选择打开服务器功能中“Session State”. 二 ...

  3. arcgis python 更新顺序号

    i = 0def myFun(): global i i=i +1 return i myFun() ========================== accumulate(  ) total = ...

  4. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q40-Q44)

    Question 40You need to send a single value from a consumer Web Part to a provider Web Part.Which int ...

  5. android 保存 用户名和密码 设置等应用信息优化

    1.传统的保存用户名,密码方式 SharedPreferences Editor editor = shareReference.edit(); editor.putString(KEY_NAME,& ...

  6. 记录一个调了半天的问题：java.lang.SecurityException: Permission denied (missing INTERNET permission?)

    Move the <uses-permission> elements outside of <application>. They need to be immediate ...

  7. IOS字典NSDictionary与NSMutableDictionary知识点

    字典中的元素是以键值对的形式存储的,键值对的键和值,都是任意的对象,但是键往往使用字符串,字典存储对象的地址没有顺序,字典的遍历分为:键的遍历和值的遍历,字典与数组的区别:数组讲究顺序,而字典可以快速 ...

  8. 错误：StrictMode $ AndroidBlockGuardPolicy.onNetwork

    you have to insert 2 lines "StrictMode" on MainActivity Class, example's below: 在onCreate( ...

  9. ReactiveCocoa入门教程：第二部分

    翻译自:http://www.raywenderlich.com/62796/reactivecocoa-tutorial-pt2 原文链接: ReactiveCocoa 是一个框架,它允许你在你的i ...

  10. 【转】self.myOutlet=nil、viewDidUnload、dealloc的本质剖析

    对于iphone开发人员来说,内存管理是极为重要的技巧,哪怕程序的功能再强大,设计再漂亮,如果内存控制不好,也难逃程序莫名退出的噩运,这与网页开发是完全不同的. 内存控制里面有很多门道,在这里分析一下 ...