[网页编程] HTML+CSS+JavaScript 购物车搭建实操

prtyaa
prtyaa 2023-12-27 15:59:24 64606
分类专栏： 资讯

之前的实操,是通过HTML+CSS实现了页面的呈现,但是页面仍旧是静态的,不能点击相关的按钮实现相关的效果,学了JavaScript之后,我们就可以对页面进行优化,具体效果如下

动图封面
 

实现代码

CSS:

.nav{
	
	height: 30px;
	
	background-color: #f1f1f1;
	
}


.warp{
	
	width: 1000px;
	
	margin: 0px auto;
	
}

.nav_ul1,.nav_ul2 li{
	
	float: left;
	
}

.nav_ul1 li{
	
	float: left;
	
	line-height: 30px;
	
	margin-right: 20px;
}

.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{
	
	font-size: 12px;
	
	color: gray;
	
}

.nav_ul2{
	
	float: right;
	
}
.nav_ul2 li,.nav_ul2 span{
	
	line-height: 30px;
	
	margin-left: 15px;
	
}
.nav a:hover{
	
	color: red;
	
}

/*搜索框开始*/

.search{
	
	margin-top: 20px;
	
}

.search img{
	/*清除之前的样式*/
	clear: both;
	
	float: left;
	
}

.search_div{
	
	float: right;
	
	margin-top: 25px;
	
}
.search_text{
	
	width: 265px;
	
	height: 21px;
	
	
	border: 3px solid #c91623;
	
	position: relative;
	
	left: 4px;
	
	top: -1px;
}

.search_but{
	
	width: 51px;
	
	height: 29px;
	
	background-color: #c91623;
	
	border: 0px;
	
	color: #FFFFFF;
	
}

/*搜索框结束*/

/*标题开始*/
.title{
	
	margin-top: 130px;
	
}

.title h3{
	
	float: left;
	
	font-size: 23px;
	
	color:#c91623 ;
}


.title div{
	
	
	float: right;
	
	font-size: 14px;
	
	color:gray ;
}
/*标题结束*/

/*显示菜单的开始*/
.tips{
	
	width: 1000px;
	
	height: 50px;
	
	background-color: #f1f1f1;
	
	margin-top: 165px;
	
	border: 1px  solid  #e9e9e9;
	
}

.tips li{
	
	float: left;
	
	line-height: 50px;
	
	font-size: 12px;
	
	color: gray;
	
	
	
}

