利用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实现购物车数量单价和总价实时同步（二）的更多相关文章

  1. localStorage实现购物车数量单价和结算页面的实时同步

    While there is life there is hope.一息若存,希望不灭 用localStorage实现简易的购物车数量单价和结算页面两个页面的实时同步: 购物车页面:实时更新页面,在i ...

  2. localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车

    localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...

  3. 071——VUE中vuex之使用getters计算每一件购物车中商品的总价

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 070——VUE中vuex之使用getters计算每一件购物车中商品的总价

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. web框架实现购物车数量加减

    企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...

  6. js实现购物车数量的增加与减少，js实现购物车数量的自增与自减

    js实现购物车数量的增加与减少,js实现购物车数量的自增与自减 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  7. lsyncd 实时同步

    1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案,原先使用的是inotify + rsync,但随着文件数量的增大到100W+,目录下的 ...

  8. 烂泥：rsync与inotify集成实现数据实时同步更新

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上篇文章我们介绍了如何使用rsync同步文件,这篇文章我们再来介绍下,如何把rsync与inotify集成实现数据的实时同步. 要达到这个目的,我们需要 ...

  9. rsync+inotify实现实时同步案例--转

    转自:http://chocolee.blog.51cto.com/8158455/1400596 随着应用系统规模的不断扩大,对数据的安全性和可靠性也提出的更好的要求,rsync在高端业务系统中也逐 ...

随机推荐

  1. Ansible用于网络设备管理 part 1 Jinja2 YAML初窥

    这一次的实验内容依然来自Kirk Byers的博客,源地址在https://pynet.twb-tech.com/blog/python/paramiko-ssh-part1.html 但是,这次实验 ...

  2. SharePoint 2013 中自定义WCF服务

    在使用SharePoint2013的时候,如果其他客户端 API 的组合不足,可以通过自定义 Web 服务扩展 SharePoint.默认情况下,SharePoint 2013 不仅支持创建自定义 A ...

  3. 响应式SharePoint模版页

    一张好的皮肤显然的会给你的项目加分不少.特别是大部分的项目,UI甚至可以决定成败. SharePoint在这方面一直都做得不好,曾经我有好多项目都是坐在美工旁边来一起修改样式.痛苦的经历. 不久以前, ...

  4. arc下内存泄漏的解决小技巧

    一定要注意,我们运行app时,一定要关心内存的使用,尽量不要超过20M,即使有很多图片要显示也绝对不能超过30M.所以运行自己开发的app时多关心内存的使用是个很好的习惯. 对于性能,内存的优化,这个 ...

  5. 【原】就IOS发布app时如何保护文本资源的一个方法

    近期的一个app是本地的,数据源来自于本地的一个.json文件,里面的数据是这个app的灵魂.近期快发布该app了,很担心发布后的.ipa包被竞争者解开然后信息发生泄漏.我的处理策略是:打包的时候放的 ...

  6. 【文章内容来自《Android 应用程序开发权威指南》（第四版）】如何设计兼容的用户界面的一些建议（有删改）

    最近一直在看的一本书是<Android 应用程序开发权威指南>(第四版),十分推荐.书中讲到了一些用户界面设计的规范,对于初学者我认为十分有必要,在这里码给大家,希望对我们都有用. 在我们 ...

  7. JQuery怎么实现页面刷新后保留鼠标点击样式的方法

    今天抽空研究了下鼠标点击添加样式的方法.为了防止忘记,写篇文章算是备份吧. $('ul.main-menu li a').each(function(){     if($($(this))[0].h ...

  8. 《SQL Server企业级平台管理实践》读书笔记——关于SQL Server数据库的还原方式

    本篇是继上篇的备份方式,本篇介绍的是还原方案,在SQL Server在2005以上现有的还原方案一般分为以下4个级别的数据还原: 1.数据库完整还原级别: 还原和恢复整个数据库.数据库在还原和恢复操作 ...

  9. PL/SQL之--游标

    一.游标简介 在PL/SQL中执行SELECT.INSERT.DELETE和UPDATE语句时,ORACLE会在内存中为其分配上下文区(Context Area),也称为缓冲区.游标是指向该区的一个指 ...

  10. 烂泥：KVM虚拟机windows系统增加硬盘

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 前一篇文章介绍了有关linux系统添加硬盘的方法,这次我们来介绍有关windows系统添加的相关步骤. 其实linux和windows添加的硬盘的方法都 ...