关于javascript:日常工作小知识

<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了

// 根底版斐波那契数列
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++
    }
}

background: repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 10px, #bf2010 30px, #fff 30px, #fff 40px);

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;
}

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()	返回浏览器所反对的语音包数组

- –

语法:

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 有兼容问题

构造:

<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 兼容性

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

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)中，起始点（或完结点）后面有多少个字

border: 10px dashed #beceeb; box-shadow: 5px 5px 10px black;

border: 10px dashed #beceeb; filter: drop-shadow(5px 5px 10px black);

后果会有什么区别呢????

什么你说没什么用途哼哼

这个三角大家不生疏把, 可是要加暗影就比拟麻烦, 当初就好啦

平时应用 text-decoration:underline 下划线间隔文字太近问题
当初能够用一个组合的方法自在调整

border-bottom:1px solid;
padding-bottom:1px

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

能够用背景色实现

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

<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 不居中且须要点击选项能力赋值

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>

关于javascript:日常工作小知识

1. a 标签的弱小性能

2. 多种形式实现斐波那契数列

3. css 彩带 / 彩边

4. 二分查找法

5. 让浏览器谈话

6. 指定一个元素应该滚动到哪里 \, 是否应该平滑

7. 含糊背景遮罩

8. 监听 dom 变动

9. getSelection 选中复制文字 \, 判断页面有无点击

10. css 暗影

11. 文本下划线间隔问题

12. 文字色彩突变

13. optgroup 下拉框高级

14. 身份证正则表达式