前端日常高级小技巧找找有没有你日常使用到的小知识, 纯干货不bb, SpeechSynthesisUtterance M

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

12. 文字颜色渐变

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

可以用背景色实现

文本高光效果

css-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位校验位

15. 原生文本解析为元素节点插入到 DOM 树中的指定位置

语法:

element.insertAdjacentHTML(position, text);

position
一个 DOMString，表示插入内容相对于元素的位置，并且必须是以下字符串之一：
- 'beforebegin'：元素自身的前面。
- 'afterbegin'：插入元素内部的第一个子节点之前。
- 'beforeend'：插入元素内部的最后一个子节点之后。
- 'afterend'：元素自身的后面。
text
是要被解析为 HTML 或 XML 元素，并插入到 DOM 树中的 DOMString。

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

**总结: **以上是一些工作中的一些小知识, 如果有错欢迎各位指出, 希望与大家一起交流

结尾彩蛋: 一个图片在线压缩网址移动端调试工具 - Eruda 使用技巧:

<script src="https://cdn.bootcdn.net/ajax/libs/eruda/2.4.1/eruda.min.js"></script>
<script>
    eruda.init()
</script>