原生Javascript应用：实现购物车加减以及价格计算功能 - Web前端
作者：98wpeu发布时间：2026-09-02分类：网页前端技术浏览：10
导读：今天分享下一个原生Javascript的应用：实现购物车加减以及价格计算功能。这个在我们开发购物网站的时候，经常用到，一起来了解下吧。需求说明：单击“半闭”按钮时，关闭当前页面购物...
今天分享下一个原生Javascript的应用：实现购物车加减以及价格计算功能。这个在我们开发购物网站的时候，经常用到，一起来了解下吧。
需求说明：
单击“半闭”按钮时，关闭当前页面购物车页面
单击“移入收藏”弹出收藏提示
单击“删除”弹出确认删除提示
单击“结算”按钮，弹出结算信息页面窗口
自动计算商品总计
单击“删除”按钮，使用parentNode访问当前节点的父亲节点等，使用removeChild( )删除当前商品
来看下DemO：
<!DOCtype html>
<HTML>
<head>
<meta charset="UTF-8">
<title>原生javascript应用：实现购物车加减以及价格计算功能 - Web前端之家www.jiangweishan.com</title>
<style type="text/CSS">
body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
ul,li,ol{list-style: none;}
.content{width: 810px; margin: 0 auto; font-family: "微软雅黑";}
.logo{margin: 10px 0;}
.logo span{
display: inline-block;
float: right;
width: 60px;
height: 30px;
line-height: 30px;
font-size: 14px;
background: #ff0000;
color: #ffffff;
text-align: center;
border-radius: 10px;
margin-top: 5px;
margin-right: 10px;
cursor: pointer;
font-weight: bold;
}
.cartList{
/*background: url("../image/02.jpg") no-repeat;*/
/*height: 414px;*/
overflow: hidden;
}
.cartList ul{
display: flex;
justify-content: space-between;
/*float: right;*/
/*width: 450px;*/
}
.cartList ul:nth-of-type(1){
display: flex;
margin-top: 125px;
}
.cartList ul:nth-of-type(2){
margin: 20px 0;
}
.cartList ul li{
font-family: "微软雅黑";
font-size: 12px;
color: #666666;
text-align: center;
line-height: 25px;
/*float: left;*/
}
.cartList ul li input[name="PRice"]{
border: none;
background: transparent;
width: 45px;
text-align: center;
}
.cartList ul li input[name="amount"]{
width: 45px;
text-align: center;
border: 1px solid #999999;
border-left: none;
border-right: none;
height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
height: 25px;
border: 1px #999999 solid;
width: 25px;
text-align: center;
}
.cartList ul li:nth-of-type(1){width: 130px;}
.cartList ul li:nth-of-type(2){width: 100px;}
.cartList ul li:nth-of-type(3){width: 130px;}
.cartList ul li p{Cursor: pointer;}
.cartList ol{
float: right;
clear: both;
margin-top: 40px;
}
.cartList ol li{
float: left;
}
.cartList ol li:nth-of-type(1){
color: #ff0000;
width: 80px;
height: 35px;
line-height: 35px;
text-align: center;
}
.cartList ol li span{display: inline-block;
float: right;
width: 80px;
height: 35px;
line-height: 35px;
font-size: 14px;
font-family: "微软雅黑";
background: #ff0000;
color: #ffffff;
text-align: center;
/*margin-top: 5px;*/
/*margin-right: 15px;*/
cursor: pointer;
font-weight: bold;}
</style>
</head>
<!--onload，在加载时计算好原始金额-->
<body onload="total()">
<div class="content">
<div class="logo">
<span onclick="JavaScript:if (confirm('确认要关闭吗'))window.close() ">关闭</span>
</div>
<div class="cartList">
<ul>
<li>商品信息</li>
<li>商品图片</li>
<li>单价（元）</li>
<li>数量</li>
<li>金额（元）</li>
<li>操作</li>
</ul>
<ul style="display: flex;justify-content: space-between;align-items: center" id="first">
<li>《平凡的世界》</li>
<li><img src="/images/ad/618.jpg" alt="" width="50" height="50"></li>
<li>¥<input type="text" name="price" value="21.90"></li>
<li><input type="button" name="minus" value="-" onclick="minus(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0)" ></li>
<li id="price0">¥21.90</li>
<li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
</ul>
<ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;">
<li>《昆虫记》</li>
<li><img src="/images/ad/618.jpg" alt="" width="50" height="50"></li>
<li>¥<input type="text" name="price" value="24.00"></li>
<li><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1)"></li>
<li id="price1">¥24.00</li>
<li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
</ul>
<ol>
<li id="totalPrice"> </li>
<li><span>结算</span></li>
</ol>
</div>
</div>
</body>
</html>
<script>
//减法
function minus(index) {
//获取当前数量的值
var amounts=document.getElementsByName("amount");
//得到第一个amount的元素的value属性的值
var count=parseInt(amounts[index].value); //数量加1
if (count<=1){
alert("不能再减了，快没了！！");
} else {
//得到第一个amount的元素的value属性的值
var count=parseInt(amounts[index].value)-1; //数量加1
//重新把count的值绑定在数量文本框里
amounts[index].value=count;
var prices=document.getElementsByName("price");
var price=parseFloat(prices[index].value);
//乘以Math.pow(10,2)的原因为避免失真
var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
document.getElementById("price"+index).innerHTML="¥："+totalMoney;
}
total();
}
//加法
function plus(index) {
//获取当前数量的值
var amounts=document.getElementsByName("amount");
//得到第一个amount的元素的value属性的值
var count=parseInt(amounts[index].value)+1; //数量加1
//重新把count的值绑定在数量文本框里
amounts[index].value=count;
//当前操作端口的价格也要重新计算
//得到当前端口的单价
var prices=document.getElementsByName("price");
var price=parseFloat(prices[index].value);
//乘以Math.pow(10,2)的原因为避免失真
var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
//把当前价格显示在文本中
document.getElementById("price"+index).innerHTML="¥："+totalMoney;
total();
}
//求总金额
function total() {
//得到所有的数量
var counts=document.getElementsByName("amount");
//得到所有的单价
var prices=document.getElementsByName("price");
var sumMoney=0;
for (var i=0;i<counts.length;i++){
//乘以Math.pow(10,2)的原因为避免失真
sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
}
//把总金额显示再指定的元素中
document.getElementById("totalPrice").innerHTML="¥："+sumMoney;
}
//加入收藏
function save() {
if (confirm("确认要收藏吗？")){
alert("收藏成功！");
}
}
//删除
function delete1() {
if (confirm("确认要删除吗？")) {
var del=document.getElementById("first");
del.parentnode.removeChild(del);
alert("删除成功！！");
}
}
</script>试试吧！！！希望能帮助到大家。
- 上一篇：Apache HTTP Server Project 补丁利用零日漏洞 - Web前端
- 下一篇：已经是最后一篇了
相关推荐
- Apache HTTP Server Project 补丁利用零日漏洞 - Web前端
- React 教程：从头开始构建计算器应用程序 - Web前端
- VUE开发小应用：查看各地区天气预报 - Web前端
- Windows 11 升级：首先要问的五个问题 - Web前端
- 如何使用 React Textfit 创建响应式 React 组件 - Web前端
- Google AdSense最新消息：即将改用的最高出价竞价机制，是利是弊呢？ - Web前端
- vue每日一学：理解渲染方式render和template以及它们之间的区别 - Web前端
- 谷歌SEO优化：Google搜索的运作方式进阶指南 - Web前端
- 谷歌SEO优化：了解下Google搜索的运作方式的基础知识 - Web前端
- vue每日一学：了解监视（侦听）属性watch和computed以及它们之间的区别 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 9jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性