基于JavaScript实现购物车功能
本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="shop">
<button id="btAdd">我的购物车</button><br><br>
<table id="cart">
<thead>
<tr>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">购物车总金额：<span id="total">0.00</span></td>
</tr>
</tfoot>
</table>
</div>
<div id="footer"></div>
<script>
$('#read .page li a').click(function(){
var n=$(this).html();
$(this).parent().parent().next().children('p:nth-child('+n+')').slideDown(2000);
$(this).parent().parent().next().children('p:nth-child('+n+')').siblings().css('display','none');
})
$('#btAdd').click(function(){
var p = randPrice();
var c = randCount();
$('#cart tbody').append('<tr>'+
'<td>'+p+'</td>'+
'<td><input type="text" value="'+c+'"></td>'+
'<td>'+parseFloat((p*c).toFixed(2))+'</td>'+
'<td><a href="#" rel="external nofollow" >×</a></td>'+
'</tr>');
$('#total').html( getTotal() );
});
//为“删除”按钮(即X号)绑定事件监听函数，注意：X是后添加的，很多X执行的行为是一样的——使用事件代理
$('#cart tbody').delegate('td > a', 'click',function(event){
event.preventDefault();
var a = event.target;
$(a).parent().parent().remove();
});
//为“购买数量”输入框做事件绑定——使用事件代理
$('#cart tbody').delegate('td > input','change', function(event){
var input = event.target;
var count = input.value;
var price = $(input).parent().prev().html();
$(input).parent().next().html( price*count );
$('#total').html( getTotal() );
})
//计算购物车的总金额
function getTotal(){
var sum = 0;
$('#cart tbody tr td:nth-child(3)').each(function(i, td){
sum += parseInt(td.innerHTML);
})
return sum;
}
function randPrice(){
var p = Math.random()*100;
p = p.toFixed(2);
p = parseFloat(p);
return p;
}
function randCount() {
var c = Math.floor(Math.random() * 10 + 1);
return c;
}
$('#header').load('php/header.php');
$('#footer').load('php/footer.php');
var theme=localStorage.getItem('ChoseTheme');
applyTheme(theme)
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
简单的前端js+ajax 购物车框架(入门篇)
今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc
-
js购物车实现思路及代码(个人感觉不错)
复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer
-
Javascript操纵Cookie实现购物车程序
复制代码 代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林) url:www.27sea.com QQ:303590170 CreateDate 2005-05-31 Description 此类是基于JavaScript和客户端Cookie,请保证客户端开
-
原生js模拟淘宝购物车项目实战
本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项
-
js实现简单的购物车有图有代码
如图: 全选按钮的实现为: 复制代码 代码如下: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input t
-
js+cookies实现悬浮购物车的方法
本文实例讲述了js+cookies实现悬浮购物车的方法.分享给大家供大家参考.具体分析如下: 在 "商品列表展示页"做上 "悬浮的"与"DataList"结合的 "无刷新购物车",只需计算出总价,不必去单独页面结算.找了些资料修改了一下,整理示例如下: gwc.js文件如下: // JavaScript Document //计算单个小计 function EveryCount() { var index=window.eve
-
JavaScript编写一个简易购物车功能
网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c
-
基于Vuejs实现购物车功能
本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue购物车</title> <link rel="stylesheet" href="css/bootstrap.min.css&q
-
利用Angularjs和bootstrap实现购物车功能
先来看看效果图: 购物车 一.代码 如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧.话不多少,直接上代码. html代码: <!DOCTYPE html> <html lang="en" ng-app="cart"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="style
-
基于JavaScript实现购物车功能
本文实例为大家分享了js实现购物车功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> </head&g
-
Javascript实现购物车功能的详细代码
我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项或几项商品,最后商品总价也会随着消费者的操作随着变化. 现在,笔者对购物车进行了简单实现,能够实现真实购物车当中的大部分功能.在本示例当中,用到了javascript中BOM操作,DOM操作,表格操作,cookie,json等知识点,同时,采用三层架构方式对购物车进行设计,对javascript的
-
基于JavaScript 实现拖放功能
HTML 的拖放 API 依赖 DOM 事件模型,获取拖放和放置元素的相关信息,以此实现拖放功能.我们只需要注册很少几个事件监听器,就能把任何元素变成可拖动或可放置的. 拖放 API 除了提供基本的拖放功能接口外,还可以在拖放之外提供选择,用来自定义行为.比如,可以修改拖放元素的 CSS 样式.或者,我们不移动元素,拖动的时候,复制一个副本,拖放结束后,我们就会多了一个同样的元素. 本篇只介绍实现基本的拖放功能. 将元素设置成可拖动的 我们先从拖动元素开始.假设我们有一个容器元素,其中包含两种类
-
基于vuex实现购物车功能
本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下 先看效果: 代码: <template> <div class="Home"> <h1>vuex购物车案例</h1> <add-from></add-from> <shop-cart></shop-cart> </div> </template> <script> import
-
基于Javascript实现倒计时功能
本文实例实现一个倒计时功能. 倒计时功能, 用在项目的发布时间, 或者某个活动做倒计时等等的突出时间功能的方面. 界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~). 代码名称 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时实现</title> <sty
-
基于javascript实现日历功能原理及代码实例
日历 在学习javascript过程中,菜鸟教程有一个javascript实例---css日历,感觉挺有趣的,在它的基础上增加了一些简单的功能(差点哭辽). 功能 按照传统日历方式显示该月的每一天. 可以突出显示今天的日期 可以翻阅上一个月和下一个月的日历 实现 step1 传统日历布局样式:分别将年份与月份.星期.该月的全部天数采用列表布局,排列组成传统日历的样式. step2 初始化和更新月份:先将列表清空(debug过程中,有一个发现,初始化的列表便存在的一个childNodes,该项目中
-
基于JavaScript 下namespace 功能的简单分析
之前看到网易还是新浪还是什么什么网站来着,也是用类似这种东西的,当时对js只是九牛一毛的水平,当场被吓傻了.但这次,我打算亲自分析下,以后在看到就不会迷茫了. 复制代码 代码如下: //调用例子:bradio.namespace("bradio.lang.array"); //下面是百度编译后的源码,变量都是a,b,c,d...之后我会重新写一个规范点的. //好了,开始分析 bradio.namespace = function () { //创建命名空间 var a = a
-
基于JavaScript实现验证码功能
本文实例为大家分享了JavaScript实现验证码的具体代码,供大家参考,具体内容如下 1.一个简单的例子 新建 test.html <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>验证码</title> <script sr
-
JavaScript实现购物车案例
本文实例为大家分享了JavaScript实现购物车功能的具体代码,供大家参考,具体内容如下 HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <