JS对象应用实例

马黑黑 · 发表于 2026-3-30 12:34

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>My Website</title> <meta name="generator" content="EverEdit" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <body> <style> body { background: #333; color: white; } .xContainer { margin: 20px auto; margin-top: 60px; width: 80vw; height: 80vh; display: flex; gap: 50px; flex-wrap: wrap; align-centent: space-between; } .xCard { flex: 1 0 20vw; height: 32vh; background: #666; border-radius: 8px; box-shadow: 0 0 4px silver; padding: 20px; transition: .3s; overflow: hidden; scrollbar-width: thin; scrollbar-color: tan transparent; } .xCard:hover { background: #444; box-shadow: 4px 2px 8px silver; overflow: auto; } .xCard:empty { opacity: 0.5; } .xCard a { color: snow; text-decoration: none; } .xCard a:hover { text-decoration: underline wavy silver; } .xCard h2 { margin: 0; padding: 0; } .tMid { text-align: center; } </style> <h1 class="tMid">💎 聚宝盆</h1> <div class="xContainer"> <div class="xCard"></div> <div class="xCard"></div> <div class="xCard"></div> <div class="xCard"></div> <div class="xCard"></div> <div class="xCard"></div> </div> <script> var xCards = document.querySelectorAll('.xCard'); var xDatas = { x1: { title: '暗夜空间', icon: '✨', urls: [ { name: '马黑整站系统', url: 'http://mhh.52qingyin.cn/' }, { name: '帖宝', url: 'http://mhh.52qingyin.cn/api/tiebao/tiebao.html' }, { name: 'SVGDR', url: 'http://mhh.52qingyin.cn/api/svgdr/tool/' }, { name: 'V5高能电饭煲', url: 'http://mhh.52qingyin.cn/art/bshow.php?st=5&sd=5&art=mahei_1772025886' }, { name: '音画帖快手', url: 'http://mhh.52qingyin.cn/art/bshow.php?st=5&sd=5&art=mahei_1774501446' }, ], }, x2: { title: '前端高能', icon: '🕯️', urls: [ { name: '现代 JavaScript 教程', url: 'https://zh.javascript.info/' }, { name: 'Eloquent JavaScript（2024版）', url: 'https://eloquent.javascript.ac.cn/' }, { name: 'JS 函数式编程『简明教程』', url: 'https://juejin.cn/post/7083890927298674724' }, { name: 'User Agent Man', url: 'https://www.useragentman.com/blog/' }, ], }, }; function makecard(elements, datas) { Object.keys(datas).forEach((key, idx) => { var xData = datas[key]; var frg = new DocumentFragment(); var h2 = document.createElement('h2'); h2.innerHTML = `<span>${xData.icon}</span> ${xData.title}`; frg.appendChild(h2); var ol = document.createElement('ol'); var liFrg = new DocumentFragment(); xData.urls.forEach(url => { var li = document.createElement('li'); li.innerHTML = `<a href="${url.url}" target="_blank">${url.name}</a>`; liFrg.appendChild(li); }); ol.appendChild(liFrg); frg.appendChild(ol); elements[idx].appendChild(frg); }); } makecard(xCards, xDatas); </script> </body> </html>

马黑黑 · 发表于 2026-3-30 12:35

JS对象应用实例解释

这是一个卡片式的导航Web页，导航数据使用JavaScript对象组织和存储、动态生成卡片内的具体内容。

设计思路：

使用flex弹性布局制作 3*2 的卡片页面。卡片为 flex 项目，项目内容为空，其内容将由JS填充完成。
JS对象命名为 x1、x2、……、x6，每一个对象有嵌套子对象，内容包括卡片标题（title）、卡片图标（icon）、导航链接数组（urls），链接数组内容又由JS对象组成，包含锚名称（name）、链接网址（url）。

实现核心：

一、CSS设置

body     ： 底色暗色，文本白色
  flex容器 ：宽度80vw、高度80vw,水平居中，允许项目折行
  flex项目 ：卡片，设置合适的宽高使之在容器主轴能排下三个，设计一些动态效果
  锚选择器 ：即a标签，设计恰当的动态效果
  其它     ：根据需要设置（例如 .tMid 选择器、一些伪类选择器等）

二、JS实现核心

（一）创建存储数据的JS对象

var xDatas = {
  x1: {
    title: '卡片名称',
    icon: '🌙',
    urls: [
      { name: '锚1名称', url: '网址1' },
      { name: '锚2名称', url: '网址2' },
      /* 更多相同结构的数据 */
    ],
  },
  /* 这里是 x2、x3 等，还没准备好可以暂时不写 */
};

数据结构前后要一致，方便后续以统一的方式处理数据。锚（urls）使用的是数组包裹子对象，更易于处理。

（二）设计处理数据的核心函数

/* 生成卡片内容函数
         参数 elements : 写入内容元素集合
         参数 datas    : JS对象变量
  */
  function makecard(elements, datas) {
    // 遍历 datas 对象
    Object.keys(datas).forEach((key, idx) => {
      var xData = datas[key];
      var frg = new DocumentFragment(); // 创建文档碎片1
      var h2 = document.createElement('h2'); // 创建卡片标题
      h2.innerHTML = `<span>${xData.icon}</span> ${xData.title}`;
      frg.appendChild(h2); // 标题加入文档碎片1
      var ol = document.createElement('ol'); // 创建有序列表
      var liFrg = new DocumentFragment(); // 创建文档碎片2
      // 遍历锚数组
      xData.urls.forEach(url => {
        var li = document.createElement('li'); // 创建有序列表子元素
        li.innerHTML = `<a href="${url.url}" target="_blank">${url.name}</a>`;
        liFrg.appendChild(li); // li元素加入文档碎片2
      });
      ol.appendChild(liFrg); // 文档碎片2加入ol有序列表
      frg.appendChild(ol); // ol有序列表加入文档碎片1
      elements[idx].appendChild(frg); // 文档碎片1加入对应元素
    });
  }

执行上述函数时需要正确传参，其中的元素集合变量 elements 可根据HTML标签结构拿到，详情见一楼实例代码。

杨帆 · 发表于 2026-3-30 14:40

界面美观，内容经典，交互友好，实例典范，谢谢马老师精彩讲授

杨帆 · 发表于 2026-3-30 14:47

align-centent，是否应为 align-content

lang="en"，是否应是 lang="zh-CN"

JS对象应用实例

请马上登录，朋友们都在花潮里等着你哦：）

评分

JS对象应用实例解释

设计思路：

实现核心：

一、CSS设置

二、JS实现核心

（一）创建存储数据的JS对象

（二）设计处理数据的核心函数

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

花潮版主