访问购物车节点（JavaScript）

最新推荐文章于 2024-06-18 11:26:21 发布

今天我学习

最新推荐文章于 2024-06-18 11:26:21 发布

阅读量5.8k

点赞数 14

分类专栏： JavaScript Web2课设

本文链接：https://blog.csdn.net/weixin_48112113/article/details/118969644

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 5 订阅

订阅专栏

Web2课设

8 篇文章 0 订阅

订阅专栏

1. 任务要求

1）DOM对象模型；

2）掌握通过document.getElementsByName函数访问document对象的Html文档节点；

3）JavaScript函数使用；

4）confirm对话框的使用。

2. 需求说明

(1)单击“+”按钮，数据量文本框可以数字变大，单击“-”按钮，数据量文本框可以数字变小，当数字为1时，会提示“不能再减！”，且相应的小计处会显示当前记录的总价；

(2)单击“删除”按钮，弹出相应的confirm确认消息框；

(3)单击“关闭”按钮，弹出相应的confirm确认消息框；

(4)单击“结算”按钮，弹出相应的alert消息提示框，显示购买商品的消息以及总价格。

3. 实现思路

1）建立函数。函数plus（），价格随着商品数量而增加的函数。函数minus（），价格随着商品数量而减少的函数，当商品数量减到1时，用alert提示不能再减少了。删除函数del（），移入收藏函数collection（），关闭网页函数close_plan（），计算总价格函数accounts（）。

2）删除函数del（），如果确定删除，则使用alert提示删除成功。移入收藏函数collection（）相同。

3）关闭网页函数close_plan（），如果确认关闭网页，则使用window.close()将网页关闭。

4. 实现代码（JS代码）

// JavaScript Document
function plus(n){
	var amount=document.getElementsByName("amount")[n].value;
	document.getElementsByName("amount")[n].value=Number(amount)+1;
	var price=document.getElementsByName("price")[n].value;
	document.getElementById("price"+n).innerHTML="¥"+(Number(amount)+1)*Number(price)+".00";
} 
function minus(n){
	var amount=document.getElementsByName("amount")[n].value;
	document.getElementsByName("amount")[n].value=Number(amount)-1;
	var price=document.getElementsByName("price")[n].value;
	document.getElementById("price"+n).innerHTML="¥"+(Number(amount)-1)*Number(price)+".00";
	if (amount==1){
		document.getElementsByName("amount")[n].value=1;
		document.getElementById("price"+n).innerHTML="¥"+Number(price)+".00";
		alert("不能再减少了！");
	}
}
function del(){
	var answer=confirm("确定要删除吗？");
	if (answer==true){
		alert("删除成功！");	
	}
}
function collection(){
	var answer=confirm("确定移入收藏吗？");
	if (answer==true){
		alert("成功移入收藏！");
	}
}
function close_plan(){
	var answer=confirm("确定要关闭该网页吗？");
	if (answer==true){
		window.close();
	}
}
function accounts(){
	var sum=0;
	for (var i=0;i<2;i++){
		sum=sum+Number(document.getElementsByName("amount")[i].value)*Number(document.getElementsByName("price")[i].value);
	}
	var k=Number(document.getElementsByName("amount")[0].value)+Number(document.getElementsByName("amount")[1].value);
	confirm("您本次购买的商品信息如下：\n商品名称：雷怕；雷神\n商品数量："+k+"件\n商品总价："+sum+"元\n运费：0元\n\n请确认以上信息是否有误！！！");
}

5. 运行结果

6. 其他代码（图片部分需要注意一下）

.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<script language="javascript" src="js/shopping.js"></script>
<body>

<div class="content">
    <div class="logo">
        <img src="img/logo.jpg"><span onclick="close_plan();">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
            <li id="price0">¥159.00</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>¥<input type="text" name="price" value="159.00"></li>
           
        </ul>
        <ul>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
            <li id="price1">¥132.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>¥<input type="text" name="price" value="132.00"></li>
            
            
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span onclick="accounts();">结 算</span></li>
        </ol>
    </div>
</div>
</body>
</html>

.css

body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
ul,li,ol{list-style: none;}
.content{
	width: 845px; 
	margin: 0 auto;  
	font-family: "微软雅黑";
	background-image: url(../img/background2.jpg);//url图片部分需要注意（这部分为背景图片，可省略）
}
.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("../img/shoppingBg.jpg") no-repeat;//url图片部分需要注意
    background-size:100%; 
    height: 414px;
    overflow: hidden;
}
.cartList ul{
    float: right;
    width: 550px;
}
.cartList ul:nth-of-type(1){
    margin-top: 96px;
}
.cartList ul:nth-of-type(2){
    margin-top:70px;
}
.cartList ul li{
    font-family: "微软雅黑";
    font-size: 12px;
    color: #666666;
    text-align: center;
    line-height: 25px;
    float: right;
}
.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: 60px;
}
.cartList ol li{
    float: left;
}
.cartList ol li:nth-of-type(1){
    color: #ff0000;
    width: 100px;
    font-weight: 900;
}
.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;}

相关图片如下：

今天我学习

关注

14
点赞
踩
69

收藏

觉得还不错? 一键收藏
4
评论
访问购物车节点（JavaScript）

1. 任务要求1）DOM对象模型；2）掌握通过document.getElementsByName函数访问document对象的Html文档节点；3）JavaScript函数使用；4）confirm对话框的使用。2. 需求说明(1)单击“+”按钮，数据量文本框可以数字变大，单击“-”按钮，数据量文本框可以数字变小，当数字为1时，会提示“不能再减！”，且相应的小计处会显示当前记录的总价；...
复制链接

扫一扫