利用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. c# Sqlite帮助类

    最近有WPF做客户端,需要离线操作存储数据,在项目中考虑使用Sqlite嵌入式数据库,在网上找了不少资料,最终整理出一个公共的帮助类. Sqlite是一个非常小巧的数据库,基本上具备关系型数据库操作的 ...

  2. 自己写的表格插件autotable

    自己写的表格插件autotable 作者:田想兵,个人网址:http://www.lovewebgames.com 这个表格插件所完成的功能是:ajax请求数据,然后动态绑定到指定表格下,格式化,分页 ...

  3. datepicker冲突

    公司里的项目由于发展较快,很多东西都没有好好梳理一下,以至于有很多的潜在的问题. 最近就遇到了一个比较坑的问题.datepicker 有两个插件库中的datepicker插件比较有名.一个是jQuer ...

  4. .NET破解之百分百营销软件系列

    今天在52中看到了一个邮件批量发送工具,感觉不怎么好用,百度一下,找到了百分百系统,虽然也不怎么好用,但还是忍不住P它. 官网:http://www.100qunfa.com/ 百分百不加群提取群成员 ...

  5. android 类ios actionsheet效果

    1.http://blog.csdn.net/zhaoxy_thu/article/details/17733389 2. https://github.com/ojhariddhish/action ...

  6. CocoaPod出现-bash: pod: command not found 解决办法

    从过年来到公司  就不用自己电脑了    之前一直自己带电脑   昨天随便建了一个demo   使用cocoapods  发现     -bash: pod: command not found 刚开 ...

  7. 优于CoreData的Realm数据库基础教程

    Realm 是一个跨平台的移动数据库引擎,于 2014 年 7 月发布,准确来说,它是专门为移动应用所设计的数据持久化解决方案之一. Realm 可以轻松地移植到您的项目当中,并且绝大部分常用的功能( ...

  8. Windows7下Blend for Visual Studio 2012使用问题

    目前开发的系统里很多控件样式和动画比较复杂,应该是之前同事用Blend做的,这种神器不用太浪费了,自己也准备试试. 系统环境Windows7+Visual Studio 2012 1.Windows7 ...

  9. iOS之 kamailio-4.3.4sip服务器搭建-mac

    如要转载请注明出处http://www.cnblogs.com/chengxiaoyu/p/5006352.html 1.安装MySQL 去http://www.mysql.com/下载最新版本的My ...

  10. PHP session 跨子域问题

    今天,做项目时候遇到个问题.之前做东西的时候session一般就直接存在数据库中这样就能解决跨域 不仅仅是跨子域,但是今天遇到这个问题是,自己要在别人现有的东西上面做修改.由于仅仅是子域 当时就行肯定 ...