文章

常用的正則表示

因為真的很常用到,像是你要禁止人家密碼輸入中文字、驗證是不是輸入正確的手機號碼…等,每次都要上網查很麻煩,這邊就定期更新有用到的。

閱讀更多

優化 javascript 連續播放 mp3 音頻 audio 在 ios 上的延遲問題

這篇我光是文章標題就想好久,到底要怎樣一句話就包含所有關鍵字然後說明我到底遇到什麼問題(乾笑

是這樣的,因為最近接一個網頁遊戲的案子,如果有贏的話就要連續播放「叮叮叮叮」的聲音來後開始得分跑數字。

業主給我的 mp3 檔案只有「叮」一聲,所以我要依照玩家贏多少分,「叮」這個聲音就要看我得幾分,就跑幾次,也可以每十分跑一次拉,不然跑太久,反正這是細節。

閱讀更多

[不安裝套件] 製作響應式 RWD 輪播效果 Slider

如題,我個人並不是很排斥安裝 javascript 套件,因為畢竟人家花心思做出來的東西就是會想得比較全面,可是有時候我們就是用不到這麼多功能,所以可以自己動手做的就試著做做看吧!

閱讀更多

canvas 繪製多邊形

在 hahow 買了吳哲宇老師的「動畫互動網頁特效入門(JS/CANVAS)」課程之後,就有一搭沒一搭的看,因為課程內容實在太多了,所以後來索性都跳著看。(我不是業配喔,程度不到~還沒有人要找我業配QQ)

今天一樣是心血來潮的一天,看了一下 第 5 章的第2單元,在教相對座標加上迴圈畫出重複的圖形~

反正就是有一個作業拉,說要畫出12邊形,於是就來實作一下。

閱讀更多

vue 全站鎖右鍵

想要整個網站都鎖右鍵,就要寫在App.vuemounted裡面。

閱讀更多

Safari 出現 SyntaxError: Invalid regular expression: invalid group specifier name

專案中如果有使用到正則表示,在Safari瀏覽器會在某個正則規則下,無法解析出來,就會出現 SyntaxError: Invalid regular expression: invalid group specifier name 的錯誤,然後整個網頁就會空白。

閱讀更多

如何讓fetch也可以有timeout效果

最近在公司接到一個小小的react native案子,整個app只有兩頁,之前使用vue做網頁平台的時候,與後端請求溝通都是使用axios這個套件,有很多的config參數可以設定,裡面就包含了請求逾時timeout

可是我並不想只為了這些十支以內的api去裝axios套件,所以打算自己用fetch寫一個api底層,當然fetch最大的問題就在於:他沒有timeout這種參數給你設定。

要是你網路不穩,他就會一直等啊等啊等啊~

上網找了一堆資料,其中有些人提出用Promise.race方法,概念是:在race陣列中放入兩個function,一個是call api的fetch,另一個是單純的setTimeout,要是setTimeout先完成,就表示逾時拉~

但是在繼續查又看到google大大有提出超完美解法:原文在這裡

閱讀更多

秒數換算mm:ss

方法1:

const paddingZeroLeft = (str, length) => {
    if(typeof (str) !== "string"){
        str = str + "";
    }
    if (str.length >= length){
        return str;
    } else {
        return paddingZeroLeft("0" + str, length);
    }
};
let second = 300;
let mm = paddingZeroLeft(parseInt(vm.refreshCount / 60), 2);
let ss = paddingZeroLeft(parseInt(vm.refreshCount % 60), 2);
let text = '';
text = `0${mm}:${ss}`;
// 05:00

方法2:

引入moment.js

let second = 300;
let text = moment.utc(moment.duration(second, "s").asMilliseconds()).format("HH:mm:ss") || "-";

在vue cli3 專案中使用lodash

import _ from "lodash";

先在會使用到的組件內引入lodash

methods: {
    func(){
        let lodashFunc = _.debounce(this.innerFunc(),1000);
   
        lodashFunc();
    },
    
    innerFunc(){
        console.log('dddd);
    }
}