日常工作小知识

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:1px

12. 文字颜色渐变

span {
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    color: transparent;
}

可以用背景色实现

文本高光效果 -webkit-background-clip: text;

13. optgroup 下拉框高级

  
    Volvo
    Saab
  

  
    Mercedes
    Audi
  

注意: 使用 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
使用技巧: