javascript如何实现购物车的功能（代码）
本篇文章给大家带来的内容是关于javascript如何实现购物车的功能（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>购物车</title>
<style>
table{
width: 600px;
margin: 0 auto;
border-collapse: collapse;
}
td{
border: 1px solid silver;
line-height: 40px;
text-align: center;
}
.btnl,.btnr{
border-style: none;
outline: none;
color: deeppink;
}
.txt{
width: 30px;
height: 30px;
border-style: none;
outline: none;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td><button id="btna">全选</button></td>
<td>序号</td>
<td>名称</td>
<td>价钱</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr class="trinfo">
<td><input class="ckbox" type="checkbox"/></td>
<td>1</td>
<td>毛衣</td>
<td><span class="price">99</span>￥</td>
<td><button class="btnl">-</button><input type="text" class="txt" value="1"/><button class="btnr">+</button></td>
<td><span class="smallprice">99</span>￥</td>
<td><button class="btndelete">删除</button></td>
</tr>
<tr class="trinfo">
<td><input class="ckbox" type="checkbox"/></td>
<td>2</td>
<td>短袖</td>
<td><span class="price">108</span>￥</td>
<td><button class="btnl">-</button><input type="text" class="txt" value="1"/><button class="btnr">+</button></td>
<td><span class="smallprice">108</span>￥</td>
<td><button class="btndelete">删除</button></td>
</tr>
<tr class="trinfo">
<td><input class="ckbox" type="checkbox"/></td>
<td>3</td>
<td>运动鞋</td>
<td><span class="price">10000</span>￥</td>
<td><button class="btnl">-</button><input type="text" class="txt" value="1"/><button class="btnr">+</button></td>
<td><span class="smallprice">10000</span>￥</td>
<td><button class="btndelete">删除</button></td>
</tr>
<tr class="trinfo">
<td><input class="ckbox" type="checkbox"/></td>
<td>4</td>
<td>凉鞋</td>
<td><span class="price">25</span>￥</td>
<td><button class="btnl">-</button><input type="text" class="txt" value="1"/><button class="btnr">+</button></td>
<td><span class="smallprice">25</span>￥</td>
<td><button class="btndelete">删除</button></td>
</tr>
<tr >
<td><button id="btnf">反选</button></td>
<td colspan="6"><span>总计：<span class="totle">0</span>￥</span><button>去结算</button></td>
</tr>
</table>
<script>
//获取左右的按钮集合
var btnleft=document.getElementsByClassName("btnl");
var btnright=document.getElementsByClassName("btnr");
//获取表示数量的class名为txt的input元素集合
var txt=document.getElementsByClassName("txt");
//获取表示单价的class名为price的span元素集合
var price=document.getElementsByClassName("price");
//获取表示小计的class名为smallprice的span元素集合
var small=document.getElementsByClassName("smallprice");
//获取表示总价的class名为totle的span元素
var totle=document.getElementsByClassName("totle")[0];
//获取全选反选按钮和选择框
var btna=document.getElementById("btna");
var btnf=document.getElementById("btnf");
var box=document.getElementsByClassName("ckbox");
//获取删除按钮
var btndelete=document.getElementsByClassName("btndelete");
var trlist=document.getElementsByClassName("trinfo");
var totleprice=0; //定义全局变量totleprice的初值为0
//给数量左右两边的+-添加点击事件
for(var i=0;i<btnleft.length;i++)
{
btnleft[i].index=i; //把i的值赋给btnleft[i]的index
btnleft[i].onclick=function (){ //获取当前对应的文本框的值
var val=txt[this.index].value;
val--; //控制其数量的值不能小于1
if(val<=1)
{
val=1;
}
txt[this.index].value=val; //把更新了的val值再赋给txt[this.index].value
addprice(this.index); //调用一下addprice()使其在当前变化下执行
}
btnright[i].index=i; //把i的值赋给btnright[i]的index
btnright[i].onclick=function (){
var val=txt[this.index].value;
val++;
txt[this.index].value=val;
addprice(this.index);
}
//给checkbox添加点击事件
box[i].onclick=function (){
showtotleprice();
}
//给删除添加点击事件
btndelete[i].index=i;
btndelete[i].onclick=function (){
totleprice-=parseFloat(small[this.index].innerText); //将总计里面对应的价格也减掉
totle.innerText=totleprice;
trlist[this.index].remove(); //去掉对应的那一行元素
//重新更新索引 防止其他操作出错
for(var k=0;k<trlist.length;k++)
{
trlist[k].index=k;
btndelete[k].index=k;
btnleft[k].index=k;
btnright[k].index=k;
}
}
} //计算小计
function addprice(index){
small[index].innerText=(price[index].innerText*txt[index].value);
} //计算总计
function showtotleprice(){
totleprice=0;
for(var i=0;i<small.length;i++)
{
if(box[i].checked)
{
totleprice+=parseFloat(small[i].innerText);
}
}
totle.innerText=totleprice;
}
//全选
btna.onclick=function (){
for(var i=0;i<box.length;i++)
{
box[i].checked=true;
}
showtotleprice();
}
//反选
btnf.onclick=function (){
for(var i=0;i<box.length;i++)
{
box[i].checked=!box[i].checked;
}
showtotleprice();
}
</script>
</body>
</html>相关推荐：
以上是javascript如何实现购物车的功能（代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何使用JS和百度地图实现地图平移功能
Nov 21, 2023 am 10:00 AM
如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
如何使用JS和百度地图实现地图热力图功能
Nov 21, 2023 am 09:33 AM
如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP
如何使用JS和百度地图实现地图点击事件处理功能
Nov 21, 2023 am 11:11 AM
如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
如何使用JS和百度地图实现地图多边形绘制功能
Nov 21, 2023 am 10:53 AM
如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript
