<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script>

     window.onload=function(){

         var aIn=document.querySelectorAll('input');

         var aEm=document.querySelectorAll('em');

         var aI=document.querySelectorAll('i');

         for(var i=;i<aIn.length;i++){

             (function(index){

                 if(aIn[index].value==''){

                         delete localStorage['a'+index];

                  }

                 aIn[i].oninput=function(){

                     aI[index].innerHTML=parseFloat(aEm[index].innerHTML)*parseFloat(aIn[index].value);

                     localStorage['a'+index]=parseFloat(aEm[index].innerHTML)*parseFloat(aIn[index].value);

                     storage();

                 };

             })(i);

        }

        function storage(){

                var arr=[];

             function findArr(){

                    for(var name in localStorage){

                     arr.push(localStorage[name]);

                 }

                 return arr;

             }

             var d=findArr();

             var p=;

             for(var i=;i<d.length;i++){

                 var p=Number(d[i])+p;

                 div1.innerHTML='总价：'+p;

             }

         }

     };

     </script>

 </head>

 <body>

     <div>

         <p>商品名称：碧血剑谱</p>

         <input type="number" min="" value="">

         <em>$</em><br><br>

         <i></i>

     </div>

     <div>

         <p>商品名称:九阴真经</p>

         <input type="number" min="" value="">

         <em>$</em><br><br>

         <i></i>

     </div>

     <div>

         <p>商品名称：太极拳谱</p>

         <input type="number" min="" value="">

         <em>$</em><br><br>

         <i></i>

     </div>

     <div id="div1"></div>

 </body>

 </html>

原生js 实现购物车价格和总价 统计的更多相关文章

  1. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. 原生JS实现购物车功能

    html <div class="catbox"> <table id="cartTable"> <thead> <t ...

  3. 原生JS实现购物车全选多选按钮功能

    对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...

  4. 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  5. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  6. 用vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  7. 原生JS实战：分享一个首页进度加载动画！

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...

  8. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  9. 转 原生js canvas实现苹果电脑mac OS窗口最小化效果

    http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458  很多资料 ,前 ...

随机推荐

  1. C#预编译指令之#region

    #region和#endregion是一个区域注释(注释一段话.但是不是AU3内置的语法.内置的注释是 ";" 和 "#cs" 与 "#ce" ...

  2. 注册Github

    注册Github 1.打开Github网页 2.设置用户名.邮箱.密码(右侧会显示是否可以使用),点击注册 3.此时邮箱会发来来自Github的注册消息,进入邮箱,点连接,完成注册 4.注册成功

  3. ios基础篇（二十）—— UIBezierPath绘制

    UIBezierPath类可以创建基于矢量的路径,可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状. 一.UIBezierPath使用: 1.创建path: 2.添加路径到path ...

  4. 0517Scrum项目4.0

    一.任务看板: 二.任务认领情况: 冯铭杰:界面的设置和部分功能的实现: 梁毅乾:四则运算的功能实现以及代码的维护: 陈施恩:监督小组成员的工作进度,以及代码的编写: 张俊毅:四则运算的算术随机产生: ...

  5. OC语言BLOCK和协议

    OC语言BLOCK和协议 一.BOLCK (一)简介 BLOCK是什么?苹果推荐的类型,效率高,在运行中保存代码.用来封装和保存代码,有点像函数,BLOCK可以在任何时候执行. BOLCK和函数的相似 ...

  6. createjs 利用createjs 写拼图功能

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  7. C语言基础--循环 递归打印乘法表

    for循环打印乘法表: #include <stdio.h> // for循环打印乘法表 int main(int argc, const char * argv[]) { //矩形 ; ...

  8. HTML新增属性

    1.<input type="text" required必填  placeholder="默认显示内容"  autofocus自动获取焦点 /> ...

  9. 黑马程序员——OC语言 核心语法（1）

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)点语法 点语法其实本质上还是方法调用 当使用点语法时,编译器会自动展 ...

  10. Python开发入门与实战7-Django Form

    7. Django Form 7.1. Form表单 Django带有一个form库,称为django.forms,这个库可以处理上一章提到的包括HTML表单的自动生成以及数据验证. 我们在inven ...