购物车页面

最新推荐文章于 2024-05-18 20:31:13 发布
最新推荐文章于 2024-05-18 20:31:13 发布
阅读量3.4k 收藏 8
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_36583119/article/details/80540447
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<script type="text/javascript">  
   function jian(obj){
	    var oNum = obj.parentNode.children[2];
		var iNum = parseInt(oNum.innerHTML);
		if(iNum>1){
			var flag = confirm("您本次修改的商品数量为："+(iNum - 1)+"请确认以上信息是否有误！");
			if(flag)
			    oNum.innerHTML = iNum - 1 ;
		}
   };
   function jia(obj,i){
	    var oNum = obj.parentNode.children[2];
		var iNum = parseInt(oNum.innerHTML);
		if(iNum<i){
			var flag = confirm("您本次修改的商品数量为："+(iNum + 1)+"请确认以上信息是否有误！");
			if(flag)
			      oNum.innerHTML = iNum + 1 ;
		}
   };

   function checkAll(obj){
	    var cbs = document.getElementsByTagName("input"); 
		for(i = 0; i<cbs.length;i++){
			if(obj.checked == true&&cbs[i].parentNode.parentNode.parentNode.parentNode==obj.parentNode.parentNode.parentNode)
			    cbs[i].checked = true;
			else if(obj.checked == false&&cbs[i].parentNode.parentNode.parentNode.parentNode==obj.parentNode.parentNode.parentNode)
			    cbs[i].checked = false;
			else if(obj.checked == true&&obj.name=="buy_all")
			    cbs[i].checked = true;
			else if(obj.checked == false&&obj.name=="buy_all")
			    cbs[i].checked = false;
		}       
   }
</script>
<script src="js/jquery-3.3.1.js"></script>
<script>
  $(function(){
	    $("#delBtn").click(function(){
		       if(!confirm("一旦删除将无法恢复！您确定要删除吗？"))	{
				   return;
			   }else{
				   $(".add:checked").parent().parent().remove();
				   $(".store").each(function(){
					         if($(this).children(".store_content").children(".pro").children(".pro_select").children(".add").length==0)
				                     $(this).remove(); 
					});
			   }
		});  
  });
</script>
<style>
body{width:1200px; margin:auto;}
*{ margin:0; padding:0;}
.frame{width:100%; height:auto;clear:both;}




#head{
	
}
#head button{
	float:right;
	width:100px;
	height:25px;
	margin:5px;
}
/*商店名称*/
.store .store_head{
	width:100%;
	height:auto;
	background-color:#999;
	padding-top:10px;
	padding-bottom:10px;
	clear:both;
	border:1px solid #999;
}
.store .store_head h3,a{
	text-align:left;
	color:white;
}

/*从属于该商店的商品们*/
.store .store_content{
	width:100%;
	overflow:hidden;
}
.store .store_content .pro{
	float:left;
	border:1px solid #999;
	width:49.83%;
}
.store .store_content .pro div{
	float:left;
	height:120px;
}
/*复选框*/
.pro_select{
	width:10%;
}
.pro_select input{
	margin-top:50px;
}
/*商品图片*/
.pro_img{
	width:20%;
}
.pro_img img{
	width:90%;
	height:100%;
}
/*商品简介*/
.pro_brief{
	width:30%;
}
.pro_brief p{
	margin-top:10px;
}
/*单价*/
.pro_price{
	width:20%;
}
.pro h4{
	margin-top:10px;
}
.pro_price p{
	color:red;
	margin-top:20px;
}


/*加减器*/
.pro_counter{
	width:20%;
}
.pro_counter h4{
	margin-top:10px;
}
.pro_counter span{
	width:35px;
    height:20px;
	float:left;
	border:1px solid #999;
	margin-top:20px;
	cursor:pointer;
}




#buy{
	background-color:#F00;
	width:100%;
	height:100px;
	position:fixed !important;
	left:0px;
	bottom:0px;
	z-index:1;
	color:white;
}

#buy #buy_all{
	float:left;
	padding-top:40px;
	padding-left:100px;
}
#buy #heji{
	float:right;
	padding-top:40px;
	padding-right:10px;
}
#buy #jiesuan{
	float:right;
	width:200px;
	height:100%;
}
#jiesuan input{
	width:100%;
	height:100%;
	background-color:#F60;
	border:0;
	color:white;
	font-size:24px;
}
</style>
</head>

