![图片[1]|域名展示 html 多组合自由切换|不死鸟资源网](https://www.busi.net/wp-content/uploads/2025/06/20250607075706571-image-1024x768.png)
![图片[2]|域名展示 html 多组合自由切换|不死鸟资源网](https://www.busi.net/wp-content/uploads/2025/06/20250607075713453-image-530x1024.png)
![图片[3]|域名展示 html 多组合自由切换|不死鸟资源网](https://www.busi.net/wp-content/uploads/2025/06/20250607075719384-image-1024x606.png)
修改: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・目录程序
演示:域名展示
这是一个用于展示域名列表的网页应用,支持多种筛选和展示方式。
最近更新
展示方式切换功能
- 在页面左上角添加了展示方式切换按钮,可快速切换”分组”和”卡片”两种展示方式
- 切换按钮会根据当前展示方式显示不同图标(分组显示网格图标,卡片显示列表图标)
- 展示方式状态会保存在本地存储中,下次访问时自动应用
- 展示方式可通过JSON配置默认值(1为分组视图,2为卡片视图)
- 切换过程无需刷新页面,实现流畅切换体验
夜间模式功能
- 添加了夜间模式切换功能,位于页面右上角
- 夜间模式状态会保存在本地存储中,下次访问时自动应用
- 夜间模式可通过JSON配置默认值(0为白天模式,1为夜间模式)
- 优化了夜间模式下的所有UI元素,包括卡片、按钮、文字等
- 夜间模式下二维码模态框也有专门的暗色主题
页面标题动态配置
- 页面标题现在完全由JSON配置控制,无需修改HTML
- 通过”页面标题文本”字段可设置页面显示的标题
- 支持与浏览器标题栏标题不同的设置
移动端适配优化
- 优化了域名卡片在移动设备上的显示效果
- 增加了多级断点适配(1200px、992px、768px、576px、380px)
- 添加了横屏模式优化,提高屏幕利用率
- 调整了字体大小和内边距,使内容在小屏幕上更加清晰可见
- 为特小屏幕设备(≤380px)添加了额外的样式优化
注册商图标改进
- 将注册商图标改为显示注册商名称的首字母或中文字符
- 为每个注册商分配固定的背景颜色,不再随机变化
- 优化了图标样式,使其更适合显示中文字符
- 为常见注册商(GoDaddy、Namecheap、阿里云、西部数码等)分配了特定颜色
- 对于新增注册商,会通过算法自动分配固定颜色
筛选功能增强
- 将注册商筛选和后缀筛选改为动态填充,自动包含所有数据中的选项
- 为”西部数码”等新增注册商添加了特定的卡片背景样式
- 优化了筛选器在移动设备上的显示效果
触摸设备优化
- 针对触摸设备添加了特定的交互优化
- 优化了高像素密度屏幕的显示效果
- 添加了触摸反馈效果
使用方法
- 在浏览器中打开
index.html
文件 - 使用顶部的标签和筛选器筛选域名
- 点击”购买”按钮查看二维码支付信息
- 点击右上角的图标切换夜间模式
技术栈
- 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
文件中的 网站配置
部分来自定义网站的外观和行为。
功能实现
- 域名数据展示
- 支持两种展示方式:按后缀分组展示和卡片式平铺展示
- 通过左上角按钮可随时切换展示方式
- 展示方式通过JSON配置文件设置默认值,并记住用户选择
- 每个分组有独特的标题和颜色标识
- 保持原有域名卡片样式不变
- 多层次筛选功能
- 域名状态筛选:全部/待售/已售/收藏
- 注册商筛选:支持按注册商筛选
- 域名后缀筛选:支持按后缀筛选
- 可通过JSON配置控制筛选器的显示/隐藏(0为隐藏,1为显示)
- 数据统计
- 总域名数量统计
- 待售域名数量统计
- 已售域名数量统计
- 可通过JSON配置控制统计卡片的显示/隐藏(0为隐藏,1为显示)
- 用户交互
- 左上角展示方式切换按钮
- 右上角夜间模式切换按钮
- 域名购买按钮
- 二维码支付模态框
- 响应式设计,适配不同设备
技术实现
- 数据管理
- 使用JSON文件存储域名数据
- 支持动态读取和渲染域名信息
- 前端实现
- 采用HTML5、CSS3、原生JavaScript开发
- 使用Font Awesome图标库增强UI效果
- 采用Grid和Flex布局实现响应式设计
- 分组展示实现
- 使用JavaScript对域名数据按后缀进行分组
- 每个后缀组有独立的样式和图标
- 展示方式配置
- 通过左上角按钮快速切换展示方式
- 通过JSON配置文件设置默认展示方式
- 支持分组展示(模式1)和卡片展示(模式2)
- 采用CSS类切换控制不同展示模式的样式
- 使用本地存储记住用户选择
- 界面元素配置
- 通过JSON配置文件控制界面元素的显示/隐藏
- 使用数字格式配置:0表示隐藏,1表示显示
- 网站标题可控制显示/隐藏和内容
- 统计卡片可单独设置显示/隐藏状态
- 筛选标签和筛选器可单独设置显示/隐藏状态
- 支持动态更改元素标题和图标
- 夜间模式实现
- 使用CSS变量定义颜色方案
- 通过classList切换应用不同的样式
- 使用localStorage保存用户偏好
- 通过JSON配置设置默认模式
样式特点
- 后缀分组样式
- 分组标题采用不同颜色边框标识不同后缀
- 每个后缀组有独立的计数显示
- 使用图标增强视觉效果
- 域名卡片样式
- 卡片式设计,带有阴影和悬停效果
- 不同状态域名有差异化标识
- 收藏域名有特殊样式
- 响应式设计
- 桌面端每行显示3个域名卡片
- 平板端每行显示2个域名卡片
- 移动端每行显示1个域名卡片
- 夜间模式样式
- 深色背景,浅色文字
- 降低对比度,减少视觉疲劳
- 所有UI元素都有专门的夜间模式样式
未来优化方向
- 增加域名搜索功能
- 添加排序功能(按价格、名称等)
- 优化移动端交互体验
- 增加更多域名数据统计维度
- 添加用户登录和收藏管理功能
- 增加自动夜间模式(根据系统设置或时间自动切换)
本站资源均为作者提供和网友推荐收集整理而来,仅供学习和研究使用,请在下载后24小时内删除,谢谢合作!
THE END