域名展示 html 多组合自由切换

图片[1]|域名展示 html 多组合自由切换|不死鸟资源网
图片[2]|域名展示 html 多组合自由切换|不死鸟资源网
图片[3]|域名展示 html 多组合自由切换|不死鸟资源网

修改:domains.json

{
  "网站配置": {
    "标题": "域名展示",
    "显示标题": 1,
    "页面标题文本": "域名展示",
    "图标": "images/favicon.svg",
    "夜间模式": 0,
    "夜间模式列表": [
      {
        "id": 0,
        "名称": "白天模式",
        "描述": "浅色背景,深色文字,适合日间浏览"
      },
      {
        "id": 1,
        "名称": "夜间模式",
        "描述": "深色背景,浅色文字,减少夜间视觉疲劳"
      }
    ],
    "展示方式": {
      "当前模式": 2,
      "模式列表": [
        {
          "id": 1,
          "名称": "分组展示",
          "描述": "按后缀分组展示域名"
        },
        {
          "id": 2,
          "名称": "卡片展示",
          "描述": "以卡片形式展示所有域名"
        }
      ]
    },
    "界面设置": {
      "统计卡片": {
        "总域名数": {
          "显示": 1,
          "标题": "总域名数",
          "图标": "far fa-clock"
        },
        "待售域名": {
          "显示": 1,
          "标题": "待售域名",
          "图标": "fas fa-shopping-cart"
        },
        "已售域名": {
          "显示": 1,
          "标题": "已售域名",
          "图标": "fas fa-check-circle"
        }
      },
      "筛选条件": {
        "域名标签": {
          "显示": 1,
          "全部": 1,
          "待售": 1,
          "已售": 1,
          "收藏": 1
        },
        "注册商筛选": {
          "显示": 1
        },
        "后缀筛选": {
          "显示": 1
        }
      }
    }
  },
  "域名列表": [
    {
      "id": 1,
      "前缀": "example",
      "后缀": ".com",
      "注册商": "GoDaddy",
      "到期": "2025-12-31",
      "价格": 12.99,
      "可购买": "否",
      "非卖": "否",
      "qrCodeImage": "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=example.com"
    },
    {
      "id": 2,
      "前缀": "business",
      "后缀": ".cn",
      "注册商": "Alibaba",
      "到期": "2026-06-15",
      "价格": 9.99,
      "可购买": "是",
      "非卖": "否",
      "qrCodeImage": "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=business.cn"
    },
    {
      "id": 3,
      "前缀": "creative",
      "后缀": ".design",
      "注册商": "Namecheap",
      "到期": "2025-09-10",
      "价格": 24.99,
      "可购买": "是",
      "非卖": "否",
      "qrCodeImage": "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=creative.design"
    },
    {
      "id": 4,
      "前缀": "premium",
      "后缀": ".ai",
      "注册商": "GoDaddy",
      "到期": "2026-03-20",
      "价格": 99.99,
      "可购买": "是",
      "非卖": "是",
      "qrCodeImage": "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=premium.ai"
    },
    {
      "id": 5,
      "前缀": "tech",
      "后缀": ".io",
      "注册商": "Namecheap",
      "到期": "2025-11-05",
      "价格": 39.99,
      "可购买": "是",
      "非卖": "否",
      "qrCodeImage": "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=tech.io"
    },
    {
        "id": 6,
        "前缀": "1356",
        "后缀": ".com",
        "注册商": "Namecheap",
        "到期": "2025-11-05",
        "价格": 39.99,
        "可购买": "是",
        "非卖": "否",
        "qrCodeImage": "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=tech.io"
      },
    {
      "id": 7,
      "前缀": "store",
      "后缀": ".shop",
      "注册商": "Alibaba",
      "到期": "2026-02-28",
      "价格": 18.99,
      "可购买": "是",
      "非卖": "否",
      "qrCodeImage": "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=store.shop"
    },
    {
      "id": 8,
      "前缀": "digital",
      "后缀": ".agency",
      "注册商": "Namecheap",
      "到期": "2025-10-17",
      "价格": 29.99,
      "可购买": "是",
      "非卖": "否",
      "qrCodeImage": "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=digital.agency"
    },
    {
      "id": 9,
      "前缀": "web",
      "后缀": ".site",
      "注册商": "GoDaddy",
      "到期": "2026-01-25",
      "价格": 14.99,
      "可购买": "是",
      "非卖": "是",
      "qrCodeImage": "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=web.site"
    },
    {
      "id": 10,
      "前缀": "131",
      "后缀": ".gs",
      "注册商": "西部数码",
      "到期": "2026-01-25",
      "价格": 14.99,
      "可购买": "是",
      "非卖": "是",
      "qrCodeImage": "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=web.site"
    },
    {
      "id": 11,
      "前缀": "353",
      "后缀": ".ee",
      "注册商": "趣域",
      "到期": "2026-01-25",
      "价格": 14.99,
      "可购买": "是",
      "非卖": "是",
      "qrCodeImage": "https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=web.site"
    }
  ]
} 

