JavaScript商品列表

最新推荐文章于 2024-09-15 21:53:26 发布

派大鑫的工作室

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量133

点赞数 1

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/Cc040909/article/details/140424844

版权

<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 100%;
			height: 840px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.shopping {
			font-size: 20px;
			text-align: center;
		}


		.princess {
			width: 50%;
			height: 200px;
		}

		.princess img {
			width: 90%;
			height: 150px;
		}

		.princess div {
			font-weight: 900;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.princess p {
			color: red;
			margin-top: 2%;
			font-size: 16px;
			font-weight: 900;
		}
	</style>

<script>
		    let xhr = new XMLHttpRequest();
		    xhr.open('get', 'js/lipstick.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);
		            inner(data);
		        }
		    };
		
		    function inner(data) {
		        let str = ``;
		        for (let i = 0; i < data.length; i++) {
		            str += `
		                <div class="princess" onclick="clciks(${data[i].id})">
		                    <img src="${data[i].imge}" alt="">
		                    <div>${data[i].name}</div>
		                    <p>${data[i].pirce}</p>
		                </div>
		            `;
		        }
		        document.getElementsByClassName('box')[0].innerHTML = str;
		    }
		
		    function clciks(id) {
		        sessionStorage.setItem("focus", id);
		        location.href = 'spxqs.html';
		    }
		</script>

第二个页面

<style>
		* {
			margin: 0;
			padding: 0;
		}

		.title {
			width: 100%;
			height: 50px;
			font-size: 20px;
			font-weight: 700;
			position: relative;
		}

		.title div {
			margin-left: 10%;
		}

		.but {
			width: 30%;
			height: 30px;
			float: left;
		}

		.but img {
			width: 30px;
			position: absolute;
		}

		.banner {
			width: 100%;
			height: 300px;
			overflow: hidden;
			background-color: aqua;
		}

		.hateor {
			width: 500%;
			height: 300px;
			animation: beana 5s infinite;
		}

		.hateor img {
			width: 20%;
			height: 300px;
			float: left;
		}

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

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

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

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

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

		.introduce div {
			font-weight: 900;
		}

		.introduce p {
			color: red;
			margin-top: 2%;
			font-size: 20px;
			font-weight: 900;
		}

		.details {
			width: 100%;
			height: 350px;
			margin-top: 10%;
		}

		.details img {
			width: 90%;
			height: 350px;
			margin-left: 5%;
		}

		.content {
			width: 100%;
		}
	</style>

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

			let details = sessionStorage.getItem('focus');
			console.log(details);

			function invoke(data) {
				let str = '';
				for (let i = 0; i < data.length; i++) {
					if (data[i].id == details) {
						str +=
							`<div class="banner">
		                        <div class="hateor">`
						for (let k = 0; k < data[i].imgs.length; k++) {
							str += `
		                            <img src="${data[i].imgs[k]}" alt="">`
						}

						str += `</div>
		                    </div>
		
		                    <div class="introduce">
		                        <div>
		                            ${data[i].name}
		                        </div>
		                        <p>
		                            ${data[i].pirce}
		                        </p>
		                    </div>
		
		                    <div class="details">`
						for (let k = 0; k < data[i].imgs.length; k++) {
							str += `
							    <img src="${data[i].imgs[k]}" alt="">`
						}

						str += `</div>`;
					}
				}
				document.getElementsByClassName('content')[0].innerHTML = str;
			}
		</script>