AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-10-17 20
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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"
  ]
}]
文章标签：
JavaScript
关键词：
JavaScript学习
JavaScript商品
JavaScript列表
神明木佑
目录
相关文章
sunrr
|
27天前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript？
如何学习JavaScript？
sunrr
38 5
你都不懂
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习（一）
VUE 开发——Node.js学习（一）
你都不懂
81 3
雨溪-yuxi
|
26天前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理，包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等，适合前端学习者参考。作者是一位热爱前端技术的大一学生，专注于分享实用的编程技巧。
雨溪-yuxi
22 2
雨溪-yuxi
|
26天前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识，包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性，以及JavaScript中的变量类型（`var`、`let`、`const`）和数据类型（基本数据类型与引用数据类型）。通过实例代码详细解释了JavaScript的核心概念，适合初学者入门学习。
雨溪-yuxi
47 1
神明木佑
|
2月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
神明木佑
39 4
js学习--制作猜数字
java冯坚持
|
2月前
|
JavaScript
webpack学习五：webpack的配置文件webpack.config.js分离，分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件，以提高打包效率。
java冯坚持
52 1
webpack学习五：webpack的配置文件webpack.config.js分离，分离成开发环境配置文件和生产环境配置文件
yantuguiguziPGJ
|
3月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录，包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
yantuguiguziPGJ
27 6
第一个算法项目 | JS实现并查集迷宫算法Demo学习
周一同学Zelina
|
3月前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐，一起来学习如何写好JS（上）
该文章跟随月影老师的指导，探讨了编写优质JavaScript代码的三大原则：各司其职、组件封装与过程抽象，通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
周一同学Zelina
37 6
紧跟月影大佬的步伐，一起来学习如何写好JS（上）
神明木佑
|
2月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
神明木佑
38 4
神明木佑
|
2月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
神明木佑
20 2

热门文章

最新文章

  • 1
    Node.js 中流操作实践
  • 2
    《JavaScript框架设计》——1.4　类型的判定
  • 3
    JavaScript FAQ（六）——字符串
  • 4
    .ts 文件编译成 .js 文件，以及 VSCode 自动编译配置
  • 5
    JavaScript右下角信息提示插件Notyf
  • 6
    【温故而知新-Javascript】使用Web存储
  • 7
    测试驱动javascript开发 -- 3.测试驱动开发过程（上）
  • 8
    前端 时间个性化 插件 jquery.timeago.js
  • 9
    第14章 使用Kotlin开发JavaScript代码 《Kotin 编程思想·实战》
  • 10
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    54
  • 2
    js设计模式-观察者模式与发布/订阅模式
    69
  • 3
    js设计模式-策略模式与代理模式的应用
    71
  • 4
    深入理解JavaScript中的闭包机制
    60
  • 5
    使用Vue.js构建交互式前端的技术探索
    87
  • 6
    使用Node.js构建实时聊天应用的技术指南
    128
  • 7
    深入理解JavaScript中的事件循环机制
    87
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    119
  • 9
    JavaScript 数组方法概览
    38
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    66

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 基于Kibana Discover筛选数据，自由搜索航班信息
  • Html5和Webpack2：Webpack5打包JS和样式表
  • ROS模板参数动态展示
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。