JavaScript实现购物车基本功能
JavaScript购物车最基本的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
}
th{
width: 80px;
height: 30px;
}
td{
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<table border="" cellspacing="" cellpadding="">
<thead>
<th ><input type="checkbox" id="checkedAll"/>选择</th>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>黄焖鸡米饭1</td>
<td>10</td>
<td>
<span class="jian">-</span>
<input type="text" style="width: 30px;text-align: center;" value="1" readonly="readonly"/>
<span class="jia">+</span>
</td>
<td>
<span style="color: red;">10</span>
</td>
<td>
<a style="cursor: pointer;">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>黄焖鸡米饭2</td>
<td>20</td>
<td>
<span class="jian">-</span>
<input type="text" style="width: 30px;text-align: center;"value="1" readonly="readonly"/>
<span class="jia">+</span>
</td>
<td>
<span style="color: red;">20</span>
</td>
<td>
<a style="cursor: pointer;">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
window.onload=function(){
var checkedAll=document.getElementById("checkedAll")
var tb=document.getElementById("tb")
var oinput=tb.getElementsByTagName('input')
var jian=document.getElementsByClassName('jian')
var jia=document.getElementsByClassName('jia')
var shanchu=tb.getElementsByTagName('a')
console.log(shanchu)
//全选
checkedAll.onclick=function(){
for(var i=0;i<oinput.length;i++){
oinput[i].checked=this.checked
}
}
//当下级有一个没有选中时那么全选按钮则为false状态
for(var i=0;i<oinput.length;i++){
oinput[i].onclick=function(){
var qx=true
for(var i=0;i<oinput.length;i++){
if(oinput[i].checked==false){
qx=false
}
}
checkedAll.checked=qx
}
}
checkedAll.onclick=function(){
for(var i=0;i<oinput.length;i++){
oinput[i].checked=this.checked
}
}
for(var i=0;i<oinput.length;i++){
oinput[i].onclick=function(){
var qx = true;
for(i=0;i<oinput.length;i++){
if(oinput[i].checked==false){
qx=false
}
}
checkedAll.checked=qx
}
}
//加
for(var i=0;i<jia.length;i++){
jia[i].onclick=function(){
//previousSibling上一个兄弟节点
var val = parseInt(this.previousSibling.previousSibling.value);
this.previousSibling.previousSibling.value = val + 1;
jisuan(this)
}
}
//减
for(var i=0;i<jian.length;i++){
jian[i].onclick=function(){
//nextSibling下一个兄弟节点
var val = parseInt(this.nextSibling.nextSibling.value);
if(val > 1) {
this.nextSibling.nextSibling.value = val - 1;
}
jisuan(this)
}
}
//操作删除
for(var i=0;i<shanchu.length;i++){
shanchu[i].onclick=function(){
var conf = confirm('确定删除这件商品吗？');
//parentNode父节点
console.log(this.parentNode.parentNode)
if(conf) {
//removeChild 删除节点
tb.removeChild(this.parentNode.parentNode);
}
}
}
//总价
function jisuan(t){
var tr=t.parentNode.parentNode
var result=document.getElementById("result")
var td=tr.getElementsByTagName('td')
td[4].getElementsByTagName('span')[0].innerHTML = parseInt(td[2].innerHTML)*parseInt(t.parentNode.getElementsByTagName('input')[0].value)
}
}
</script>
</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
-
js实现简单的购物车有图有代码
如图: 全选按钮的实现为: 复制代码 代码如下: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input t
-
基于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
-
原生js模拟淘宝购物车项目实战
本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项
-
JavaScript编写一个简易购物车功能
网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c
-
Javascript操纵Cookie实现购物车程序
复制代码 代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林) url:www.27sea.com QQ:303590170 CreateDate 2005-05-31 Description 此类是基于JavaScript和客户端Cookie,请保证客户端开
-
js实现商品抛物线加入购物车特效
本文实例为大家分享了js实现商品抛物线加入购物车动画代码,供大家参考,具体内容如下 parapola.js /*! * by zhangxinxu(.com) 2012-12-27 * you can visit http://www.zhangxinxu.com/wordpress/?p=3855 to get more infomation * under MIT license */ var funParabola = function(element, target, options)
-
JavaScript实现购物车基本功能
JavaScript购物车最基本的功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table{ border-collapse: collapse; } th{ width: 80px; hei
-
使用jQuery实现购物车结算功能
本文实例为大家分享了jQuery实现购物车结算功能展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script
-
Vue模拟实现购物车结算功能
本文实例为大家分享了Vue实现购物车结算功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
-
JavaScript实现购物车案例
本文实例为大家分享了JavaScript实现购物车功能的具体代码,供大家参考,具体内容如下 HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
-
原生js实现购物车逻辑和功能
本文实例为大家分享了js实现购物车逻辑和功能的具体代码,供大家参考,具体内容如下 1.购物车的主体内容布局尽量用表格的布局模式 2.判断用户是否登录 代码如下,可以根据自己头部的布局来具体修改 // 判断用户是否登录 var username = getCookie("username"); //如果登录成功就执行这段代码 if(username){ var vip = $(`<a href='javascript:;'>欢迎<b>${username}<
-
菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)
其实最简单的可以理解为:JavaScript + XMLHttpRequest + CSS +服务器端的集合,其本质上是一种浏览器端的技术.好了, 简单的描述了一下,现在直接上代码吧! (1).功能描述: 新建两个html页面分别为1.html和2.html,在不刷新的情况下点击1.html页面上的"获取数据"按钮后,将2.html页中的内容显示在1.html页面的<div>标记中. (2).实现代码: 1.html实现代码: 复制代码 代码如下: <head>
-
JavaScript实现换肤功能
一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie --如果没有,使用默认皮肤--如果有,使用指定皮肤:用户点击换肤选项--JS 控制替换对应的 CSS 样式表--将皮肤选项写进 Co
-
常用Javascript函数与原型功能收藏(必看篇)
如下所示: // 重复字符串 String.prototype.repeat = function(n) { return new Array(n+1).join(this); } // 替换全部 String.prototype.replaceAll = function(str1, str2) { return this.replace(new RegExp(str1, "gm"), str2); } // 清除空格 String.prototype.trim = function
-
Javascript 实现计算器时间功能详解及实例（二）
Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示 效果图如下: 代码 初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator
-
Javascript实现的StopWatch功能示例
本文实例讲述了Javascript实现的StopWatch功能.分享给大家供大家参考,具体如下: 有时会需要js来写一些函数进行测试,如果需要测试执行时间,可能需要一个stopwatch: StopWatch类: function stopWatch() { } stopWatch.prototype.Start = function () { this.startD = new Date(); return this; }; stopWatch.prototype.Stop = functio