程序:Source-Code/DomainDisplay・目录程序

下载:DomainDisplay.zip

演示:域名展示

这是一个用于展示域名列表的网页应用,支持多种筛选和展示方式。

最近更新

展示方式切换功能

  • 在页面左上角添加了展示方式切换按钮,可快速切换”分组”和”卡片”两种展示方式
  • 切换按钮会根据当前展示方式显示不同图标(分组显示网格图标,卡片显示列表图标)
  • 展示方式状态会保存在本地存储中,下次访问时自动应用
  • 展示方式可通过JSON配置默认值(1为分组视图,2为卡片视图)
  • 切换过程无需刷新页面,实现流畅切换体验

夜间模式功能

  • 添加了夜间模式切换功能,位于页面右上角
  • 夜间模式状态会保存在本地存储中,下次访问时自动应用
  • 夜间模式可通过JSON配置默认值(0为白天模式,1为夜间模式)
  • 优化了夜间模式下的所有UI元素,包括卡片、按钮、文字等
  • 夜间模式下二维码模态框也有专门的暗色主题

页面标题动态配置

  • 页面标题现在完全由JSON配置控制,无需修改HTML
  • 通过”页面标题文本”字段可设置页面显示的标题
  • 支持与浏览器标题栏标题不同的设置

移动端适配优化

  • 优化了域名卡片在移动设备上的显示效果
  • 增加了多级断点适配(1200px、992px、768px、576px、380px)
  • 添加了横屏模式优化,提高屏幕利用率
  • 调整了字体大小和内边距,使内容在小屏幕上更加清晰可见
  • 为特小屏幕设备(≤380px)添加了额外的样式优化

注册商图标改进

  • 将注册商图标改为显示注册商名称的首字母或中文字符
  • 为每个注册商分配固定的背景颜色,不再随机变化
  • 优化了图标样式,使其更适合显示中文字符
  • 为常见注册商(GoDaddy、Namecheap、阿里云、西部数码等)分配了特定颜色
  • 对于新增注册商,会通过算法自动分配固定颜色

筛选功能增强

  • 将注册商筛选和后缀筛选改为动态填充,自动包含所有数据中的选项
  • 为”西部数码”等新增注册商添加了特定的卡片背景样式
  • 优化了筛选器在移动设备上的显示效果

触摸设备优化

  • 针对触摸设备添加了特定的交互优化
  • 优化了高像素密度屏幕的显示效果
  • 添加了触摸反馈效果

使用方法

  1. 在浏览器中打开 index.html 文件
  2. 使用顶部的标签和筛选器筛选域名
  3. 点击”购买”按钮查看二维码支付信息
  4. 点击右上角的图标切换夜间模式

技术栈

  • HTML5
  • CSS3(响应式设计)
  • JavaScript(原生)

数据格式

域名数据存储在 domains.json 文件中,格式如下:

{
  "网站配置": {
    "标题": "域名展示",
    "显示标题": 1,
    "页面标题文本": "我的域名",
    "图标": "images/favicon.svg",
    "夜间模式": 0,
    "夜间模式列表": [
      {
        "id": 0,
        "名称": "白天模式",
        "描述": "浅色背景,深色文字,适合日间浏览"
      },
      {
        "id": 1,
        "名称": "夜间模式",
        "描述": "深色背景,浅色文字,减少夜间视觉疲劳"
      }
    ],
    "展示方式": {
      "当前模式": 1,
      "模式列表": [
        {
          "id": 1,
          "名称": "分组视图",
          "描述": "按域名后缀分组展示"
        },
        {
          "id": 2,
          "名称": "卡片视图",
          "描述": "平铺展示所有域名卡片"
        }
      ]
    },
    // 其他配置...
  },
  "域名列表": [
    {
      "id": 1,
      "前缀": "example",
      "后缀": ".com",
      "注册商": "GoDaddy",
      "到期": "2025-12-31",
      "价格": 12.99,
      "可购买": "是/否",
      "非卖": "是/否"
    },
    // 更多域名...
  ]
}

