竖屏只有数字的选择页面
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>有哪些可以学习的地方？
- 这种页面需要快速显示，所以不需要精美ui，并且跳转按钮非常大！
- 本页面中只有数字和英文，所以不需要
<meta charset="UTF-8">！不用添加这个，这样可以让文件更小！ - 想要多少个选项跳转按钮，只需要修改
[...Array(99)]这个里面的数字即可！后续只需修改这里的数字就行，符合设计初衷。 - 这就是关键选项跳转按钮
<a href="${++a}/0.html">${a}</a>！使用++精简代码长度，在这里注意只需添加一个就行，后面第2次使用变量a使用的就是前面已经加过1的变量a！ - 代码并不小众，不用担心后续js会被废弃的问题：【1】
[...]三个点是ECMAScript 2015（ES6）的标准化特性，已被所有现代浏览器实现并长期支持，且广泛应用于主流前端框架和生产环境代码中。基于ECMAScript标准"向后兼容"的设计原则，以及其在JS语法体系中的基础地位，该特性不存在被废弃的可能性，可长期在项目中使用。【2】++自增运算符是ECMAScript 1的原生标准特性，是JavaScript的底层基础语法之一，已被所有浏览器实现并持续支持数十年，且广泛应用于各类JS项目、框架及底层源码中。基于ECMAScript标准强向后兼容的设计原则，该基础运算符不存在被废弃的可能性，可长期在项目中放心使用。 - 我有很多个文件夹，里面存储的都有网页，本文章中的网页对多个文件夹进行了一个集合～