<body>

<div><iframe src="top.html" class="frame" scrolling="no" frameborder="0"></iframe></div>


<center>

<div id="head"><hr/>
     <h1>购物车</h1>
     <button id="moveBtn">移入收藏夹</button>
     <button id="delBtn">删除</button>
</div>

<div id="content">
    <form action="#" method="post">
    <!--商店-->
    <div class="store">
       <!--商店名称-->
       <div class="store_head"><h3>  <input name="$" type="checkbox" value="" οnclick="checkAll(this)"/> <a href="#"><a href="">小麦二手电脑旗舰店</a></h3></div>
       <!--商品-->
       <div class="store_content">
       
           <div class="pro">
              <div class="pro_select"><input name="add" class="add" type="checkbox" /></div>
              <div class="pro_img"><a href="商品详情.html" target="_blank"><img src="img/list0.jpg"/></a></div>
              <div class="pro_brief"><p>二手9成新ThinkPad笔记本电脑4G内存/2G独显/128G固态硬盘二手9成新ThinkPad笔记本电脑4G内存/2G独显/128G固态硬盘</p></div>
              <div class="pro_price"><h4>单价：</h4><p>¥2999777777</p></div>
              <div class="pro_counter">
                 <h4>数量：</h4>
                 <span id="jian1" οnclick="jian(this)">-</span>
                 <span id="num1">1</span>
                 <span id="jia1" οnclick="jia(this,5)">+</span>
              </div>
           </div>
           
       </div>
    </div>
    
    <div class="store">
       <!--商店名称-->
       <div class="store_head"><h3>  <input  type="checkbox" value="" οnclick="checkAll(this)"/> <a href="#"><a href="">小麦二手电脑旗舰店</a></h3></div>
       <!--商品-->
       <div class="store_content">
       
           <div class="pro">
              <div class="pro_select"><input name="add" class="add" type="checkbox" /></div>
              <div class="pro_img"><a href="商品详情.html" target="_blank"><img src="img/list0.jpg"/></a></div>
              <div class="pro_brief"><p>二手9成新ThinkPad笔记本电脑4G内存/2G独显/128G固态硬盘二手9成新ThinkPad笔记本电脑4G内存/2G独显/128G固态硬盘</p></div>
              <div class="pro_price"><h4>单价：</h4><p>¥2999777777</p></div>
              <div class="pro_counter">
                 <h4>数量：</h4>
                 <span id="jian1" οnclick="jian(this)">-</span>
                 <span id="num1">1</span>
                 <span id="jia1" οnclick="jia(this,5)">+</span>
              </div>
           </div>
       </div>
    </div>
    
    <div id="buy">
       <div id="buy_all"><h2><input type="checkbox" name="buy_all" οnclick="checkAll(this)"/> 全选</h2></div>
       <div id="jiesuan"><input type="submit"/></div>
       <div id="heji"><h2>合计：¥100000000000</h2></div>
    </div>
    
    
    </form>
</div>


</center>



<div><iframe src="footer.html" class="frame" scrolling="no" frameborder="0"></iframe></div>


</body>
</html>

