平常工做小知識

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。