早先定好此篇名，不想一去竟是半载，果然是应了这句“良会未有期”。
1、在正则表达式内使用变量
https://stackoverflow.com/questions/494035/how-do-you-use-a-variable-in-a-regular-expression
想在正则表达式内插入变量，只需要构造一下即可：
var replace = "regex"; var re = new RegExp(replace,"g");
2、获取输入框的验证状态
我们知道现代的浏览器,基本都支持基础的表单验证，
因此也不再需要类似 jQuery Validation 的插件将前端工作复杂化。
同时使用 CSS :invalid 伪类，我们也可以方便定义出错样式。
那么在 JS 层面如何获取输入框当前的验证状态呢？这就需要用到 ValidityState 接口了：
var input = document.getElementById('form_input') console.log(input.checkValidity()) console.log(input.validity.badInput)
3、文字渐变效果
原理是设置背景色后，按照前景文字的轮廓裁剪（clip）下来，并将文字设为透明。
h1 { font-size: 72px; background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
4、点击 a 标签强制下载文件
一般情况下如果 a 链接的是图片，点击后会以浏览器继续打开该图片，而非下载。
但我们通过增加 HTML5 的 download 属性，达到可以强制下载的目的。
而进一步设置其值，还能巧妙地修改下载后的文件名：
<a href="./b.png" download="c">click</a> <!-- download as "c.png" -->
5、单行文字分散对齐
文字分散对齐的 text-align: justify 需要对多行文字才能其效果。
对于单行文字而言，我们则需要用 ::after 伪元素进行一些 hack 了：
h1 { height: 1.5em; line-height: 1.5em; text-align: justify; text-align-last: justify; } h1::after { content: ”; display: inline-block; width: 100%; }
6、国内浏览器的私有 meta 属性
主要为兼容移动端，时间有些久远了，存档用。
/* uc */ <meta name="screen-orientation" content="portrait|landscape"> <meta name="full-screen" content="yes"> <meta name="viewport" content="uc-fitscreen=no|yes"/> <meta name="layoutmode" content="fitscreen|standard" /> <meta name="nightmode" content="enable|disable"/> <meta name="imagemode" content="force"/> <meta name="browsermode" content="application"/> <img src="..." show="force"> /* qq x5 */ <meta name="x5-orientation" content="portrait|landscape" /> <meta name="x5-fullscreen" content="true" /> <meta name="x5-page-mode" content="app" />
7、网页适配苹果系统
和上一条同样用于存档，有些已经过时了。
<link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png"> <link rel="apple-touch-startup-image" href="/launch.png"> <meta name="apple-mobile-web-app-title" content="AppTitle"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <a href="tel:1-408-555-5555">Call me</a>
8、隐藏 HTML5 视频播放的控制按钮
视频的 controls 属性类似输入框的 required，是个布尔值，不写就已经是“非”了。
<video width="300" height="200" autoplay> <source src="video/supercoolvideo.mp4" type="video/mp4" /> </video>
9、简易随机字符串
当然用 Math.random() 循环出来肯定是没问题的，骆驼 以前还写过个小工具。
下面这个方法就相当巧妙了，只随机一次，
再用带基数（radix）的 toString() 转为字符串后裁截：
Math.random().toString(36).slice(2, 6)
10、解决 XAMPP 意外终止 MySQL 造成的重启不能
简而言之就是在不影响原数据的情况下，删除损坏的缓存：
C:\xampp\mysql\data\ibdata1
（实在不行就备份重装吧，反正也就分分钟事情，呃。）
【相关资料】
0、Chris Wright Follow – Praca i Bób ◃ flickr（题图）
