html中购物车总金怎么算额,计算购物车金额总和( jquery )
今天简单写了一个jq版购物车计算金额总和的例子,如图:
整体页面代码如下:
*{
list-style: none;
}
html,body{
margin: 0;
padding: 0;
}
.all-list{
padding: 40px;
margin: 0 auto;
}
.choose-list{
overflow: hidden;
}
.choose-list >h5{
display: block;
font-size: 14px;
color: #666666;
padding: 13px 0;
font-weight: normal;
}
.choose-container{
overflow: hidden;
border: 1px solid #DDDDDD;
box-sizing: border-box;
}
.choose-header{
overflow: hidden;
background-color: #F9FAFB;
padding: 0 48px;
}
.choose-header ul{
overflow: hidden;
}
.choose-header ul li{
float: left;
width: 20%;
text-align: center;
padding: 15px 0;
font-size: 12px;
color: #666666;
}
.choose-content{
padding: 0 48px;
overflow: hidden;
}
.choose-content ul{
overflow: hidden;
}
.choose-content ul li{
float: left;
width: 20%;
text-align: center;
padding: 15px 0;
line-height: 28px;
color: #555555;
}
.add-number{
overflow: hidden;
display: inline-block;
}
.choose-content ul li .number-input{
float: left;
width: 70px;
height: 28px;
border-top: 1px;
border-bottom: 1px;
border-color: #CCCCCC;
border-style: solid none;
box-sizing: border-box;
line-height: 28px;
outline: none;
text-align: center;
color: #FE5200;
}
.choose-content ul li .minus,.choose-content ul li .add{
float: left;
width: 28px;
height: 28px;
background-color: #F9FAFB;
font-size: 14px;
outline: none;
border: 1px solid #CCCCCC;
box-sizing: border-box;
}
.choose-content ul li >span{
color: #FE5200;
}
.choose-footer{
display: flex;
justify-content: space-between;
padding: 28px 48px;
background-color: #F9FAFB;
}
.choose-footer .require{
color: #FE5200;
font-size: 14px;
align-self: center;
}
.total-price{
overflow: hidden;
}
.total-price >span{
display: block;
font-size: 14px;
color: #555555;
padding: 6px 0;
}
.total-price >span em{
font-style: initial;
text-decoration:line-through;
}
.total-price >span i{
font-style: initial;
}
.prices{
color: #EA4335 !important;
}
.pay-button{
padding: 50px 0;
float: right;
}
.pay-num{
overflow: hidden;
display: flex;
flex-direction: column;
}
.pay-num span{
float: right;
width: 100%;
font-size: 14px;
color: #666666;
text-align: center;
padding-bottom: 20px;
}
.pay-num span small{
font-size: 18px;
color: #EA4335;
}
.pay-num button{
float: right;
padding: 15px 72px;
background-color: #bebebe;
border: none;
outline: none;
font-size: 14px;
color: #ffffff;
border-radius: 3px;
cursor: not-allowed;
}
.pay-num button.state-buys{
background-color: #EA4335;
cursor: default;
}
确认订单消息:
- 会员卡
- 原价
- 现价
- 数量
- 小计
- 180天会员卡
- ¥128
- ¥99
-
+
- ¥99
- 365天会员卡
- ¥228
- ¥199
-
+
- ¥199
- 730天会员卡
- ¥428
- ¥329
-
+
- ¥329
- 终身天会员卡
- ¥888
- ¥666
-
+
- ¥666
应支付:128
折后支付:99
应付金额:¥49元
立即开通
$(function(){
addMoney();
//增加按钮事件
$(document).on('click','.add-number .add',function(){
var _input = $(this).siblings('.number-input');
$(this).siblings('.number-input').val(parseInt(_input.val()) + 1);
addMoney();
});
//减少按钮事件
$(document).on('click','.add-number .minus',function(){
var _input = $(this).siblings('.number-input');
var _val = parseInt(_input.val()) - 1;
if(_val <0){
$(this).siblings('.number-input').val('0');
}else{
$(this).siblings('.number-input').val(_val);
}
addMoney();
});
//input 输入事件
$('.number-input').keyup(function(){
addMoney();
});
//input失焦事件
$('.number-input').blur(function(){
var this_val = $(this).val();
if(this_val == '' || this_val == 'undefind'){
$(this).val('0');
}else{
$(this).val(this_val);
}
});
//金额计算
function addMoney(){
var now_total = 0,
old_total= 0;
$('.choose-content ul').each(function(index){
var oldPrice = $(this).find('.old-price').attr('data-price');
var nowPrice = $(this).find('.now-price').attr('data-price');
var numbers = $(this).find('.number-input').val();
var old_price_total = oldPrice * numbers;
var now_price_total = nowPrice * numbers;
// console.log(old_price_total,now_price_total);
if(now_price_total == 0){
$(this).find('.now-total-price').html(now_price_total);
}else{
$(this).find('.now-total-price').html('¥' + now_price_total);
}
now_total += now_price_total;
old_total += old_price_total;
$('.total-price span em').html(old_total);
$('.total-price span i').html(now_total);
$('.pay-num span small').html('¥' + now_total + '元');
if(now_total >= 300){
$('.pay-num button').addClass('state-buys');
}else{
$('.pay-num button').removeClass('state-buys');
}
})
}
})
html中购物车总金怎么算额,计算购物车金额总和( jquery )相关推荐
- Cocos2d中使用颜色混合:加算,减算
Cocos2d中使用颜色混合:加算,减算 转自http://blog.sina.com.cn/s/blog_7a2ffd5c0100xtid.html CCSprite有一个ccBlendFunc类型 ...
- Android系统(127)---Android6.0存储中加入总内存和系统内存项和在西语下把,换成.
Android6.0存储中加入总内存和系统内存项 阅读数:651 平台下patches/packages/apps/Settings/里面 1.存储中加入总内存和系统内存项 在 res/values- ...
- 批量统计多个PPTX文件中幻灯片总数量
代码功能:统计指定文件夹及其子文件夹中所有PPTX文件中幻灯片总数量. 要求:安装扩展库python-pptx. 参考代码: 运行结果: ---------董付国老师Python系列教材------- ...
- mysql查询语句ppt,mysql查询表中数据总条数的语句怎么写
sql查询表中数据总条:SELECT COUNT(*) FROM 表名称.count(*)代表着抄数据统计的总数.例子本例返回 "Persons" 表中的行数:SELECT COU ...
- 一个游戏中玩家总经验值达到200就可以到达2级,达到400可以升到3级,达到600可升4级,达到800可升5级依此类推(玩家新创建的角色为0经验1级)。游戏中有一种超级经验丹,玩家1级的时候使用超级经
运行环境:赛码网 题目描述 一个游戏中玩家总经验值达到200就可以到达2级,达到400可以升到3级,达到600可升4级,达到800可升5级依此类推(玩家新创建的角色为0经验1级).游戏中有一种超级经验 ...
- 曲线任意里程中边桩坐标正反算(CASIO fx-4850P计算器)程序第四次修改版
曲线任意里程中边桩坐标正反算(4850P计算器)程序(第四次修改版) 曲线任意里程中边桩坐标正反算(CASIO fx-4850P计算器)程序 ( 第四次修改版 ) 一.程序功能及原理 1.功能说明:本 ...
- 如何设置word页脚中的总页码
如何设置word页脚中的总页码 [ 标签: 设置 , word 页码 , word ] 有几个要求:一是我对Word文档进行了自动生成目录的操作.目录是不计入总页码的,我在文档内容第一页设置了该节从1 ...
- 曲线任意里程中边桩坐标正反算及放样fx-4850程序(第五次修改)
有个4800线元法程序,改成5800后,运行后计算某点1的坐标不对,再次运行同样计算该点的坐标,又是对的了,同样计算某点2仍是第二次才能算对,谁能知道怎么回事? 下面是该4800程序 曲线任 ...
- 拉绳位移传感器在测量中的精度大家会算吗
拉绳位移传感器在测量中的精度大家会算吗 拉绳位移传感器的选择重要,选择以后在测量时的精度也很重要,那么在测量中大家是如何计算精度的呢,这个问题想必大家知道的不多,今天精量电子小编就来为不知道的用户来讲 ...
最新文章
- Python 爬虫实例(1)—— 爬取百度图片
- IDA Pro 反汇编窗口基本操作
- 记一次T-SQL查询优化 索引的重要性
- 什么是迭代器,JS如何实现迭代器
- Oracle 数据库Patch概念性小常识 PSU,CPU,bundle patch
- 【转】HTML5第一人称射击游戏发布
- 数据结构与算法-- 广度优先打印二叉树
- 选择题_一级造价师选择题的分值是多少
- 构建适用于Oracle 11.2.0.x的Linux单数据库实例的DataGuard
- Copy Constructor与赋值运算符
- 给爱设计的你,一个理由爱上(和使用)渐变素材的理由
- linux故障模式,Linux操作系统出现严重故障后的救援模式
- 剑指offer之翻转链表
- Java使用文本编写源代码
- php短信验证码接口怎么写,PHP 攻击短信验证码接口
- 查看各大网站服务器操作系统
- 根据浏览器的默认语言来切换中英文页面
- 【精讲】微信小程序 基础内容(组件)入门
- MATLAB教程二:MATLAB矩阵处理
- 基于rhcs套件实现的高可用集群
热门文章
- DM3730 LCD控制器驱动框架
- java载屁股针_以前常打的“屁股针”,为何现在很少见了?医生告诉你真实原因...
- mysql 无法创建表_MYSQL-不能创建表
- python ddos攻击脚本_python版本DDOS攻击脚本
- 2021河南固高高考成绩查询,河南信阳最好的4所高中,前三所学霸如云,看看有没有你的母校?...
- 【转】3.3(译)构建Async同步基元,Part 3 AsyncCountdownEvent
- 【转】WPF PRISM开发入门一( 初始化PRISM WPF程序)
- 关于w3wp.exe
- 开源干货!.NET Core + Vue.js通用动态权限(RBAC)管理系统框架[DncZeus]开源
- php记录登录时间,php记录 用户当前页面停留时间