js学习--商品列表商品详情

商品列表商品制作详情

商品列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>商品列表</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			h1 {
				width: 100%;
				height: 60px;
				text-align: center;
				line-height: 60px;
			}

			.box {
				width: 100%;
			}

			.box_img {
				width: 45%;
				height: 170px;
				margin-bottom: 10px;
				margin-left: 3%;
				float: left;
			}

			.box_img img {
				width: 100%;
				height: 100px;
			}

			.font {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 20px;
			}

			.price {
				color: red;
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<!-- 标题 -->
		<h1 >商品列表</h1>
		<!-- 列表框架 -->
		<div class="box">

			<!-- <div class="box_img">
			<img src="https://so1.360tres.com/dr/270_500_/t01c3776de38c3cab47.jpg?size=360x210" alt="" />
			<b>
				<p class="font">5斤整箱水蜜桃水果新鲜当季现摘现发脆桃孕妇桃子现货应季甜毛桃</p>
				<p class="price">¥12.8</p>
			</b>
		</div> -->
		</div>





		<script>
			let xhr = new XMLHttpRequest();
			xhr.open('get', 'js/details.json', true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let text = xhr.responseText;
					console.log(text);
					let data = JSON.parse(text);
					console.log(data);
					fu(data);
				}
			}

			function fu(data) {

				let str = '';
				for (let i = 0; i < data.length; i++) {
					str += `<div class="box_img" onclick="tar(${data[i].id})">
					<img src="${data[i].imgs[0]}">
					<b>
					<p class="font">${data[i].referal}</p>
					<p class="price">${data[i].price}</p>
					</b>
					</div>`
				}
				document.getElementsByClassName('box')[0].innerHTML = str;
			}
			function tar(id){
				sessionStorage.setItem("sp",id);
				window.location.href="details.html";
			}
		</script>
	</body>
</html>

商品详情

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>商品详情</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			h1 {
				width: 100%;
				height: 60px;
				text-align: center;
				line-height: 60px;
			}

			.visible {
				width: 100%;
				height: 200px;
				overflow-x: hidden;
			}

			.overflow {
				width: 500%;
				height: 200px;
				animation: 5s details infinite;
			}

			.overflow img {
				width: 20%;
				height: 200px;
				float: left;
			}

			@keyframes details {
				0% {
					margin-left: 0;
				}

				25% {
					margin-left: -100%;
				}

				50% {
					margin-left: -200%;
				}

				75% {
					margin-left: -300%;
				}

				100% {
					margin-left: -400%;
				}
			}

			.font {
				font-size: 20px;
			}

			.price {
				color: red;
				font-size: 25px;
				margin-left: 75%;
			}
		</style>
	</head>
	<body>
		<h1>商品详情</h1>
		<div class="box">
		</div>
		<script>
			let xhr = new XMLHttpRequest();
			xhr.open('get', 'js/details.json', true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let text = xhr.responseText;
					console.log(text);
					let data = JSON.parse(text);
					console.log(data);
					target(data);
				}
			}
			let a = sessionStorage.getItem('sp');
			console.log(a);
			function target(data) {
				let str = '';
				for (let i = 0; i < data.length; i++) {
					if (data[i].id == a) {
						str = `<div class="visible">
								<div class="overflow">`
								for(let j=0;j<data[i].details.length;j++){
									str+=`<img src="${data[i].details[j]}">`
									};
								str+=`</div>
							</div>
							<b>
								<p class="font">${data[i].referal}</p>
								<p class="price">${data[i].price}</p>
							</b>`
					}
				}
				document.getElementsByClassName('box')[0].innerHTML = str;
			}
		</script>
	</body>
</html>

假数据

