1. a标签的强大功能
10086 //点击后直接拨打10086
[email protected] //点击后直接给[email protected]发邮件，主题为：TestObject
给 10086 发短信 //点击后直接给10086发信息，消息内容默认为message_body
给 10086 发短信 //点击后直接给10086发信息，消息内容默认为message_body
下载图片 //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. 模糊背景遮罩
结构:
样式:
@-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 下拉框高级
注意: 使用 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
使用技巧: