<style> *{ padding: 0; margin: 0; } #t{ width: 94%; height: 50px; margin: 10px 3%; border-bottom: #000 0.5px solid; } #q{ width: 94%; height: 900px; margin: 10px 3%; display: flex; flex-wrap: wrap; justify-content: space-between; } #p{ width: 50px; height: 30px; position: fixed; bottom: 0; right: 10px; background-color: red; border-radius: 15px; outline:none; } .w{ width: 48%; height: 400px; margin-bottom: 50px; background-color: darkturquoise; } .y{ width: 96%; height: 300px; border: #DDBC6D 3px solid; margin-left: 7px; margin-right: 0; margin-top: 10px; padding-top: 10px; } .w img{ width: 97%; height: 280px; margin-left: 6px; } .w p{ line-height: 35px; margin-top: 30px; } .e{ display: flex; justify-content: space-between; } .e i{ margin-right: 40px; } </style> <body> <div id="t"> <span>推荐商品</span> </div> <div id="q"></div> <a href="./sc.html"><button id="p">跳转</button></a> <script> let xml = new XMLHttpRequest(); xml.open("GET","https://star.kuxia.top/api/goods/index"); xml.send(); xml.onreadystatechange = function(){ if( xml.readyState == 4 && xml.status == 200){ let text = xml.responseText; let b = JSON.parse(text); fn(b.data); } } function fn(pcr){ let c = ''; for( let i = 0; i< pcr.length; i++){ c += '<div class="w" onclick="cond(' + pcr[i].id + ')"><div class="y"><img src="' + pcr[i].images + '"><p>' + pcr[i].name+ '</p><div class="e"><b>￥' + pcr[i].price + '</b><i>' + pcr[i].score + '</i></div></div></div>' } document.getElementsByTagName("div")[1].innerHTML = c; } function cond(id) { location.href ="./sc.html?" + id; } </script>
识别渲染id
<style> *{ margin: 0; padding: 0; } #a{ width: 94%; height: 400px; margin-left: 3%; } #d{ width: 98%; height: 300px; margin-left: 1%; border: 2px tan solid; } #d img{ width: 100%; height: 300px; } #s{ margin-left: 1%; display: flex; justify-content: space-between; } #s i{ padding-right: 50px; } p{ padding-top: 20px; margin-bottom: 20px; margin-left: 1%; } #p{ width: 50px; height: 30px; position: fixed; bottom: 0; right: 10px; background-color: red; border-radius: 15px; outline:none; } </style> <body> <div id="a"></div> <a href="./商城1.html"><button id="p"></button></a> <script> let a = location.search.slice(1); let xml = new XMLHttpRequest(); xml.open("GET","https://star.kuxia.top/api/goods/getinfo?id="+a); xml.send(); xml.onreadystatechange = function(){ if( xml.readyState == 4 && xml.status == 200){ let text = xml.responseText; let k = JSON.parse(text); ft(k.data); console.log(k); } } function ft(ssd){ let h = ''; h += '<div id="d"><img src="' + ssd.images + '" alt=""></div><p>' + ssd.name + '</p><div id="s"><b>' + ssd.price + '</b><i>' + ssd.score + '</i></div><div>' + ssd.describe + '</div>'; document.getElementsByTagName("div")[0].innerHTML = h; } </script>
