JS购物车编辑
实现了：第一件商品的加减
实现了：全选/全不选（使用prop而不是attr）
实现了：删除（遮罩层）
未实现：第二件商品的删除
未实现：小计及应付款额的初始化（写死的）
计算小数乘法时，要先乘100
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.div1 {
border: 1px solid gainsboro;
width: 950px;
height: 60px;
} .div-checkbox,
.div-goods,
.div-amount,
.div-unit-price,
.div-price,
.div-del {
border: 1px solid;
width: 60px;
height: 20px;
padding: 20px;
float: left;
text-align: center;
} .div-price {
width: 100px;
} .div-goods {
width: 140px;
} .div-amount {
width: 140px;
} .div-unit-price {
width: 50px;
} .div-total-price {
border: 1px solid gainsboro;
width: 950px;
height: 60px;
text-align: right;
} .div-submit {
width: 950px;
text-align: right;
} div#cover {
/*遮罩层*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1000px;
z-index: 100;
display: none;
background-color: grey;
} div#prompt {
/*弹窗*/
border: 2px solid yellow;
display: none;
position: fixed;
top: 100px;
left: 500px;
z-index: 101;
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script>
$(function() { //全选
var i = 0;
$(".allPic").click(function() {
i++;
if (i % 2 != 0) {
//此处用attr则只能选中/取消一次
$(".cls-checked").prop("checked", true);
} else {
$(".cls-checked").prop("checked", false);
}
}); //通过name获取某一商品的按钮
$("input[name='btn1']").click(function() {
//数量
var _amount = parseInt($("#id-txt-amount1").val());
if ($(this).val() == "+") {
_amount++;
} else if ($(this).val() == "-") {
if (_amount == 1) {
//必须买!
return;
}
_amount--;
}
$("#id-txt-amount1").attr("value", _amount); // 本商品的总价
var _unitPrice = $("#id-unit-price1").html();
var _thisPrice = parseFloat(_unitPrice * 100 * _amount / 100).toFixed(2);
$("#id-price1").html(_thisPrice); // 总价
var _otherPrice = $("#id-price2").html();
var _totalPrice = parseFloat(_thisPrice + _otherPrice).toFixed(2);
$("#id-total-price").html(_totalPrice);
}); //删除一条
$(".div-del a").click(function() {
showPrompt(this);
});
}); function showPrompt(obj) {
$("#cover").css("display", "block");
// 10毫秒内透明度降为0.5
$("#cover").fadeTo(10, 0.5);
$("#prompt").css("display", "block");
$("#prompt a").click(function() {
$("#cover").css("display", "none");
$("#prompt").css("display", "none");
return;
});
$("#prompt input").click(function() {
$("#cover").css("display", "none");
$("#prompt").css("display", "none");
$(obj).each(function() {
$(obj).parent("div").parent("div").remove();
});
});
}
</script> <body>
<!--遮罩层-->
<div id="cover"></div>
<!--弹窗-->
<div id="prompt">
<div style="width: 100%;height: 20px;text-align: right;background-color: gray;">
<a href="#">关闭</a>
</div>
<div style="text-align: center;background-color: white;width: 300px;height: 180px;line-height: 100px;">
确认删除吗？
<br />
<input type="button" value="确定" />
</div>
</div>
<!--表头------------------------------------------------------->
<div class="div1">
<div class="div-checkbox">
<input type="checkbox" class="allPic"><b>全选</b></input>
</div>
<div class="div-goods"><b>项目</b></div>
<div class="div-amount"><b>数量</b></div>
<div class="div-unit-price"><b>单价</b></div>
<div class="div-price"><b>小计</b></div>
<div class="div-del"></div>
</div>
<!--第一行------------------------------------------------------->
<div class="div1">
<div class="div-checkbox"><input type="checkbox" class="cls-checked" /></div>
<div class="div-goods">
A </div>
<div class="div-amount">
<input type="button" value="-" name="btn1" />
<input type="text" size="2" value="1" id="id-txt-amount1" />
<input type="button" value="+" name="btn1" />
</div>
<div class="div-unit-price">
￥<span id="id-unit-price1">9.90</span>
</div>
<div class="div-price">￥<span id="id-price1">2.00</span></div>
<div class="div-del"><a href="#">删除</a></div>
</div>
<!--第二行（未实现加减）------------------------------------------------------->
<div class="div1">
<div class="div-checkbox"><input type="checkbox" class="cls-checked" /></div>
<div class="div-goods">
B
</div>
<div class="div-amount">
<input type="button" value="-" class="btn2" />
<input type="text" size="2" value="1" id="id-txt-amount2" />
<input type="button" value="+" class="btn2" />
</div>
<div class="div-unit-price">
￥<span id="id-unit-price2">2.00</span>
</div>
<div class="div-price">￥<span id="id-price2">2.00</span></div>
<div class="div-del"><a href="#">删除</a></div>
</div> <div class="div-total-price">应付款额： ￥
<span id="id-total-price">11.90</span>
</div>
<div class="div-submit">
<input type="submit" />
</div>
</body> </html>
JS购物车编辑的更多相关文章
- JQuery案例：购物车编辑
购物车编辑 实现了:商品的加减,总价的变动 实现了:全选/全不选(使用prop而不是attr) 实现了:删除(遮罩层) <html> <head> <meta chars ...
- js获取编辑框游标的位置
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- 简单实用angular.js购物车功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Eclipse中jsp、js文件编辑时，卡死现象解决汇总
使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...
- js购物车计算价格
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...
- jira7通过全局js给编辑区自定义快捷键【原】
jira7编辑区自定义快捷键 本文主要描述了jira7如何通过添加全局js引用,给文本编辑区自定义快捷键用以快速填充模板内容. jira 3/4/5可参考官方api https://developer ...
- vue.js购物车
vue.js https://cn.vuejs.org/v2/guide/ 简单购物车 <html> <head> <script src="https://c ...
- js 购物车的实现
购物车原理:创建一个构造函数,把涉及到的项目写成方法,然后把这些方法放到构造函数的原型对象上,通过按钮绑定,调用原型对象上的方法,实现对涉及项目的改变 html代码: <!DOCTYPE htm ...
- 三.jquery.datatables.js表格编辑与删除
1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html) 采用了另一个数据格式 2.后台php ...
随机推荐
- Nginx的使用（三）把nginx和php-cgi.exe注册成windows服务
1.创建windows服务用到一个小工具WinSW:https://github.com/kohsuke/winsw/releases(下载 .exe 文件即可,根据系统选择,Win 10 选择 .N ...
- asp.net针对SQLSERVER数据库备份和恢复的一揽子问题解决
一.备份 先备份到服务端,用gridview显示出来,点击可以下载到本地 二.恢复 这是很麻烦的事情,本人查阅不少资料,耗费不少时间才搞定. 直接恢复数据库时不行的,会提示数据库正在使用,恢复失败等信 ...
- 版本控制git第一篇
一.git的下载与安装 参考:https://blog.51cto.com/wangfeng7399/2352524 Git 是一个开源的分布式版本控制软件,用以有效.高速的处理从很小到非常大的项目版 ...
- leetcode 总结 动态规划问题小结
动态规划 动态规划对于子问题重叠的情况特别有效,因为它将子问题的解保存在表格,当需要某个子问题的解 时,直接取值即可,从而避免重复计算. 基本思路与策略 基本思想与分治法类似,也是将带求解的问题分解为 ...
- 使用Java API方式连接HDFS Client测试
IDEA中新建Maven工程,添加POM依赖, 在IDE的提示中, 点击 Import Changes 等待自动下载完成相关的依赖包. <?xml version="1.0" ...
- ceph压力测试结果总结
万兆网速的ceph分布式存储单虚拟机下的带宽和iops测试结果: 带宽: 写:700-850MB 读:800-900MB iops: 写:15000-20000 读:45000-55000
- 提供一个Java字符串转整型数组的方法
package edu.yuliang.Data_Structure_Basics; import java.util.Scanner; public class new_string { publi ...
- SpringBoot的学习【4.快速实现一个SpringBoo的应用】
1.引子 正常创建一个 Spring Boot 应用的顺序: 创建 Maven 项目 pom 文件导入依赖(参照 Spring 官方文档) 编写主程序 编写业务逻辑 但其实IDE( idea 和 Sp ...
- 3.6 html报告乱码问题优化
3.6 html报告乱码问题优化 前言python2用HTMLTestRunner生成测试报告时,有中文输出情况会出现乱码,这个主要是编码格式不统一,改下编码格式就行.下载地址:http://tung ...
- scrapy框架之递归解析和post请求
递归爬取解析多页页面数据 scrapy核心组件工作流程 scrapy的post请求发送 1.递归爬取解析多页页面数据 - 需求:将糗事百科所有页码的作者和段子内容数据进行爬取切持久化存储 - 需求分析 ...