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.scroll(x-coord, y-coord) element.scroll(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>