自定义配置

您可以通过修改 domains.json 文件中的 网站配置 部分来自定义网站的外观和行为。

功能实现

  1. 域名数据展示
    • 支持两种展示方式:按后缀分组展示和卡片式平铺展示
    • 通过左上角按钮可随时切换展示方式
    • 展示方式通过JSON配置文件设置默认值,并记住用户选择
    • 每个分组有独特的标题和颜色标识
    • 保持原有域名卡片样式不变
  2. 多层次筛选功能
    • 域名状态筛选:全部/待售/已售/收藏
    • 注册商筛选:支持按注册商筛选
    • 域名后缀筛选:支持按后缀筛选
    • 可通过JSON配置控制筛选器的显示/隐藏(0为隐藏,1为显示)
  3. 数据统计
    • 总域名数量统计
    • 待售域名数量统计
    • 已售域名数量统计
    • 可通过JSON配置控制统计卡片的显示/隐藏(0为隐藏,1为显示)
  4. 用户交互
    • 左上角展示方式切换按钮
    • 右上角夜间模式切换按钮
    • 域名购买按钮
    • 二维码支付模态框
    • 响应式设计,适配不同设备

技术实现

  1. 数据管理
    • 使用JSON文件存储域名数据
    • 支持动态读取和渲染域名信息
  2. 前端实现
    • 采用HTML5、CSS3、原生JavaScript开发
    • 使用Font Awesome图标库增强UI效果
    • 采用Grid和Flex布局实现响应式设计
  3. 分组展示实现
    • 使用JavaScript对域名数据按后缀进行分组
    • 每个后缀组有独立的样式和图标
  4. 展示方式配置
    • 通过左上角按钮快速切换展示方式
    • 通过JSON配置文件设置默认展示方式
    • 支持分组展示(模式1)和卡片展示(模式2)
    • 采用CSS类切换控制不同展示模式的样式
    • 使用本地存储记住用户选择
  5. 界面元素配置
    • 通过JSON配置文件控制界面元素的显示/隐藏
    • 使用数字格式配置:0表示隐藏,1表示显示
    • 网站标题可控制显示/隐藏和内容
    • 统计卡片可单独设置显示/隐藏状态
    • 筛选标签和筛选器可单独设置显示/隐藏状态
    • 支持动态更改元素标题和图标
  6. 夜间模式实现
    • 使用CSS变量定义颜色方案
    • 通过classList切换应用不同的样式
    • 使用localStorage保存用户偏好
    • 通过JSON配置设置默认模式

样式特点

  1. 后缀分组样式
    • 分组标题采用不同颜色边框标识不同后缀
    • 每个后缀组有独立的计数显示
    • 使用图标增强视觉效果
  2. 域名卡片样式
    • 卡片式设计,带有阴影和悬停效果
    • 不同状态域名有差异化标识
    • 收藏域名有特殊样式
  3. 响应式设计
    • 桌面端每行显示3个域名卡片
    • 平板端每行显示2个域名卡片
    • 移动端每行显示1个域名卡片
  4. 夜间模式样式
    • 深色背景,浅色文字
    • 降低对比度,减少视觉疲劳
    • 所有UI元素都有专门的夜间模式样式

未来优化方向

  1. 增加域名搜索功能
  2. 添加排序功能(按价格、名称等)
  3. 优化移动端交互体验
  4. 增加更多域名数据统计维度
  5. 添加用户登录和收藏管理功能
  6. 增加自动夜间模式(根据系统设置或时间自动切换)
本站资源均为作者提供和网友推荐收集整理而来,仅供学习和研究使用,请在下载后24小时内删除,谢谢合作!
域名展示 html 多组合自由切换|不死鸟资源网
域名展示 html 多组合自由切换
此内容为付费资源,请付费后查看
¥0.5
限时特惠
¥99
文章采用CC BY-NC-SA 4.0许可协议授权
付费资源
THE END
点赞10 分享