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在高端业务系统中也逐 ...
随机推荐
- 如何解决cellIndex在IE下兼容性问题
在不久前的项目中,涉及到一个表格数据展示在IE下出现兼容性问题.经过一段时间的排查,居然是一个cellIndex属性导致的. cellIndex表示返回一行的单元格集合中单元格的位置索引. 例子: & ...
- virtualbox迁移至vcenter/vmware workstation
参考文献: http://www.itsecurenet.com/virtualbox-ova-to-vsphere-ovf/ http://www.techrepublic.com/blog/win ...
- EL表达式概述
E L(Expression Language) 目的:为了使JSP写起来更加简单.表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 JSP 中简化表达式的方法. ...
- iptables基本操作
一.基本操作 #启动防火墙 service iptables start #停止防火墙 service iptables stop #重启防火墙 service iptables restart #查 ...
- JAVA基础学习day23--GUI基础
一.GUI概述 1.1.GUI概述 Graphical User Interface(图形用户接口) 用图形的方式,来显示计算机操作的界面, CLI: Command line User Interf ...
- 【原】iOSCoreAnimation动画系列教程（一）：CABasicAnimation【包会】
本文的最新版本已经发布在简书[编程小翁]上,强烈建议到上查看简书,[点击这里跳转]. 在iOS中,图形可分为以下几个层次: 越上层,封装程度越高,动画实现越简洁越简单,但是自由度越低:反之亦然.本文着 ...
- iOS开发之网络编程--4、NSURLSessionDataTask实现文件下载(离线断点续传下载) <进度值显示优化>
前言:根据前篇<iOS开发之网络编程--2.NSURLSessionDownloadTask文件下载>或者<iOS开发之网络编程--3.NSURLSessionDataTask实现文 ...
- tair源码分析——leveldb新增的CompactRangeSelfLevel过程
tair是一个分布式KV存储引擎,当新增机器或者有机器down掉的时候,tair的dataserver会根据ConfigServer生成的新的对照表进行数据的迁移和清理.在数据清理的过程中就用到了在t ...
- docker-1 初识docker
五分钟认识docker 什么是docker? 把他想象成一个用了一种新颖方式实现的超轻量虚拟机,在大概效果上也是正确的.当然在实现的原理和应用上还是和VM有巨大差别的,并且专业的叫法是应用容器(App ...
- SQL 报错信息整理及解决方案（持续更新）
整理一下自己遇见过的 SQL 各种报错信息及相应解决方法,方便以后查阅,主要平台为 Oracle: ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值: 原因:插入操作时,数据大于字段 ...