[{
	"id": 1,
	"name": "桃子",
	"imgs": [
		"https://so1.360tres.com/dr/270_500_/t01c3776de38c3cab47.jpg?size=360x210"
	],
	"referal": "5斤整箱水蜜桃水果新鲜当季现摘现发脆桃孕妇桃子现货应季甜毛桃 ",
	"price": "¥12.8",
	"details": [

		"https://p3.itc.cn/q_70/images03/20220715/404e02f8a95d4ba49c9811b831d214a7.png",
		"https://img2.baidu.com/it/u=2370907083,3069296723&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800",
		"https://img0.baidu.com/it/u=2454263363,3057890496&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422",
		"http://img1.baidu.com/it/u=3950922726,3989599075&fm=253&app=138&f=JPEG?w=800&h=1422"
	]
}, {
	"id": 2,
	"name": "苹果",
	"imgs": [
		"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi2%2F2201298385234%2FO1CN01dE9SRt1oXDbiU0PWf_%21%212201298385234-0-lubanu-s.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723198295&t=092e5919c29dee12a3bc955dbefff870"
	],
	"referal": "正宗甘肃高原新鲜红富士苹果当季水果脆甜多汁箱装产地包邮直发",
	"price": "¥19.9",
	"details": [

		"https://imgservice.suning.cn/uimg1/b2c/image/nS6xqqGQ0S-kT4z5YvbQ7Q.jpg_",
		"https://img0.baidu.com/it/u=215526505,3577184230&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
		"https://a.vpimg3.com/upload/merchandise/pdc/356/790/318706072491790356/0/201608180090-1.jpg",
		"https://img2.baidu.com/it/u=212366177,1411760085&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=347",
		"https://imgservice.suning.cn/uimg1/b2c/image/nS6xqqGQ0S-kT4z5YvbQ7Q.jpg_"
	]
}, {
	"id": 3,
	"name": "香蕉",
	"imgs": [
		"https://001.img.pu.sohu.com.cn/group2/M07/E8/EE/MTAuMTAuODguODE=/100114_1521774157158_100199042_ugcvcut.jpg"
	],
	"referal": "云南高山香蕉新鲜水果当季整箱大芭蕉叶小米蕉甜香焦10自然熟",
	"price": "¥27.42",
	"details": [
		"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi4%2F2208781718035%2FO1CN01MlMY9M29E521DlOB2_%21%212208781718035.jpg_430x430q90.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723247980&t=cbc5df5fd75524917f024d373fa54b89",
		"https://001.img.pu.sohu.com.cn/group2/M07/E8/EE/MTAuMTAuODguODE=/100114_1521774157158_100199042_ugcvcut.jpg",
		"https://p6.itc.cn/images01/20200720/b283462f2a6846e5a8a3e49a65e21cd8.jpeg",
		"https://img.zcool.cn/community/0125ac5fc7297c11013fdcc72601b3.jpg@1280w_1l_2o_100sh.jpg",
		"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi4%2F2208781718035%2FO1CN01MlMY9M29E521DlOB2_%21%212208781718035.jpg_430x430q90.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723247980&t=cbc5df5fd75524917f024d373fa54b89"
	]
}, {
	"id": 4,
	"name": "西瓜",
	"imgs": [
		"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fg-search1.alicdn.com%2Fimg%2Fbao%2Fuploaded%2Fi2%2F2200751299948%2FO1CN01RPZ86n2NMEpLGTbBJ_%21%212200751299948.jpg_300x300.jpg&refer=http%3A%2F%2Fg-search1.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723198419&t=f216b55da3303ee271caf4a83f0176c2"
	],
	"referal": "正宗湖南麒麟西瓜新鲜8424西瓜新鲜水果冰糖红心应季水果整箱包邮",
	"price": "¥39",
	"details": [
		"https://img12.360buyimg.com/imgzone/jfs/t1/220600/1/5696/227046/619f64e9E84b5985d/c082e93c1a4f0957.jpg",
		"https://a.zdmimg.com/202207/27/62e08bf547cc53247.jpg_e680.jpg",
		"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2020%2F07%2F1814%2F196302016_1_20200718022759630&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723248030&t=63b85654d2f9c9a34d2b9b940949a602",
		"https://t12.baidu.com/it/u=1135292016,213017744&fm=30&app=106&f=JPEG?w=640&h=960&s=A6E24AB00A5601D2D68AD6AE0300F009",
		"https://img12.360buyimg.com/imgzone/jfs/t1/220600/1/5696/227046/619f64e9E84b5985d/c082e93c1a4f0957.jpg"
	]
}, {
	"id": 5,
	"name": "李子",
	"imgs": [
		"https://img2.baidu.com/it/u=101964377,3530751535&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
	],
	"referal": "红心李子五月脆李子新鲜水果四川云南贵州三华李多汁蜂糖李脆甜李",
	"price": "¥21",
	"details": [
		"https://img1.baidu.com/it/u=4121806542,3326482719&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=510",
		"https://img2.baidu.com/it/u=101964377,3530751535&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
		"https://p9.itc.cn/q_70/images01/20210715/34bce51c89344e36bf6636899fda9d65.jpeg",
		"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01rUTeJY1jbjUcS1EeW_%21%212210065664567-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723248100&t=19df72265430e61a5d2d4393e053ef0f",
		"https://img1.baidu.com/it/u=4121806542,3326482719&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=510"
	]
}, {
	"id": 6,
	"name": "橘子",
	"imgs": [
		"https://img0.baidu.com/it/u=3899038221,3614245934&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
	],
	"referal": "广西武鸣沃柑10斤橘子新鲜水果当季整箱一级皇帝蜜柑橘砂糖桔包邮",
	"price": "¥35.8",
	"details": [
		"https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F1227%2F96af72a4j00s6b23o001qd200k000k0g00eo00eo.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
		"https://p4.itc.cn/q_70/images03/20231208/920855038b874b0083cc4d659764bbb6.jpeg",
		"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01WrehNW1Vqw9jRON4m_%21%212215080532705-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723248169&t=cdb050622cc42212a8b9526ef66ebe82",
		"https://img0.baidu.com/it/u=2161757716,1329449577&fm=253&fmt=auto&app=138&f=JPEG?w=829&h=500",
		"https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F1227%2F96af72a4j00s6b23o001qd200k000k0g00eo00eo.jpg&thumbnail=660x2147483647&quality=80&type=jpg"
	]
}, {
	"id": 7,
	"name": "榴莲",
	"imgs": [
		"https://img2.baidu.com/it/u=2536303411,845584729&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=749"
	],
	"referal": "马来西亚猫山王榴莲正品D197液氮进口顺丰包邮新鲜水果肉一整个盒 ",
	"price": "¥307",
	"details": [
		"https://img.zcool.cn/community/015b42608ce4dd11013e3b7d0c8880.jpg@2o.jpg",
		"https://imgservice.suning.cn/uimg1/b2c/image/sZerns40PvQdIecqtFGwCQ.jpg_800w_800h_4e",
		"https://img2.baidu.com/it/u=1791913184,761295279&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=922",
		"http://img2.baidu.com/it/u=3107061520,3538379867&fm=253&app=138&f=JPEG?w=712&h=712",
		"https://img.zcool.cn/community/015b42608ce4dd11013e3b7d0c8880.jpg@2o.jpg"
	]
}]

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于一个商品ID列表,可以使用TF-IDF算法将其转换为向量表示,以便进行机器学习或自然语言处理。 TF-IDF算法将每个商品ID视为一个单词,并计算其在所有商品ID中的词频(TF)。然后,它将每个商品ID的TF值乘以其在所有商品ID中的逆文档频率(IDF)值,以获得商品ID的TF-IDF权重。 下面是一个使用JavaScript实现TF-IDF算法将商品ID列表转换为向量表示的示例代码: ```javascript function getTfIdfVector(ids) { // 统计单词频率 let wordFreq = {}; for (let id of ids) { if (!wordFreq[id]) { wordFreq[id] = 1; } else { wordFreq[id] += 1; } } // 计算每个单词的TF值 let tf = {}; for (let id in wordFreq) { tf[id] = wordFreq[id] / ids.length; } // 计算每个单词的IDF值 let idf = {}; let numDocs = 1; // 假设只有一个文档 for (let id in wordFreq) { idf[id] = Math.log(numDocs / wordFreq[id]); } // 计算每个单词的TF-IDF权重 let tfIdf = {}; for (let id in tf) { tfIdf[id] = tf[id] * idf[id]; } // 将TF-IDF权重转换为向量表示 let vector = []; for (let id of ids) { vector.push(tfIdf[id] || 0); } return vector; } // 示例 let ids = ["1001", "1002", "1003", "1002", "1004"]; let vector = getTfIdfVector(ids); console.log(vector); // [0.6931471805599453, 0.6931471805599453, 0.6931471805599453, 0.6931471805599453, 0] ``` 上面的代码中,`getTfIdfVector`函数接受一个商品ID列表,返回一个向量表示。在函数内部,首先统计每个ID出现的次数,然后计算每个ID的TF值和IDF值,最后将它们乘起来得到TF-IDF权重。最后,将TF-IDF权重转换为向量表示,其中每个元素代表一个ID的权重。如果一个ID在列表中不存在,则向量中对应的元素为0。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值