良会未期的豆知识

早先定好此篇名,不想一去竟是半载,果然是应了这句“良会未有期”。

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 的插件将前端工作复杂化。
同时使用 :invalid 伪类,我们也可以方便定义出错样式。
那么在 层面如何获取输入框当前的验证状态呢?这就需要用到 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 链接的是图片,点击后会以浏览器继续打开该图片,而非下载。
但我们通过增加 5 的 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:\\\data\ibdata1
(实在不行就备份重装吧,反正也就分分钟事情,呃。)

【相关资料】
0、Chris Wright Follow – Praca i Bób ◃ flickr(题图)

发表评论

电子邮件地址不会被公开。 必填项已用*标注