商品样式及详情

最新推荐文章于 2024-10-01 20:12:28 发布

IKUNzhenin

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量83

点赞数

分类专栏： js练手功能 js理论知识点文章标签： javascript 前端

本文链接：https://blog.csdn.net/IKUNzhenin/article/details/134268051

版权

js练手功能同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

js理论知识点

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>商品详情</title>
		<link rel="stylesheet" href="./css/goods.css" />
		<script src="./js/jquery-3.7.0.js"></script>
	</head>
	<body>
		<!-- 商品详情顶部 -->
		<div class="head">
			<div class="head_left" onclick="isBack()">
				<img src="./img/Left (1).png" alt=""  />
			</div>
			<div class="head_right">
				<p>商品详情</p>
			</div>
		</div>
		<!-- 商品详情轮播图 -->
		<div class="banner">
			<div class="banner_border">
				<!-- <div class="banner_img">
					<img src="./img/10002.jpg" alt="">
					<img src="./img/10003.jpg" alt="">
					<img src="./img/10004.jpg" alt="">
					<img src="./img/10003.jpg" alt="">
					<img src="./img/10002.jpg" alt="">
				</div> -->
			</div>
		</div>
		<div class="content">
			<!-- <div class="content_top">
				<span>夏季新款裤子百搭开衫防晒衣抽绳吊带背心阔腿裤三件套
套装女</span>
			</div>
			<div class="content_bottom">
				<span>￥109.78</span>
				<p>库存：203件</p>
			</div> -->
		</div>
		<!-- 商品详情 -->
		<div class="footer">
			<p>商品详情</p>
			<div class="line"></div>
<!-- 			<span>夏季新款裤子百搭开衫防晒衣抽绳吊带背心阔腿裤三件套
套装..商品介绍..</span>
			<img src="./img/10011.jpg" alt="" />
			<img src="./img/10009.jpg" alt="" />
			<img src="./img/10011.jpg" alt="" /> -->
		</div>
		<!-- 客服、购物车、收藏、加入购物车、购买 -->
		<div class="service">
			<div class="service_black">
				<img src="./img/客服.png" alt="" />
				<span>客服</span>
			</div>
			<div class="service_black">
				<img src="./img/10008 - 副本.png" alt="" />
				<span>购物车</span>
			</div>
			<div class="service_black">
				<img src="./img/聚收藏gift.png" alt="" />
				<span>收藏</span>
			</div>
			<div class="service_right">
				<span>加入购物车</span>
			</div>
			<div class="service_right" style="background-color: #dd0000;">
				<span style="color: #fff">购买</span>
			</div>
		</div>
	<script src="./js/goods.js"></script>
</html>

代码介绍

这段代码是一个HTML页面的模板，用于展示商品详情页面。它包括了商品详情的顶部、轮播图、内容部分、页脚和底部的服务栏。在代码中，有一些被注释掉的部分，这些部分可能是原本用于展示具体内容的图片和文本，但是目前被注释掉了。

同时，代码中还引入了CSS样式文件 goods.css 和JavaScript文件 jquery-3.7.0.js 和 goods.js，分别用于设置页面的样式和处理交互逻辑。

页面的顶部包括一个返回按钮和一个标题，轮播图部分目前没有图片，内容部分和页脚部分的具体内容也被注释掉了。底部的服务栏包括了客服、购物车、收藏、加入购物车和购买等功能按钮。

你可以根据需要，将注释掉的部分恢复并填充具体内容，以显示商品的详细信息。

*{
	margin: 0;
	padding: 0;
}



/* 商品详情顶部 */
.head{
	width: 100%;
	height: 40px;
	display: flex;
	background-color: #ff0000;
}
.head_left{
	width: 45%;
	height: 40px;
}
.head_left img{
	width: 20%;
	margin-left: 10%;
	margin-top: 10px;
	height: 20px;
}
.head_right{
	width: 62%;
	text-align: left;
}
.head_right p{
	color: #fff;
	line-height: 42px;
}
/* 商品详情轮播图 */
.banner {
	padding-top: 30px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
}

.banner_border {
	width: 100%;
	height: 100%;

	overflow: hidden;
}

.banner_img {
	width: 500%;
	height: 100%;
	display: flex;
	animation: banner 10s infinite;
}

.banner_img img {
	width: 100%;
	height: 280px;
}


/* 商品列表 */
.content{
	width: 100%;
	height: 100px;
	margin-top: 10%;
	background-color: #fff;
}
.content_top{
	width: 100%;
	height: auto;
}
.content_top span{
	width: 100%;
	height: 20px;
} 
.content_bottom{
	width: 100%;
	display: flex;
}
.content_bottom span{
	font-size: 20px;
	color: #ff0000;
	width: 45%;
}
.content_bottom p{
	width: 25%;
	margin-top: 1%;
	color: #cfcfcf;
}
/* 商品详情 */
.footer{
	width: 100%;
}
.footer p{
	width: 100%;
	text-align: center;
}
.line{

	</body>	width: 100%;
	border-bottom: 1px solid #ff0000;
	
}
.footer img{
	width: 100%;
	margin-bottom: 15%;
}
/* 客服、购物车、收藏、加入购物车、购买 */
.service{
    width: 100%;
    height: 60px;
    display:flex;
    bottom: 0;
	margin-top: 0px;
    position: fixed;
	background-color: #fff;
    border-radius: 0 0 15px 15px;
}
.service_black{
	width: 13%;
	height: 60px;
	margin-left: 1%;
	text-align: center;
}
.service_black img{
	width: 62%;
	height: 27px;
}
.service_black span{
	width: 100%;
	text-align: center;
}
.service_right{
	width: 29%;
	height: 60px;
	text-align: center;
	line-height: 60px;
	color: #fff;
	margin-top: 1px;
	background-color: #ff8d1a;
	font-size: 15px;
}

