平常工做小知识

时间 2021-03-19

标签 css ios web ajax 正则表达式数组浏览器 dom svg 工具栏目 CSS 繁體版

原文原文链接

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

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对象的属性：ios

属性	类型	描述
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对象的方法：web

方法	描述
onstart	语音开始合成时触发
onpause	语音暂停时触发
onresume	语音合成从新开始时触发
onend	语音结束时触发

建立好实例后真实的语音是由speechSynthesis来建立的，其经常使用的方法以下：ajax

方法	描述
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>

样式:dom

@-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 选中复制文字\, 判断页面有无点击

一、经过 window.getSelection() 获取 Selection 对象, 调用 toString() 获取选中文本svg

二、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 下拉框高级

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