这是效果图，当我们点击下面任意一个商品时就会跳转到商品详细信息的页面，点击左上角的返回时，又会返回到主页面。四个商品都是如此操作的。
首先呢我们先把大概的html页面结构写出来 ，这是随便写的格式啊
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="./css/1商城功能制作页面.css" /> </head> <body> <div class="one_one"> <div class="two" onclick = "english()"> <img src="./img/15.png" alt="" /> <p>商品一</p> <div class="three"> <strong>￥100</strong> <em></em> </div> </div> </div> <script src="./js/1商城功能制作页面.js"></script> </body> </html>
在给它添加一些样式，使页面变得更规范
* { margin: 0; padding: 0; } .one_one { width: 98%; margin-left: 1%; display: flex; flex-wrap: wrap; } .two { width: 48%; margin: 10px 1%; } .two img { width: 100%; height: 450px; } .two p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 30px; font-family: 宋体; /* 行高 */ line-height: 40px; } .three { width: 100%; display: flex; justify-content: space-between; } .three strong { color: red; font-family: 宋体; font-size: 35px; } .three em { font-size: 30px; }
重要的就是JS代码了
// 获取最大的div标签 let first = document.getElementsByClassName('one_one')[0]; let box = new XMLHttpRequest(); box.open("get", "https://exam.kuxia.top/index.php/Api/Index/index"); box.send(); box.onreadystatechange = function() { if (box.readyState == 4 && box.status == 200) { let mom = box.responseText; let back = JSON.parse(mom); one(back.prolist); } } function one(arr) { console.log(arr); let str = ""; for (let i = 0; i < arr.length; i++) { str += `<div class="two" onclick = "english(${arr[i].id})"> <img src="${arr[i].photo_x}" alt="" /> <p>${ arr[i].name }</p> <div class="three"> <strong>￥${ arr[i].price }</strong> <em>${ arr[i].shiyong }</em> </div> </div>`; } first.innerHTML = str; // console.log(str); } function english(id) { console.log(id); sessionStorage.setItem("spid", id); location.href = "./2商城功能制作页面.html"; }
哪些拼接的字符串是由一组数据得到的，首页完成，我们再来看看第二个页面的代码是如何写的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .but { width: 100px; height: 50px; font-size: 30px; text-align: center; font-family: 宋体; padding-top: 20px; } .two { width: 98%; margin-left: 1%; } .two img { width: 100%; height: 50%; } .two p { font-size: 40px; line-height: 30px; font-family: 宋体; } .three strong { font-size: 55px; color: red; font-family: 宋体; } .three div { font-size: 35px; } .button { width: 50px; height: 30px; } </style> </head> <body> <div class="but" onclick="con()">返回</div> <div class="two"> <!-- <img src="./img/15.png" alt="" /> <p>蝴蝶</p> <div class="three"> <strong>￥3999</strong> <div>商品详情</div> </div> --> </div> <script> let box = new XMLHttpRequest(); let mother = document.getElementsByClassName('two')[0]; let idder = sessionStorage.getItem("spid"); console.log(idder); box.open("get", "https://exam.kuxia.top/index.php/Api/Product/index?pro_id=" + idder); box.send(); box.onreadystatechange = function() { if (box.readyState == 4 && box.status == 200) { let mom = box.responseText; let back = JSON.parse(mom); console.log(back.pro); six(back.pro); } } function six(obj) { // console.log(obj); let str = `<img src="${obj.photo_d}" alt="" /> // <p>${obj.name}</p> // <strong>￥${obj.price}</strong> // <div>${obj.content}</div>`; mother.innerHTML = str; } function con() { location.href = "./1商城功能制作页面.html"; } </script> </body> </html>
页面详细信息这个页面制作完毕之后，添加一个跳转信息就好了
