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. 我有很多个文件夹,里面存储的都有网页,本文章中的网页对多个文件夹进行了一个集合~
相关推荐
神仙别闹2 分钟前
基于 PHP + MySQL 图书库存管理系统
android·mysql·php
霸道流氓气质2 分钟前
Spring AI Alibaba Skills 完整实战:从零构建智能会议助手
java·人工智能·spring
zhangphil8 分钟前
Android内存回收:GC、kswapd 和 mm_vmscan_direct_reclaim概述
android
极客先躯13 分钟前
高级java每日一道面试题-2026年02月04日-实战篇[Docker]-如何在容器之间共享数据?
java·运维·网络·docker·容器·自动化·高级面试题
真实的菜13 分钟前
微服务架构痛点
java·微服务·架构
小楊不秃头15 分钟前
Spring:Bean的存储
java·spring·bean
西凉的悲伤15 分钟前
多线程彻底掌握 CompletableFuture:从入门到项目实战
java·多线程·future·completable·异步
用户2986985301415 分钟前
Java 中的 HTML 解析:从文件读取、URL 抓取到数据提取
java·后端
plainGeekDev15 分钟前
ContentProvider → Room + Repository
android·java·kotlin
十九画生19 分钟前
从同步到异步:重新理解 JavaScript 的执行机制
javascript