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. chenxi的html学习笔记

    0.本文主体源自:http://www.cnblogs.com/coco1s/p/4034937.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.1.浏览器内核: 1.ie:triden ...

  2. ALV常用参数详细描述

    调用功能模块: CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY' EXPORTING i_interface_check        = ''               ...

  3. 正确匹配URL的正则表达式

    网上流传着多种匹配URL的正则表达式版本,但我经过试验,最好用的还是从stackoverflow上查到的: (https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_| ...

  4. 深入理解Android的startservice和bindservice

    一.首先,让我们确认下什么是service?         service就是android系统中的服务,它有这么几个特点:它无法与用户直接进行交互.它必须由用户或者其他程序显式的启动.它的优先级比 ...

  5. iOS 通过二进制判断图片类型

    + (NSString *)typeForImageData:(NSData *)data { uint8_t c; [data getBytes:&c length:1]; switch ( ...

  6. HTML列表元素

    HTML定义了3类列表: 1.有序列表(通常用数字编号) 2.无序列表(通常前面加原点) 3.自定义列表(列表项目,带有集成的定义) 有序列表和无序列表均为列表中的每一项使用列表项元素(<li& ...

  7. IOS之KVC和KVO(未完待续)

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  8. Swift面向对象基础（上）——Swift中的类和结构体（上）

    学习来自<极客学院> import Foundation //1.定义类和结构体 /* [修饰符]calss 类名{ 零到多个构造器 零到多个属性 零到多个方法 零到多个下标 } 修饰符可 ...

  9. win7共享文件夹给局域网

    1.设置共享   2.关闭"需要密码访问"          

  10. vi, vim 基本使用（1）

    本文介绍了vi (vim)的基本使用方法,但对于普通用户来说基本上够了!vi 编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和 ...