.tips li:nth-child(1){width: 90px; border-top: 3px solid #c91623 ;}

.tips li:nth-child(2){margin-left: 80px;}

.tips li:nth-child(3){margin-left: 430px;}

.tips li:nth-child(4){margin-left: 70px;}

.tips li:nth-child(5){margin-left: 110px;}

.tips li:nth-child(6){margin-left: 50px;}

/*显示菜单的结束*/


/*商品详情展示开始*/
.info{
	 width: 1000px;
	 
	 height: 125px;
	 
	 
	 background-color: #fff4e8;
	 
	 border: 1px  solid gray;
	 
	 margin-top: 30px;
	
	
	border-top: 3px solid  gray;
}

.info li{
	  float:  left;	
	  
	  margin-top: 20px;
}
.info a{
	
	font-size: 12px;
	
	color: #333333;
	
}
.info_1{
	
	margin-left: 23px;
	
}
.info_2{
	
	margin-left: 15px;
	
	border: 1px  solid gray;
	
}
.info_3{
	  
	  width: 270px;
	  
	  height: 20px;
	
}

.info_4{
	
	 margin-left: 45px;
	
}
.info_5{
	
	margin-left: 70px;
	
}
.info_6{
	
	 margin-left: 40px;
}
.info_6 input{
	
	width: 30px;
	
	height: 12px;
	
	text-align: center;
	
	position: relative;
	
	top: -2px;
	
	left: -5px;
	
}

.info_6 button{
	
	 width: 30px;
	 
	 height: 18px;
}
.bot{
	
	 position: relative;
	
	left: -10px;
}
.info_7{
	 width: 120px;
	 
}

/*商品详情展示结束*/


/*结算模块开始*/

.balance{
	
	width: 1000px;
	
	height: 50px;
	
	border: 1px  solid  gray;
	
	
	margin-top: 30px;
	
}

.balance_ul1,.balance_ul1>li,.balance_ul2>li{
	
	float: left;
	
	line-height: 50px;
	
	margin-left: 14px;
	
	
}
.balance_ul2{
	
	float: right;
}

.butt{
	
	width: 100px;
	
	height: 50px;
	
	background-color: #C91623;
	
	border: 0px;
	
	color: #FFFFFF;
	
	font-size: 20px;
	
	font-weight: bold;
	
}

.balance span{
	
	
	 font-size: 25px;
	 
	 color: #C91623 ;
	
	font-weight: bold;
}

.balance_ul2 li:nth-child(1){width: 120px;}

.balance_ul2 li:nth-child(2){width: 150px;}
/*结算模块结束*/

JavaScript

//获得所有的多选框对象
var  fav=document.getElementsByName("fav");

//判断是否全选操作
function checkTest1(th){
	
	var  flag =th.checked;
	
	
	for(var i in fav){
			
		fav[i].checked=flag;
			
		}

}
//单选决定全选操作
function  checkTest2(){
	 
	  var  flag =true;
	 
	  for(var i=1;i<fav.length-1;i++){
	  	
	  	 if(!fav[i].checked){
	  	 	
	  	 	flag=false;
	  	 	
	  	 	break;
	  	 }
	  }
	  
	  //决定框是否勾选
	  fav[0].checked=flag;
	  
	  fav[fav.length-1].checked=flag;
	  
	  
	  //价格是否统计
	  
	  //商品的总价格
	  var  zong =0;
	  
	  //统计是否有勾选的对象
	  var num=0;
	  
	  //统计商品的数量
	  var spNum=0;
	  
	  for(var i=1;i<fav.length-1;i++){
	  	
	  	
	  	   if(fav[i].checked){
	  	   	
	  	   	  num++;
	  	   	  
	  	   	 //获得ul父节点
	  	   	 var par=fav[i].parentNode.parentNode;
	  	   	 //获得指定ul下面的所有的li
	  	   	 var li= par.getElementsByTagName("li");
	  	   	 
	  	   	 //单个商品的总价格
	  	   	 var z=li[6].innerText.split("￥")[1];
	  	   	 
	  	   	 //获得所有商品的总价格
	  	   	 zong+=Number(z);
	  	   	 
	  	   	 document.getElementById("zongz").innerText=zong;
	  	   	 
	  	   	 
	  	   	 //获得商品的数量
	  	   	 var z2=li[5].getElementsByTagName("input");
	  	   	 
	  	   	 var  num2=z2[0].value;
	  	   	 
	  	   	 spNum+=Number(num2);
	  	   	 
	  	   	 //获得商品数量统计的对象
	  	   	 
	  	   	 document.getElementById("snum").innerText=spNum;
	  	   	 
	  	   }
	  	
	  }
	  
	  
	  if(num==0){
	  	
	  	document.getElementById("zongz").innerText=0;
	  	
	  	document.getElementById("snum").innerText=0;
	  	
	  }
	
}

//控制数量的增加和减少
function  checkTest3(th,sig){
	
	var pre;
	
	if(sig=="1"){
	//获得下一个节点
	pre=th.nextElementSibling;	
	
	if(Number(pre.value)>0){
		
		//获得节点的value值
	pre.value=Number(pre.value)-1;
	}
	
	}else {
		
	//获得上一个节点对象
	 pre=th.previousElementSibling;
	 //获得节点的value值
	pre.value=Number(pre.value)+1;
	}
	
	//计算每一个商品总的价格
	//获得每一个商品的单价
	var val=pre.parentNode.previousElementSibling.innerHTML;
	
	//计算总的价格
	var zong =Number(val)*Number(pre.value);
	
	//把总的价格赋值给指定的对象
	
	pre.parentNode.nextElementSibling.innerHTML="￥"+zong;
	
	
	
	
}

//删除指定的节点
function  checkTest4(th){
	
	//获得父节点div
	
	var div=th.parentNode.parentNode.parentNode;
	
	div.remove();
	
	
}

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		
		
		<link rel="stylesheet" type="text/css" href="css/jd.css"/>
		
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
		
		<script type="text/javascript" src="js/jd.js" ></script>
	
		
	</head>
	<body>
		
		<!--导航开始-->
		  
		  <div class="nav">
		  	
		  	
		  	 <div class="warp">
		  	 	
		  	 	  <ul class="nav_ul1">
		  	 	  	<li><a href=""><i class="iconfont">&#xe6d3;</i> 京东首页</a></li>
		  	 	  	<li><a href="">配送到：北京</a></li>
		  	 	  </ul>
		  	 	
		  	 	
		  	 	  <ul class="nav_ul2">
		  	 	  	<li><a href="">洋洋宝贝</a><span>|</span></li>
		  	 	  	<li><a href="">我的订单</a><span>|</span></li>
		  	 	  	<li><a href="">我的京东</a><span>|</span></li>
		  	 	  	<li><a href="">京东会员</a><span>|</span></li>
		  	 	  	<li><a href="">企业采购</a><span>|</span></li>
		  	 	  	<li><a href="">京东手机</a><span>|</span></li>
		  	 	  	<li><a href="">关注京东</a><span>|</span></li>
		  	 	  	<li><a href="">客户服务</a><span>|</span></li>
		  	 	  	<li><a href="">网站导航</a></li>
		  	 	  </ul>
		  	 	
		  	 </div>
		  	
		  	
		  	
		  </div>
		  
		
		<!--导航结束-->
		
		<!--搜索框开始-->
		  <div class="search">
		  	
		  	  <div class="warp">
		  	  	  
		  	  	  
		  	  	  <img src="img/logo.jpg" />
		  	  	  
		  	  	  
		  	  	  <div class="search_div">
		  	  	  	 
		  	  	  	  <input type="text" class="search_text" />
		  	  	  	
		  	  	  	  <input type="button" value="搜索"  class="search_but"/>
		  	  	  	
		  	  	  </div>
		  	  	
		  	  	
		  	  </div>
		  	
		  </div>
		
		<!--搜索框结束-->
		
		<!--标题开始-->
		  <div class="title warp">
		  	
		  	  <h3>全部商品</h3>
		  	   
		  	  <div>
		  	  	 
		  	  	 <span>配送到</span>
		  	  	
		  	  	<select>
		  	  		<option>昌平区</option>
		  	  		
		  	  		<option>顺义区</option>
		  	  		
		  	  		<option>大兴区</option>
		  	  		
		  	  		<option>朝阳区</option>
		  	  		
		  	  		<option>昌平区</option>
		  	  		
		  	  		
		  	  	</select>
		  	  	
		  	  </div>
		  	
		  </div>
		
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		  <div class="tips warp">
		  	
		  	 <ul>
		  	 	<li>
		  	 		<input type="checkbox" name="fav" id="all" onclick="checkTest1(this),checkTest2()"/>
		  	 		全选
		  	 	</li>
		  	 	<li>商品</li>
		  	 	<li>单价</li>
		  	 	<li>数量</li>
		  	 	<li>小计</li>
		  	 	<li>操作</li>
		  	 </ul>
		  	
		  	
		  </div>
		<!--显示菜单的结束-->
		
		<!--商品详情展示开始-->
		  <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox"   name="fav" onclick="checkTest2()"/> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  </div>
		
		 <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		  
		   <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" name="fav"  onclick="checkTest2()"/> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		<!--商品详情展示结束-->
		
		<!--结算开始-->
		
	   <div class="balance warp">
	   	
	   	   <ul class="balance_ul1">
	   	   	<li>
	   	   		
	   	   		<input type="checkbox" name="fav" id="" value=""  onclick="checkTest1(this),checkTest2()"/>
	   	   		全选
	   	   	</li>
	   	   	<li><a>删除选中商品</a></li>
	   	   	<li><a>移到我的关注</a></li>
	   	   	<li><a>清除下柜商品</a></li>
	   	   </ul>
	   	   
	   	   <ul class="balance_ul2">
	   	   	
	   	   	 <li>已经选择<span id="snum">0</span>件商品</li>
	   	   	 <li>总价 <span id="zongz">￥0</span></li>
	   	   	 <li>
	   	   	 	<button class="butt">去结算</button>
	   	   	 	
	   	   	 </li>
	   	   	
	   	   </ul>
	   	
	   	
	   </div>
		
		
		<!--结算结束-->
	</body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31525
赞同 0
评论 0 条

相关文章

  • [网页编程]-08 JavaScript 内置对象 2023-12-27 63891 浏览

    JavaScript中内置里几个对象,我们就挑常用的来学习就好JavaScript教程导读_w3cschool​www.w3cschool.cn/javascript/js-tutorial.html

  • [网页编程]-15 JavaScript Document节点 2023-12-27 65132 浏览

    document节点,可以简单的理解为就是我们网页内显示的内容的全部标签,节点呈树形结构下方两图一致蓝色元素节点橙色属性节点绿色文本节点

  • [网页编程]-14 JavaScript Bom对象中常用属性 2023-12-27 66067 浏览

    Navigator返回由客户机发送到服务器的user-agent的头部信息(用户代理对象)判断是移动端还是PC端Locationurl:查看地址href:查看主机地址hostname:主机地址port:端口号/*Lo

  • [网页编程]-13 JavaScript BOM对象中常用的方法 2023-12-27 64805 浏览

    注意,下面所有方法中的Window是可以省略的弹窗第一种只有确定按钮/*三种弹框方式*///第一种functiontk1(){//window可以省window.alert("第一种弹框方式");}

  • [网页编程]-12 JavaScript BOM和DOM对象 2023-12-27 64130 浏览

    简单的来说,整个浏览器的结构就是BOM这包括着浏览器的全部而Dom就是中间我们浏览内容的那一块Bom包含Dom●什么是BOM●BOM是Browser0bjectModel的简写，即浏览器对象模型。●BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法●BOM没有统一的标准(每种客户端都可以自定标准)。●BOM的顶层是window对象●什么是DOM●DOM;是DocumentObjectMo

  • [网页编程]-11 JavaScript 键盘code表 2023-12-27 66577 浏览

    keycode8=BackSpaceBackSpacekeycode9=TabTabkeycode12=Clearkeycode13=Enterkeycode16=Shift_Lkeycode17=Control_Lkeycode18=Alt_Lkeycode19=Pausekeycode20=Caps_Lockkeycode27=EscapeEscapekeycode32=spacespacek

  • [网页编程]-10 JavaScript event事件 2023-12-27 65610 浏览

    满足某些条件就会被触发例如单击常用操作:单击事件:onclick最常用双击事件:ondblclick获得焦点事件:onfocus失去焦点事件:onblur鼠标移动事件:onmousemove鼠标离开事件:onmouseout鼠标抬起事件:onmouseover键盘抬起事件:onkeyup页面加载事件:onload要一个操作触发多个事件只需要在事件中以分号隔开即可

  • [网页编程]-09 JavaScript Array数组 2023-12-27 65658 浏览

    数组声明的四种方式方式一最常用的,简略的声明了数组,但是没给长度vararr4=["你好数组!",123,newDate(),false];方式二只是声明了数组,但是给有给定长度和内容vararr=newArray();方式三声明了数组以及长度,但是没有给定数组内具体内容vararr2=newArray(5);方式四声明了数组以及其中的内容,但是没有给定具体长度vararr3=newArray("

  • [网页编程]-02 JavaScript 声明与引入 2023-12-27 62506 浏览

    js有两种使用方式1可以直接写在html文件内2可以引入外部的js文件通过script命令其中src属性声明js文件在哪里./*【1】JS引入的方式*/alert("【1】JS引入

  • [网页编程]-03 JavaScript 变量 2023-12-27 67192 浏览

    【1】JS中变量的声明var变量名=值；【2】JS中变量的使用注意的事项A、js中的变量的名称和java中标识符的命名保持一致就可以了。B、js中变量名称是可以重复的，但是后者的名称会把前者的名称值覆盖C、js中末尾即使没有分号结束也是可以的，但是不推荐大家这样书写。

prtyaa
prtyaaL0
粉丝 1 发表 2554 + 关注 私信
上周热门
银河麒麟添加网络打印机时，出现“client-error-not-possible”错误提示  1326
银河麒麟打印带有图像的文档时出错  1239
银河麒麟添加打印机时，出现“server-error-internal-error”  1026
统信桌面专业版【如何查询系统安装时间】  954
统信操作系统各版本介绍  947
统信桌面专业版【全盘安装UOS系统】介绍  906
麒麟系统也能完整体验微信啦！  892
统信【启动盘制作工具】使用介绍  502
统信桌面专业版【一个U盘做多个系统启动盘】的方法  444
信刻全自动档案蓝光光盘检测一体机  389
本周热议
我的信创开放社区兼职赚钱历程 40
今天你签到了吗？ 27
信创开放社区邀请他人注册的具体步骤如下 15
如何玩转信创开放社区—从小白进阶到专家 15
方德桌面操作系统 14
我有15积分有什么用? 13
用抖音玩法闯信创开放社区——用平台宣传企业产品服务 13
如何让你先人一步获得悬赏问题信息？（创作者必看） 12
2024中国信创产业发展大会暨中国信息科技创新与应用博览会 9
中央国家机关政府采购中心：应当将CPU、操作系统符合安全可靠测评要求纳入采购需求 8
热门标签更多

添加我为好友，拉您入交流群！

请使用微信扫一扫!