原生js 实现购物车价格和总价 统计
<!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 实现购物车价格和总价 统计的更多相关文章
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 原生JS实现购物车功能
html <div class="catbox"> <table id="cartTable"> <thead> <t ...
- 原生JS实现购物车全选多选按钮功能
对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...
- 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- 用vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- 原生JS实战:分享一个首页进度加载动画!
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...
- 原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...
- 转 原生js canvas实现苹果电脑mac OS窗口最小化效果
http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458 很多资料 ,前 ...
随机推荐
- mysql索引的使用[上]
数据库的explain关键字和联合索引优化: 本篇文章简单的说一下mysql查询的优化以及explain语句的使用.(新手向) 因为这篇文章是面向查询的,直观一点,首先我们创建一个表:student ...
- 转: jdbc连接数据库需要注意和出错的地方
* 1.数据库登录模式不能只使用windows登录模式,要采取混合模式登录, * 并记住相应的密码和账户: * 2.连接数据库后一定要记得关闭资源,否则就会造成资源浪费. * 关闭的时候也要注意顺序, ...
- <li>高度自适应
使用ul和li代替表格进行排版的时候,会发现li无法自适应高度. 只需要将li的overflow置为auto就可以了,因为li默认的overflow是visible,会将内部元素显示在li之外. ...
- SQL升级脚本实现按版本差异化升级(优化)
1.增加了对SQL Server 2000的兼容: 2.支持对脚本目录的批量处理: 3.将脚本版本的判断放到具体的升级子脚本中去,让调度脚本更固化. -- 根据SQL的版本好确定启用xp_cmdshe ...
- SharePoint 2016 开发 工具Preview发布
博客地址:http://blog.csdn.net/FoxDave 之前装了SharePoint,但是并不能在Visual Studio 2015里面做开发,因为没有相应的office tool. 但 ...
- WCF开发指南之构建服务
一. 引言 Windows通讯基础(简称为WCF)是一种SDK,用于让你使用典型的CLR编程结构(例如用于发布和消费服务的类和接口等)来构建Windows面向服务的应用程序.WCF的编程模型是声明性的 ...
- android技巧(一):如何方便知晓当前Activity?如何管理应用中的Activity?如何最佳的启动一个Activity?
1.如何方便知晓当前Activity? 可以不看代码根据当前界面就知道界面所在Activity的写法: 建立BaseActivity,继承自Activity,在BaseActivity的OnCreat ...
- Ambari是什么?
Ambari目标 解决Hadoop生态系统部署 部署:hadoop组件间有依赖,包括配置.版本.启动顺序.权限配置等. 部署过程跟踪.能够展示出部署过程中每个步骤的状态及相关信息. 多机部署问题,当集 ...
- 第三个Sprint冲刺第四天
讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 讨论问题:强化界面功能
- php冒泡排序
<?php $arr = array(1,4,2,9,0,10,12,3,7); foreach($arr as $val) { echo $val."--"; } echo ...