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目录下面 ...
随机推荐
- DigitalOcean上SSH Key的创建（附DigitalOcean邀请）
DigitalOcean是一家云主机商家,最低配置512M内存,20G的SSD,每月只有5刀.半个月前刚刚在这上面买了一个VPS,创建Droplet的时候看见创建SSH Key的时候就有点懵,不知道这 ...
- 如何rename sqlserver database
Problem Sometimes there is a need to change the name of your database whether this is because the or ...
- [ html canvas globalCompositeOperation ] canvas绘图属性 设置合成图像如何显示 属性演示
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- VS 2013打开.edmx文件时报类型转换异常
供应商提交了项目代码,但在我的电脑上打开项目编译时一直报Entityframework 的 .edmx文件转换异常,而无法通过编译. 分析后认为可能是entityframework的类库不够新 ...
- Android 优秀的开源框架整理
第一部分:系统架构 thinkAndroid https://github.com/white-cat/ThinkAndroid ThinkAndroid是一个免费的开源的.简易的.遵循Apache2 ...
- 基础学习day09--内部类
一.内部类 1.1.内部类概念 定义在一个类内部中的另一个类,被称为内部类 特点: 可以直接访问,内部类的外部类中的,成员属性和方法(包含-private) 外部类要访问内部类中的成员和方法,需要先建 ...
- android开发之——获取相册图片和路径
Android开发获取相册图片的方式网上有很多种,这里说一个Android4.4后的方法,因为版本越高,一些老的api就会被弃用,新的api和老的api不兼容,导致出现很多问题. 比如:managed ...
- C语言中的字符和字符串
C语言在中常常出现字符和字符串,而一串字符或者字符串其实就是数组 字符数组的定义 char arr[]={'h','e','l','l','o','\0'}; 而定义字符串: char arr1[]= ...
- 找不到或无法加载主类 org.codehaus.plexus.classworlds.launcher.Launcher
配置PATH的时候,把$PATH写在后面,比如下面这样 export PATH=$MAVEN_HOME/bin:$PATH
- Objective-C Reflection（Objective-C 反射机制）实用随笔笔记（持续更新）
前言:本篇文章就"Objective-C 反射机制"使用方面进行叙述,不会涉及太多理论论述,因为"Objective-C 反射机制"理论论述在网上搜索一大把,本 ...