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目录下面 ...
随机推荐
- 纯CSS仿windows系统loading效果
今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线(cubic-bezier)的过渡效果,如下所示 sp ...
- js实现点击<li>标签弹出其索引值
据说这是一道笔试题,以下是代码,没什么要文字叙述的,就是点击哪个<li>弹出哪个<li>的索引值即可: <html> <head> <style& ...
- 关于原生的Javascript
JQuery是个好工具,它做了太多的事. 以至于让人渐渐忘记原生的JS该怎么写了,导致连为了用个DOM选择器或者Ajax就直接加个JQuery,确实,JQuery太方便了. 坏处: 由于JQuery的 ...
- ASP.NET验证码生成与识别
一般验证码页面只输出一个图片而不进行其他业务处理,所以验证码一般放在一般处理程序(httpHandler)页面中,而如果将验证码生成代码放到一般处理程序中,要将生成验证码保存在Session中,这里我 ...
- gulp学习
中文文档:http://www.gulpjs.com.cn/docs/api/ 一.gulp的API 1 gulp.src(); 这个方法是用来获取流的,但这个流里的内容不是原始的文件流,而是一个虚拟 ...
- 使用Reflexil修改类库
因为公司一个项目需要修改PPS的颜色,于是反编译了PPS的代码发现,作者很不厚道的把所有着色都HardCode在代码里 private static void InsertDefaultSeriesC ...
- Sharepoint学习笔记—习题系列--70-573习题解析 -(Q85-Q87)
Question 85You create a Microsoft .NET Framework console application that uses a Representational St ...
- windows 80端口被占用的解决方法
参考文献: 文献1: http://wenku.baidu.com/view/af4681bcfd0a79563c1e7289.html 文献2: http://www.2cto.com/os/201 ...
- vsphere vcenter server下安装ubuntu的vmwaretools
0.参考文献 百度经验:这里面是以redhat桌面版为实例进行介绍的,我的环境是ubuntu-server,虽然不一样,也可以参考 http://jingyan.baidu.com/article/2 ...
- 【读书笔记】iOS-GCD-系统提供的dispatch方法
系统提供的dispatch方法如下: //系统提供的dispatch方法 //后台执行: dispatch_async(dispatch_get_global_queue(0, 0), ^{ // s ...