html选择页最简模板源码,用于集合很多网页!游戏大全数字导航页面,数字选择页制作灵感,已经压缩到最小,现代,讲解。

竖屏只有数字的选择页面

javascript 复制代码
<!doctype html><html><head><meta name="viewport"content="width=device-width,initial-scale=1"><style>a{display:block;padding:5%}</style></head><body style="margin:0;font-size:50px;background:black;text-align:center"><script>document.body.innerHTML=[...Array(99)].map((_,a)=>`<a href="${++a}/0.html">${a}</a>`).join('')</script></body></html>

横屏只有数字的选择页面

javascript 复制代码
<!doctype html><html><head><meta name="viewport"content="width=device-width,initial-scale=1"><style>a{padding:5%}</style></head><body style="margin:0;font-size:50px;background:black;text-align:center;display:grid;grid-template-columns:1fr 1fr"><script>document.body.innerHTML=[...Array(99)].map((_,a)=>`<a href="${++a}/0.html">${a}</a>`).join('')</script></body></html>

有哪些可以学习的地方?

  1. 这种页面需要快速显示,所以不需要精美ui,并且跳转按钮非常大!
  2. 本页面中只有数字和英文,所以不需要<meta charset="UTF-8">!不用添加这个,这样可以让文件更小!
  3. 想要多少个选项跳转按钮,只需要修改[...Array(99)]这个里面的数字即可!后续只需修改这里的数字就行,符合设计初衷。
  4. 这就是关键选项跳转按钮<a href="${++a}/0.html">${a}</a>!使用++精简代码长度,在这里注意只需添加一个就行,后面第2次使用变量a使用的就是前面已经加过1的变量a!
  5. 代码并不小众,不用担心后续js会被废弃的问题:【1】[...]三个点是ECMAScript 2015(ES6)的标准化特性,已被所有现代浏览器实现并长期支持,且广泛应用于主流前端框架和生产环境代码中。基于ECMAScript标准"向后兼容"的设计原则,以及其在JS语法体系中的基础地位,该特性不存在被废弃的可能性,可长期在项目中使用。【2】++自增运算符是ECMAScript 1的原生标准特性,是JavaScript的底层基础语法之一,已被所有浏览器实现并持续支持数十年,且广泛应用于各类JS项目、框架及底层源码中。基于ECMAScript标准强向后兼容的设计原则,该基础运算符不存在被废弃的可能性,可长期在项目中放心使用。
  6. 我有很多个文件夹,里面存储的都有网页,本文章中的网页对多个文件夹进行了一个集合~
相关推荐
派大星酷几秒前
Java 多线程创建方式
java·开发语言·多线程
程序员陆业聪7 小时前
你的 Android App 可能白白损失了 35% 的性能——R8 全模式配置详解
android
Jenlybein7 小时前
快速了解熟悉 Vite ,即刻上手使用
前端·javascript·vite
Ailrid7 小时前
@virid/core:用游戏引擎的思维来写应用-高度确定性的应用开发引擎
javascript
SuperEugene9 小时前
Vue3 组件复用设计:Props / 插槽 / 组合式函数,三种复用方式选型|组件化设计基础篇
前端·javascript·vue.js
棉花骑士9 小时前
【AI Agent】面向 Java 工程师的Claude Code Harness 学习指南
java·开发语言
爱敲代码的小鱼9 小时前
springboot(2)从基础到项目创建:
java·spring boot·spring
nFBD29OFC10 小时前
利用Vue元素指令自动合并tailwind类名
前端·javascript·vue.js
迈巴赫车主10 小时前
蓝桥杯19724食堂
java·数据结构·算法·职场和发展·蓝桥杯
i220818 Faiz Ul11 小时前
动漫商城|基于springboot + vue动漫商城系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·动漫商城系统