这段代码是一个基本的商品详情页面的HTML和CSS部分的代码。下面是对代码的解释：

首先，代码第1行的`*`是通配符选择器，表示应用样式到所有元素。`margin: 0;`和`padding: 0;`用于将页面的外边距和内边距都设置为0，以保证页面内容从顶端开始。

接下来是对商品详情顶部的样式设置。`.head`类定义了顶部容器的样式，设置了宽度为100%，高度为40px，背景色为红色。`.head_left`类定义了左侧容器的样式，设置了宽度为45%，高度为40px。`.head_left img`类定义了左侧容器中的图片样式，设置了宽度为20%，左外边距为10%，上外边距为10px，高度为20px。`.head_right`类定义了右侧容器的样式，宽度为62%，左对齐。`.head_right p`类定义了右侧容器中的段落样式，文字颜色为白色，行高为42px。

然后是对商品详情轮播图的样式设置。`.banner`类定义了轮播图容器的样式，设置了顶部内边距为30px，宽度和高度都为100%，并通过`display: flex;`和`justify-content: center;`实现在容器中居中显示。`.banner_border`类定义了轮播图边框容器的样式，设置了宽度和高度都为100%，并隐藏超出容器范围的内容。`.banner_img`类定义了轮播图图片容器的样式，设置了宽度为500%（即5张图片的宽度总和），高度为100%，并通过`animation: banner 10s infinite;`实现动画效果，其中`banner`是动画名称，`10s`是动画持续时间，`infinite`表示无限循环播放。`.banner_img img`类定义了轮播图中的图片样式，设置宽度为100%，高度为280px。

接下来是对商品列表和商品详情部分的样式设置。`.content`类定义了商品列表容器的样式，设置了宽度为100%，高度为100px，顶部外边距为10%（距离顶部间距）。`.content_top`类定义了商品列表顶部容器的样式，宽度为100%，高度自适应。`.content_top span`类定义了商品列表顶部容器中的文本样式，宽度为100%，高度为20px。`.content_bottom`类定义了商品列表底部容器的样式，宽度为100%，采用flex布局。`.content_bottom span`类定义了商品列表底部容器中的文本样式，字体大小为20px，颜色为红色，宽度为45%。`.content_bottom p`类定义了商品列表底部容器中的段落样式，宽度为25%，顶部外边距为1%，颜色为淡灰色。

接下来是对页脚部分的样式设置。`.footer`类定义了页脚容器的样式，宽度为100%。`.footer p`类定义了页脚容器中的段落样式，文本居中对齐。`.line`类定义了页脚容器中的分割线样式，宽度为100%，底部边框为红色实线。

最后是对底部的服务栏的样式设置。`.service`类定义了服务栏的样式，宽度为100%，高度为60px，底部固定定位，背景色为白色，底部边框圆角为15px。`.service_black`类定义了服务栏左侧黑色区域的样式，

let head_left = document.getElementsByClassName('head-left')[0]

function isBack() {
	window.location.href = "home.html"
}
let id = sessionStorage.getItem('id')
console.log('用户ID：' + id);
$.ajax({
	type: "post",
	url: url接口
	data: {
		id: id
	},
	success: function(res) {
		if (res.code == 1) {
			console.log(res)
			contentData(res.data)
			footerIntroduce(res.data)
			let str = '';
			for (let i = 0; i < res.data.banners.length; i++) {
				str += `
				<div class="banner_img">
					<img src="${res.data.banners[0]}" alt="">
				</div>
				
				`;
			}
			$('.banner').html(str)
			let str_two = `
			      <div class="content_top">
			        <span>${res.data.name}</span>
			      </div>
			      <div class="content_bottom">
			        <span>￥${res.data.price}</span>
			        <p>库存：${res.data.stock}</p>
			      </div>
			    `;


			$('.content').html(str_two);
			let str_ert = `
				<span>${res.data.introduce}</span>
				<img src="${res.data.imgs}" alt="" />
				<img src="${res.data.imgs}" alt="" />
				<img src="${res.data.imgs}" alt="" />
				`;

			$('.footer').html(str_ert)
		} else {
			console.log("请求失败")
		}
	},
	error: function(res) {
		if (res.code == 0) {
			console.log(res)
		} else {
			console.log("请求成功")
		}
	}
})

这段代码是一段使用jQuery和AJAX发送GET请求的代码。它从服务器获取商品详细信息，并动态地将数据插入到网页的不同部分。

首先，它定义了一个变量head_left，它通过class名获取页面中第一个class为'head-left'的元素。

然后，它定义了一个名为isBack的函数，当调用该函数时，会将页面重定向到"home.html"。

接下来，它通过sessionStorage获取一个名为'id'的值，并将其存储在变量id中。

然后，它使用jQuery的ajax方法发送一个POST请求到URL"https://c2c.kuxia.top/webapi/index/detail"。请求的data参数包含一个名为'id'的属性，属性值为前面获取的id值。

如果请求成功，它会将返回的数据存储在变量res中，并执行一个判断语句。如果返回的数据中的code属性等于1，表示请求成功，它会将返回的数据传递给两个函数contentData和footerIntroduce，并在控制台打印返回的数据和字符串'请求成功'，然后根据返回的数据生成HTML代码并插入到网页的不同部分。如果code属性不等于1，表示请求失败，它会在控制台打印字符串'请求失败'。

如果请求失败，它会检查返回的错误对象的code属性。如果code属性等于0，表示请求成功，它会在控制台打印返回的数据。如果code属性不等于0，表示请求失败，它会在控制台打印字符串'请求成功'。

最后，它定义了两个函数contentData和footerIntroduce，这两个函数分别接收一个参数data，并在控制台打印data参数的值。