我叫吴桂鑫
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过HTML实现购物车页面
m0_58496493的博客
06-17 2219
购物车
制作购物车页面
koujiaodahanyuan的博客
06-08 2215
要求： 实现商品金额自动计算功能 • 需求说明 • 根据商品的数量和单价计算每行商品的小计 • 根据商品数量、单价和积分，计算商品总价和积分 ###实现的效果图 购物车页面 //删除一行元素 $("[name =del]").click(function () { if (confirm("确定删除？")) { $(this).parent().parent().prev().rem
仿京东购物车网页页面.html
03-25
简单的网页还原，自己练习自写代码。实现了购物车静态页面的布局，样式等操作步骤。
访问购物车节点（JavaScript）
weixin_48112113的博客
07-21 5882
1. 任务要求 1）DOM对象模型； 2）掌握通过document.getElementsByName函数访问document对象的Html文档节点； 3）JavaScript函数使用； 4）confirm对话框的使用。 2. 需求说明 (1)单击“+”按钮，数据量文本框可以数字变大，单击“-”按钮，数据量文本框可以数字变小，当数字为1时，会提示“不能再减！”，且相应的小计处会显示当前记录的总价； ...
制作京东购物车，包含html+js+css完整代码
最新发布
m0_74937643的博客
05-18 1200
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
Html购物车
weixin_64938628的博客
03-12 1万+
一.登陆界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登陆界面</title> <style type="text/css"> html,body{ height:100%;/*高度为屏幕的百分之百*/ margin: 0px;/**/ } body{/*背景图片*/
HTML淘宝购物车页面的实现
热门推荐
qq_46007633的博客
03-22 1万+
仿照淘宝购物车。主要包括以下知识，超级简单，没使用CSS，很多功能没有实现，只是一个仿造的购物车页面。 使用div标签，将整个页面划分为上中下相应的几个模块。 使用高级标签，包含<caption>标题和<thead>表头<tbody>主体以及<tfoot>表尾，对表格进行横向分组，将淘宝购物车分成相应的几部分。 列出几个小标题，比如单价、数量、金额、操作等。 根据确定的列，使用相应的图像标签、超链接、表单域等
淘宝购物车页面
chaoyv
12-06 3300
;style type="text/css"&gt; body { margin:0px; padding:0px; font-size:12px; line-height:20px; color:#333; } ul, li, ol, h1, dl, dd { list-style:none; margin:0px; padding:0px; } a { color:#1965b3; text-decoration: none;
一个简单的当当网购物车页面，可以实现简单购物
05-29
【标题】：“一个简单的当当网购物车页面”是指一种基于网页技术实现的模拟当当网购物车功能的示例项目。这个项目旨在帮助初学者理解购物车逻辑以及相关前端和后端技术的运用。 【描述】：这个简单购物车页面能够...
html购物车页面
01-08
今天博主给大家分享一个自己做的购物车页面，使用的是html+css实现： 话不多说，直接上图： 这个页面只是实现了其布局视图，没有使用js或者jquery相关语言，在博主看来是比较利于我们将其加入到自己的程序中的 以下...
当当购物车页面_当当购物车页面_html网页购物车_js当当购物车_
10-01
在购物车页面中，JavaScript的主要作用包括： - 动态更新：当用户修改商品数量或选择商品时，JavaScript可以实时更新总价和商品总数。 - 本地存储：使用`localStorage`或`sessionStorage`来保存用户的购物车信息...
练习2：访问当当购物车页面节点
11-21
北大青鸟，accp8.0,练习2：访问当当购物车页面节点。..
jQuery淘宝购物车页面商品结算
05-18
在本项目中，"jQuery淘宝购物车页面商品结算"是一个典型的电商网站功能的实现，主要目的是让学生或开发者学习如何利用jQuery技术构建一个类似淘宝购物车的结算系统。在这个过程中，我们将涉及HTML结构、CSS样式以及...
ExpandableListView实现购物车页面
07-05
在Android应用开发中，"ExpandableListView实现购物车页面"是一个常见的需求，它涉及到用户界面设计、数据管理和交互。ExpandableListView是Android SDK提供的一种可扩展的列表视图，允许用户展示分组数据，每组内...
HTML5+CSS3实现华为商城和购物车（课程设计大作业）
m0_63512120的博客
11-26 3029
这是我用HTML5+CSS3实现的华为商城和华为购物车页面 其中华为商城有二级页面！ 页面结构相对简单不太复杂，适合给大家当个课程设计作业！ 还有一些其他关于华为的页面，比如登录、购物车、官网之类的，都放在文章末尾网盘里面了！还有一些其他类型的页面大家可以参考一下，每个网页都很有特色 HTML5+CSS3+JS实现小米商城和购物车 HTML5+CSS3实现小米商城 HTML5+CSS3实现小米官网 HTML5+CSS3实现哔哩哔哩主页 HTML5+CSS3实现QQ注册页面 HTML5+CSS3实现华为官网
HTML+JS（购物车案例）
2301_77638787的博客
08-21 2657
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易
js+Dom操作实现购物车的全选、删除、数量变化，源码
m0_59642141的博客
08-16 1267
js实现购物车
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 1万+
HTML+CSS+JavaScript实现网络购物车
HTML购物车示例（勾选、删除、添加和结算功能）
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
05-05 9736
以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID`以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。
uniapp购物车页面
09-22
购物车页面的实现可以通过以下步骤完成： 1. 首先，在页面中添加一个跳转按钮，用于跳转到购物车页面。 2. 在购物车页面，需要展示购物车中的商品列表，包括商品的图片、名称、价格等信息。 3. 实现购物车页面的功能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值