localStorage实现购物车数量单价和总价实时同步（二）
利用localStorage实时显示购物车小计和总价页面显示：
和昨天的原理相同，本地存储同时实时循环计算总价之和，注意循环时候的先清空再计算
Success is getting what you want, happiness is wanting what you get.
成功是得其所想，幸福是想其所得！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
document.addEventListener('DOMContentLoaded',function(){
var aInp=document.querySelectorAll('input');
var oPer=document.getElementsByTagName('em');
var oStotal=document.getElementsByTagName('i');
var oDiv=document.getElementById('div1'); for(var i=0;i<aInp.length;i++){
(function(index){
//当aInp中的数字为0时清除localsotage中的数据
if(aInp[index].value=='0'){
delete localStorage[index];
}
//当aInp中数字发生变化的时候存储localstorage
aInp[index].onchange=function(ev){
localStorage[index]=parseFloat(oPer[index].innerHTML)*aInp[index].value;
oStotal[index].innerHTML='小计'+Number(localStorage[index]);
//获取localStorage并显示在总价中
var sum=0;
for(var name in localStorage){
sum+=Number(localStorage[name]);
oDiv.innerHTML='总价:'+sum;
}
};
})(i);
}
},false);
</script>
</head>
<body>
<div>
<p>商品名称：苹果</p>
<input type="number" min="0" value="0">
<em>3$</em><br><br>
<i></i>
</div>
<div>
<p>商品名称:橘子</p>
<input type="number" min="0" value="0">
<em>6$</em><br><br>
<i></i>
</div>
<div>
<p>商品名称：香蕉</p>
<input type="number" min="0" value="0">
<em>9$</em><br><br>
<i></i>
</div>
<div id="div1">0</div>
</body>
</html>
localStorage实现购物车数量单价和总价实时同步（二）的更多相关文章
- localStorage实现购物车数量单价和结算页面的实时同步
While there is life there is hope.一息若存,希望不灭 用localStorage实现简易的购物车数量单价和结算页面两个页面的实时同步: 购物车页面:实时更新页面,在i ...
- localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...
- 071——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 070——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- web框架实现购物车数量加减
企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...
- js实现购物车数量的增加与减少，js实现购物车数量的自增与自减
js实现购物车数量的增加与减少,js实现购物车数量的自增与自减 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- lsyncd 实时同步
1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案,原先使用的是inotify + rsync,但随着文件数量的增大到100W+,目录下的 ...
- 烂泥：rsync与inotify集成实现数据实时同步更新
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上篇文章我们介绍了如何使用rsync同步文件,这篇文章我们再来介绍下,如何把rsync与inotify集成实现数据的实时同步. 要达到这个目的,我们需要 ...
- rsync+inotify实现实时同步案例--转
转自:http://chocolee.blog.51cto.com/8158455/1400596 随着应用系统规模的不断扩大,对数据的安全性和可靠性也提出的更好的要求,rsync在高端业务系统中也逐 ...
随机推荐
- LALR(1)语法分析生成器--xbytes
0.概述: 看了编译器龙书和虎书后,自己手动写了一个LALR(1)语法分析生成器,使用的语法文件格式和lemon的差不多. 程序里面很多的算法也都是摘录自虎书,龙书虽然讲的很详细,但是真正动手写的时候 ...
- 关于一个js连续赋值问题之我见(词略穷,见谅)
前几天在搜索面试题时发现了这么一段代码,执行完后感觉完全不与所想的一样 var a = { n : 1 }; var b = a; a.x = a = {n : 2}; console.log(a.x ...
- ArcGIS制图之Maplex自动点抽稀
制图工作中,大量密集点显示是最常遇到的问题.其特点是分布可能不均匀.数据点比较密集,容易造成空间上的重叠,影响制图美观.那么,如果美观而详细的显示制图呢? 主要原理 Maplex中对标注有很好的显示控 ...
- 参加2015年TOP100会议的零散笔记
2015年出差很少,感到整个技术都已经荒废了,收到12月份TOP100的会议通知后,还是去充点电吧,不然心慌啊.对于软件大会这种大杂烩式的会议已经没有多少兴趣了,看看这个TOP100组织得有何不同? ...
- 【原/转】UITableview性能优化总结
UITableView作为ios中使用最频繁的控件之一,其性能优化也是常常要面对的,尤其是当数据量偏大并且设备性能不足时.本文旨在总结tableview的几个性能优化tips,并且随着认识的深入,本文 ...
- 【转】从viewController讲到强制横屏，附IOS5强制横屏的有效办法
文字罗嗦,篇幅较长,只需营养可直接看红字部分. 一个viewController的初始化大概涉及到如下几个方法的调用: initWithNibName:bundle: viewDidLoad view ...
- iOS-多线程之NSThread详解
前言 线程是用来执行任务的,线程彻底执行完任务A才能去执行任务B.为了同时执行两个任务,产生了多线程. 我打开一个视频软件,我开辟一个线程A让它执行下载任务,我开辟一个线程B,用来播放视频.我开辟两个 ...
- Http协议中 常用的参数应用
1 请求来自哪一个页面 request.getHeader("referer"); 在购买页,通过a标签进入AddressAction中,地址保存后,需要跳到原先的页面. 另外,另 ...
- Erlang 的新数据结构 map 浅析
更新:文中示例代码直接从Joe的新版 Erlang 书中摘抄而来,其中模式匹配的代码有错误,现已纠正.应该用 := 匹配字段,而不是 => . 即将发布的 Erlang 17 最大变化之一包括新 ...
- Android开源项目汇总【转】
主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.ProgressBar.TextView ...