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.MozMutationObserverlet 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>