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. SarePoint Powershell Add user to Group

    $FromGroupnames = "001总经理","010101管理本部" $ToGroupname = "test" $SPWeb = ...

  2. 带缓存的输入输出-bufferedinputstream类与bufferedoutputstream类

    package hengzhe.cn.o1; import java.io.*; /* * 带缓存的输入输出-bufferedinputstream类与bufferedoutputstream类 * ...

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

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

  4. Objective-C 代码规范（Code Style）

    我们写出来的代码会给很多人看,为了使代码清晰简洁,方便阅读理解,都会统一遵从一定的代码规范,Objective-C同样如此. 主要参考规范: 1.Google Objective-C Style Gu ...

  5. SqlServer int型转varchar型 出现*号

    今天调一个bug,错误提示执行语句 * 附近有语法错误,看了存储过程半天没啥反应,我就更本没有* ．打印了一下语句发现 where Mor_Id=* 仔细一看set @sqlupdate+=' whe ...

  6. Xcode6.4注册URL Scheme步骤详解

    URL Scheme的作用 我们都知道苹果手机中的APP都有一个沙盒,APP就是一个信息孤岛,相互是不可以进行通信的.但是iOS的APP可以注册自己的URL Scheme,URL Scheme是为方便 ...

  7. 27个提升效率的iOS开源库推荐

    DZNEmptyDataSet(UI,空表格视图解算器) PDTSimpleCalendar(UI,drop-in日历组件) MagicalRecord(实施活跃记录模式的Core Data助手) C ...

  8. [转]Linux下权限掩码umask

    本文转自:http://www.cnblogs.com/123-/p/4188942.html ---------------------------------------------------- ...

  9. cocos2d-x之多个移动的小球

    MoveBalls.hpp: #ifndef MoveBalls_hpp #define MoveBalls_hpp #include <stdio.h> #include "c ...

  10. 001.linux下clock()检测程序运行时间

    #include <stdio.h> #include <time.h> int main() { int i; int k; clock_t start,end; //clo ...