地址发布页单页源码
同步来源：树洞剪藏 源站剪藏 ID：156 原文地址：https://www.nodeseek.com/post-166086-2
地址发布页单页源码
NodeSeek beta 日常 技术 情报 测评 交易 拼车 推广
地址发布页单页源码
人皇 Lv 1 楼主 64days ago in 技术 #0
说明
转发请备注原文 ： https://6ke.li/forum-post/1160.html
演示
在线演示地址： https://6ke.li/diy/dzfb/index.html
< html lang = "zh-CN" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > 6ke论坛-地址发布页，收藏我回家不迷路！ </ title > < meta name = "description" content = "6ke论坛-地址发布页，收藏我回家不迷路！" > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" > < style > @font-face { font-family : 'HarmonyOS Sans SC' ; src : url ( '/diy/ziti/HarmonyOS_Sans_SC_Regular.woff2' ) format ( 'woff2' ); font-weight : normal; font-style : normal; } :root { --primary-color : #3b82f6 ; --secondary-color : #60a5fa ; --text-color : #1f2937 ; --card-background : rgba ( 255 , 255 , 255 , 0.9 ); --transition : all 0.3s cubic-bezier ( 0.25 , 0.8 , 0.25 , 1 ); }
- { box-sizing : border-box; margin : 0 ; padding : 0 ; } body { font-family : 'HarmonyOS Sans SC' , sans-serif; color : var (--text-color); line-height : 1.6 ; min-height : 100vh ; display : flex; justify-content : center; align-items : center; background : linear-gradient (- 45deg , #e6f2ff , #fff0f5 , #f0f7ff , #fff5e6 ); background-size : 400% 400% ; animation : gradientBG 15s ease infinite; overflow-x : hidden; font-size : 16px ; } @keyframes gradientBG { 0% { background-position : 0% 50% ; } 50% { background-position : 100% 50% ; } 100% { background-position : 0% 50% ; } } .wrapper { padding : 2rem ; width : 100% ; max-width : 600px ; position : relative; } .main { background-color : var (--card-background); border-radius : 20px ; box-shadow : 0 10px 30px rgba ( 0 , 0 , 0 , 0.1 ); padding : 2.5rem ; backdrop- filter : blur ( 10px ); transition : var (--transition); } .main :hover { box-shadow : 0 15px 35px rgba ( 0 , 0 , 0 , 0.15 ); } h1 { font-size : 2.5rem ; color : var (--primary-color); text-align : center; margin-bottom : 1.5rem ; font-weight : 700 ; } ul { list-style-type : none; margin-bottom : 1.5rem ; } li { margin-bottom : 1rem ; padding : 1rem ; background-color : rgba ( 248 , 250 , 252 , 0.8 ); border-radius : 10px ; transition : var (--transition); cursor : pointer; display : flex; align-items : center; justify-content : space-between; } li :hover { transform : translateY (- 3px ); box-shadow : 0 5px 15px rgba ( 0 , 0 , 0 , 0.1 ); } li a { color : var (--primary-color); text-decoration : none; font-weight : bold; transition : var (--transition); display : flex; align-items : center; } li a :hover { color : var (--secondary-color); } li a i { margin-right : 0.5rem ; font-size : 1.2em ; } .notice { background-color : rgba ( 230 , 242 , 255 , 0.8 ); border-left : 4px solid var (--primary-color); padding : 1rem ; margin-top : 1rem ; border-radius : 10px ; transition : var (--transition); } .notice :hover { background-color : rgba ( 230 , 242 , 255 , 1 ); } .footer { margin-top : 2rem ; text-align : center; color : var (--text-color); font-weight : 300 ; opacity : 0.8 ; transition : var (--transition); } .footer :hover { opacity : 1 ; } .bookmark-btn { display : block; width : 100% ; padding : 1rem ; background-color : var (--primary-color); color : white; text-align : center; border : none; border-radius : 10px ; font-size : 1rem ; font-weight : 600 ; cursor : pointer; transition : var (--transition); margin-bottom : 1.5rem ; position : relative; overflow : hidden; } .bookmark-btn :hover { background-color : var (--secondary-color); transform : translateY (- 2px ); box-shadow : 0 5px 15px rgba ( 0 , 0 , 0 , 0.1 ); } .bookmark-btn ::after { content : '' ; position : absolute; top : 50% ; left : 50% ; width : 5px ; height : 5px ; background : rgba ( 255 , 255 , 255 , 0.5 ); opacity : 0 ; border-radius : 100% ; transform : scale ( 1 , 1 ) translate (- 50% ); transform-origin : 50% 50% ; } .bookmark-btn :focus :not ( :active ) ::after { animation : ripple 1s ease-out; } @keyframes ripple { 0% { transform : scale ( 0 , 0 ); opacity : 1 ; } 20% { transform : scale ( 25 , 25 ); opacity : 1 ; } 100% { opacity : 0 ; transform : scale ( 40 , 40 ); } } .bg-animation { position : fixed; top : 0 ; left : 0 ; width : 100% ; height : 100% ; z-index : - 1 ; } .bg-animation span { position : absolute; display : block; width : 20px ; height : 20px ; background : rgba ( 255 , 255 , 255 , 0.2 ); animation : move 25s infinite linear; } .bg-animation span :nth-child ( 1 ) { top : 20% ; left : 20% ; animation-duration : 15s ; } .bg-animation span :nth-child ( 2 ) { top : 60% ; left : 80% ; animation-duration : 17s ; width : 40px ; height : 40px ; } .bg-animation span :nth-child ( 3 ) { top : 40% ; left : 40% ; animation-duration : 19s ; } .bg-animation span :nth-child ( 4 ) { top : 80% ; left : 10% ; animation-duration : 21s ; } @keyframes move { 0% { transform : translateX ( 0 ) translateY ( 0 ) rotate ( 0 ); opacity : 1 ; border-radius : 0 ; } 100% { transform : translateX (- 1000px ) translateY (- 1000px ) rotate ( 720deg ); opacity : 0 ; border-radius : 50% ; } } @media ( max-width : 768px ) { body { font-size : calc ( 14px + 0.390625vw ); /* 在移动设备上使用响应式字体大小 */ } .main { padding : 2rem ; } h1 { font-size : 2rem ; } } .status-badge { padding : 2px 6px ; border-radius : 4px ; font-size : 0.8em ; margin-left : 10px ; } .status-normal { background-color : #4CAF50 ; color : white; } .status-error { background-color : #f44336 ; color : white; } li .disabled { opacity : 0.5 ; cursor : not-allowed; } li .disabled a { pointer-events : none; } </ style > </ head > < body > < div class = "bg-animation" > < span > </ span > < span > </ span > < span > </ span > < span > </ span > </ div > < div class = "wrapper" > < main class = "main" > < h1 > 6ke论坛-地址发布页 </ h1 > < button class = "bookmark-btn" > < i class = "fas fa-bookmark" > </ i > Ctrl+D 收藏本页到浏览器收藏夹 </ button > < ul id = "url-list" > < li data-url = "https://6.ke/" > < span > 6ke论坛（主） </ span > < a href = "https://6.ke/" target = "_blank" > < i class = "fas fa-external-link-alt" > </ i > 6.ke </ a > < span class = "status-badge" > </ span > </ li > < li data-url = "https://6ke.li/" > < span > 6ke论坛（备） </ span > < a href = "https://6ke.li/" target = "_blank" > < i class = "fas fa-external-link-alt" > </ i > 6ke.li </ a > < span class = "status-badge" > </ span > </ li > </ ul > < div class = "notice" > < i class = "fas fa-info-circle" > </ i > 部分中国网络屏蔽网址,打不开请爬梯子🪜访问！ </ div > </ main > < footer class = "footer" > < p > © 2024 6ke论坛. 保留所有权利。 </ p > </ footer > </ div >
< script > function checkUrl ( url ) { return new Promise ( ( resolve, reject ) => { fetch (url, { mode : 'no-cors' , method : 'HEAD' }) . then ( () => resolve ( true )) . catch ( () => resolve ( false )); }); }
function updateUrlStatus ( li, isAccessible ) { const statusBadge = li. querySelector ( '.status-badge' ); if (isAccessible) { li. classList . remove ( 'disabled' ); statusBadge. textContent = '正常' ; statusBadge. className = 'status-badge status-normal' ; } else { li. classList . add ( 'disabled' ); statusBadge. textContent = '无法访问' ; statusBadge. className = 'status-badge status-error' ; } }
async function checkAllUrls ( ) { const urlList = document . getElementById ( 'url-list' ); const listItems = urlList. querySelectorAll ( 'li' );
for ( const li of listItems) { const url = li. dataset . url ; const isAccessible = await checkUrl (url); updateUrlStatus (li, isAccessible); } }
// 初始检查 checkAllUrls ();
// 每5分钟检查一次 setInterval (checkAllUrls, 5 * 60 * 1000 ); </ script > </ body > </ html >
2 0 36 引用 回复
1 2
yida123 64days ago #1
mark
我的小辣鸡们
0 0 引用 回复
Tionmon 64days ago #2
mark
0 0 引用 回复
楼主 64days ago #3
可以，搞色站必备
TG联系
0 0 引用 回复
cos 64days ago #4
一般什么网站会用到？
✔️RackNerd 10刀便宜小鸡 ✈️RN导购小站
0 0 引用 回复
人皇 楼主 64days ago #5
@cos #4 H
0 0 引用 回复
Canasan 64days ago #6
好东西，mark
0 0 引用 回复
1000ly 64days ago #7
mark
0 0 引用 回复
彭于晏 活跃 交易中介 64days ago #8
鸡腿支持一下
任命公告 | 论坛私信 | Telegram | Telegram小号 | 探针
交易金额60元以上收5%中介费, 60元以下中介费3元 | 已接222单, 共111,287元 (2024/11/3)
0 0 引用 回复
Nyaa 64days ago #9
好东西哈
0 0 引用 回复
李英俊 64days ago #10
支持
0 0 引用 回复
Hubery 64days ago #11
求大姐姐
实名图床 ｜ 博客
yuniee 64days ago #12
好看
个人博客
TG
ziming 64days ago #13
mark
sd89njlkd 61days ago #14
好东西
hitomi 61days ago #15
我网站没favicon.ico的话咋检测？
✈️TG私聊 | ✉️站内私信 | ⌚探针 | ☁️小雅Alist
人皇 楼主 61days ago #16
@hitomi #15 不是检测你favicon.ico是检测你网址
youhou 58days ago #17
感谢分享，不错的单页
公益服务：千图代下，AIPPT 生成代下
Netsky 1day ago #18
@人皇 #0 不错备用
Kihh 1day ago #19
这个好看
1 2
内容 预览 对照
支持 markdown语法
鼓励友善发言，禁止人身攻击
xxxxxxxxxx
1
1
AC娘
洋葱头
小黄鸡
发布评论
88
等级 Lv 4 鸡腿 1959 关注 0 回复 0 我 0
主题帖 11 评论数 294 粉丝 2 收藏 195 私信 0 发帖
快捷功能区 推荐阅读 管理记录 幸运抽奖 邀请好友 合作商家 友站链接
所有版块 日常 技术 情报 测评 交易 曝光 拼车 生活 贴图 推广 内版 Dev 无意义 沙盒
📈用户数目📈
目前论坛共有23058位seeker
🎉欢迎新用户🎉
Earful8638
sweetdog
jimmyhe
注册一个玩玩
xxs2023
saberashura
fijckf
相关网站 LowEndTalk LowEndSpirit HostLoc ServerHunter
站内导航 关于本站 隐私协议 RSS订阅 sitemap
商业推广 商家申请规则 Premium Provider 合作商家展示
其他平台 电报频道 电报群组
联系我们
Copyright © 2022 - 2024 All rights Reserved