共计 5128 个字符，预计需要花费 13 分钟才能阅读完成。
1. a 标签的弱小性能
<a href="tel:10086">10086</a> // 点击后间接拨打 10086
<a href="mailto:c1586@qq.com?subject=TestObject">c6088@qq.com</a> // 点击后间接给 c1586@qq.com 发邮件，主题为：TestObject
<a href="sms:10086?body=message_body"> 给 10086 发短信 </a> // 点击后间接给 10086 发信息，音讯内容默认为 message_body
<a href="sms:10086?body=message_body"> 给 10086 发短信 </a> // 点击后间接给 10086 发信息，音讯内容默认为 message_body
<a href="img/WC.png" download="WC.png"> 下载图片 </a> //href 中只须要放上图片的链接尽量不应用 target="_blank"，如果肯定要用，须要加上 rel="noopener" 或者 rel="noreferrer"。这样新窗口的 window.openner 就是 null了
2. 多种形式实现斐波那契数列
// 根底版斐波那契数列
function fabonacci(n) {
let num1 = 1,
num2 = 1,
sum;
let arr = [1, 1];
for (let i = 3; i <= n; i++) {
sum = num1 + num2;
num1 = num2;
num2 = sum;
arr.push(sum);
}
return arr;
}
// 基于 ES6 Generator 实现
function* fabonacciG(num) {
var a = 1,
b = 1,
n = 0;
while (n < num) {
yield a;
[a, b] = [b, a + b];
n++
}
}3. css 彩带 / 彩边
background: repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 10px, #bf2010 30px, #fff 30px, #fff 40px);4. 二分查找法
const search = function(nums, target) {
let start = 0, end = nums.length - 1;
while (start <= end) {const mid = start + ((end - start) >> 1);
if (nums[mid] === target) {return mid;}
// 左侧有序
if (nums[mid] >= nums[start]) {// target 在 [start, mid] 之间
if (target >= nums[start] && target < nums[mid]) {end = mid - 1;} else {start = mid + 1;}
} else { // 右侧有序
// target 在 [mid, end] 之间
if (target > nums[mid] && target <= nums[end]) {start = mid + 1;} else {end = mid - 1;}
}
}
return -1;
}5. 让浏览器谈话
let speechInstance = new SpeechSynthesisUtterance('你好，老铁');
speechSynthesis.speak(speechInstance);上面简略介绍一下相干的属性和办法：
SpeechSynthesisUtterance 对象的属性：
| 属性 | 类型 | 形容 |
|---|---|---|
| text | string | 须要要读的内容 |
| lang | string | 应用的语言（比方：”zh-CN”） |
| volume | number | 音量，值在 0 - 1 之间（默认是 1） |
| rate | number | 语速的倍数，值在 0.1-10 之间（默认 1 倍） |
| pitch | number | 音高，值在 0 - 2 之间，（默认是 1） |
| voice | string | 指定心愿应用的声音 |
SpeechSynthesisUtterance 对象的办法：
| 办法 | 形容 |
|---|---|
| onstart | 语音开始合成时触发 |
| onpause | 语音暂停时触发 |
| onresume | 语音合成从新开始时触发 |
| onend | 语音完结时触发 |
创立好实例后实在的语音是由 speechSynthesis 来创立的，其罕用的办法如下：
| 办法 | 形容 |
|---|---|
| speak() | 开始合成语音，将对应的实例增加到语音队列中 |
| cancel() | 进行合成语音，删除队列中所有的语音 |
| pause() | 暂停语音合成 |
| resume() | 复原暂停后的语音 |
| getVoices() | 返回浏览器所反对的语音包数组 |
-
- –
6. 指定一个元素应该滚动到哪里 \, 是否应该平滑
语法:
element.scrollTo(x-coord, y-coord)
element.scrollTo(options)参数:
x-coord是冀望滚动到地位程度轴上距元素左上角的像素y-coord是冀望滚动到地位竖直轴上距元素左上角的像素options是一个ScrollToOptions对象。
| 属性 | 形容 |
|---|---|
| top | 指定 window 或元素 Y 轴方向滚动的像素数 |
| left | 指定 window 或元素 X 轴方向滚动的像素数 |
| behavior | 指定滚动是否应该平滑进行，还是立刻跳到指定地位。值为：smooth：滚动动画晦涩 auto：滚动一次跳转 |
对 Safari 有兼容问题
7. 含糊背景遮罩
构造:
<body>
<div class="bg"></div>
<div class="mask"></div>
</body>款式:
@-webkit-keyframes move {0% { background-position: 0 0}
50% {background-position: 100% 0}
}
@keyframes move {0% { background-position: 0 0}
50% {background-position: 100% 0}
}
.bg {
position: fixed;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
z-index: -1;
background: url(http://demo.lanrenzhijia.com/demo/68/6876/demo/img/bg.jpg);
background-size: cover;
-webkit-filter: blur(15px);
filter: blur(15px)
}
.slogan {
margin-top: 24px;
color: #fff;
font-weight: 400;
font-size: 36px
}
.mask {
width: 340px;
height: 196px;
background-image: url(http://demo.lanrenzhijia.com/demo/68/6876/demo/img/bg.jpg);
background-size: cover;
-webkit-animation: move 40s infinite;
animation: move 40s infinite;
-webkit-mask: url(http://demo.lanrenzhijia.com/demo/68/6876/demo/svg/seeklogo.com.svg);
mask: url(http://demo.lanrenzhijia.com/demo/68/6876/demo/svg/seeklogo.com.svg);
-webkit-mask-size: cover;
mask-size: cover
}mask 兼容性可能不太好 mask 兼容性
8. 监听 dom 变动
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
let target = document.querySelector('.resize')
let observer = new MutationObserver(() = > {let width = getComputedStyle(target).getPropertyValue('width')
let height = getComputedStyle(target).getPropertyValue('height')
this.recordOldValue = {width, height}
})
observer.observe(target, {
childList: true,
attributes: true,
characterData: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true,
attributeFilter: ['style']
})此办法兼容性还不错, 可查文档 MutationObserver
9. getSelection 选中复制文字 \, 判断页面有无点击
1、通过 window.getSelection() 获取 Selection 对象, 调用 toString() 获取选中文本
2、Selection 有一个 rangCount 属性，为 0 示意没有点击任何中央，1 示意点过
collapsed：示意以后 range 范畴是否是闭合的。true 则示意以后 range 范畴的起始和完结是同一个地位。其实就是当前页面上没有被抉择的范畴。也能够认为以后抉择范畴是一个点。
commonAncestorContainer: 示意独特的先人节点。如果以后抉择范畴是跨节点的，即我的开始点是在上一个 div，完结点在他的兄弟节点 div 中。那此时 commonAncestorContainer 就示意他俩的父节点（最近的公共先人节点）。如果开始点和完结点在同一个 div 中，则此属性的值指向以后 div。
startContainer/endContainer: 范畴起始点和完结点所在的节点中。
startOffset/endOffset: 范畴起始点和完结点在以后 container 中的偏移量，即在 startContainer(或 endContainer)中，起始点（或完结点）后面有多少个字
10. css 暗影
border: 10px dashed #beceeb; box-shadow: 5px 5px 10px black;
border: 10px dashed #beceeb; filter: drop-shadow(5px 5px 10px black);后果会有什么区别呢????
什么你说没什么用途哼哼
这个三角大家不生疏把, 可是要加暗影就比拟麻烦, 当初就好啦
11. 文本下划线间隔问题
平时应用 text-decoration:underline 下划线间隔文字太近问题
当初能够用一个组合的方法自在调整
border-bottom:1px solid;
padding-bottom:1px12. 文字色彩突变
span {background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}能够用背景色实现
文本高光成果 -webkit-background-clip: text;
13. optgroup 下拉框高级
<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>留神: 应用 optgroup 后会导致 ios 上 option 不居中且须要点击选项能力赋值
14. 身份证正则表达式
Reg: /^d{6}(18|19|20)?d{2}(0[1-9]|1[012])(0[1-9]|[12]d|3[01])d{3}(d|[xX])$/
位校验规定 6 位地址编码 + 8 位出生日期 + 3 位顺序号 + 1 位校验位
总结: 以上是一些工作中的一些小常识, 如果有不错欢送各位指出, 心愿与大家一起交换
结尾彩蛋
一个图片在线压缩网址
挪动端调试工具 – Eruda
应用技巧:
<script src="https://cdn.bootcdn.net/ajax/libs/eruda/2.4.1/eruda.min.js"></script>
<script>
eruda.init()
</script>