JavaScript 取得螢幕寬度的方法

本篇介紹如何用 JavaScript 來取得螢幕寬度，JavaScript 可以用 screen.width 取得螢幕寬度，範例如下，

1
2
3
<script type="text/javascript">
  console.log(screen.width); // 螢幕寬度
</script>

另外以下還有其它幾種常見的寬度，

1
2
3
4
5
<script type="text/javascript">
  console.log(window.innerWidth); // 瀏覽器寬度
  console.log(document.documentElement.scrollWidth); // 網頁正文全文寬度
  console.log($(window).width()); // jquery 網頁正文全文寬度
</script>

JavaScript 取得螢幕寬度的完整範例如下，

js-get-screen-width.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>js-get-screen-width</title>
  </head>
  <body>
    <p id="demo">Get screen width</p>
    <script type="text/javascript">
      console.log(screen.width); // 螢幕寬度
      //console.log(window.innerWidth); // 瀏覽器寬度
      //console.log(document.documentElement.scrollWidth); // 網頁正文全文寬度
      //console.log($(window).width()); // jquery 網頁正文全文寬度

      var demo = document.getElementById("demo");
      demo.innerHTML = "Get screen width: " + screen.width;
      </script>
  </body>
</html>

以上就是 JavaScript 取得螢幕寬度的方法範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！

Linux head 用法與範例

本篇將介紹 Linux head 的用法與範例，Linux head 指令可以輸出顯示檔案內容的頭幾行，接下來看看 Linux head 的一些用法範例吧。

Linux 使用 head 指令輸出顯示 file.txt 前幾行（預設是前 10 行），

1
head file.txt

Linux 使用 head 指令輸出顯示 file.txt 前 20 行，-n 表示行數，

1
head -n 20 file.txt

Linux 使用 head 指令輸出顯示 file.txt 前 5 bytes，-c 表示 byte 數，

1
head -c 5 file.txt

以上就是 Linux head 用法與範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！

其它相關文章推薦
Linux 常用指令教學懶人包

C/C++教學

C++ std::ifstream::seekg 用法與範例

本篇介紹 C/C++ std::ifstream::seekg 用法與範例，C/C++ 可以使用 seekg 移動檔案指標到某個位置，例如在讀檔想要跳至某個位置讀取時就會用到 seekg，接下來看看 seekg 用法範例。

以下 C++ std::ifstream::seekg 的用法介紹將分為這幾部份，

  • C++ std::ifstream::seekg 基本範例
  • C++ std::ifstream::seekg 計算檔案大小
  • C++ std::ifstream::seekg 計算檔案全部文字再 new 配置記憶體

那我們開始吧！

要使用 std::ifstream::seekg 的話，需要引入的標頭檔: <fstream>

C++ std::ifstream::seekg 基本範例

以下為 std::ifstream::seekg 移動檔案指標搭配 std::ifstream::tellg 的各種情況範例，了解這些情況更能幫助了解怎麼使用 std::ifstream::seekg，剛開完檔後使用 tellg 會回傳 0，使用 seekg 移動 5 個 bytes 再用 tellg 會回傳 5，再次使用 seekg 移動 5 個 bytes 再用 tellg 還是會回傳 5，說明 seekg 預設是移動到一個從檔頭開始的絕對位置而不是前一次的相對位置，移動相對位置的話則要 seekg 搭配 std::ifstream::cur 參數就會以當前的位置再開始移動，最後兩個範例分別是移到檔尾跟移到檔頭，

std-ifstream-seekg.cpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// g++ std-ifstream-seekg.cpp -o a.out
#include <iostream>
#include <fstream>
using namespace std;

int main() {
    std::ifstream ifs("input.txt", std::ios::in);
    if (!ifs.is_open()) {
        cout << "Failed to open file.\n";
        return 1;
    }

    size_t pos = ifs.tellg();
    cout << "position: " << pos << "\n";

    ifs.seekg(5);
    cout << "position: " << ifs.tellg() << "\n";

    ifs.seekg(5);
    cout << "position: " << ifs.tellg() << "\n";

    ifs.seekg(5, std::ifstream::cur);
    cout << "position: " << ifs.tellg() << "\n";

    ifs.seekg(0, std::ifstream::end); // 移到檔尾
    cout << "position: " << ifs.tellg() << "\n";

    ifs.seekg(0, std::ifstream::beg); // 移到檔頭
    cout << "position: " << ifs.tellg() << "\n";

    ifs.close();
    return 0;
}

假設我的 input.txt 檔案大小是 44 bytes，程式執行結果輸出如下，

1
2
3
4
5
6
position: 0
position: 5
position: 5
position: 10
position: 44
position: 0

C++ std::ifstream::seekg 計算檔案大小

這邊介紹一下如何利用 std::ifstream::seekg 來計算檔案大小，
我們可以藉由 std::ifstream::seekg 移動到檔尾，然後 tellg 取得 size，藉此來知道檔案大小，這種情形通常是在使用 new 或 malloc 動態配置記憶體時需要知道總大小是多少的情況會使用到，

std-ifstream-seekg2.cpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// g++ std-ifstream-seekg2.cpp -o a.out
#include <iostream>
#include <fstream>
using namespace std;

int main() {
    std::ifstream ifs("input.txt", std::ios::in);
    if (!ifs.is_open()) {
        cout << "Failed to open file.\n";
        return 1;
    }

    ifs.seekg(0, std::ifstream::end);
    size_t fsize = ifs.tellg();
    cout << "file size: " << fsize << "\n";
    ifs.close();
    return 0;
}

結果輸出如下，

1
file size: 44

C++ std::ifstream::seekg 計算檔案全部文字再 new 配置記憶體

以下示範 C++ std::ifstream::seekg 移動檔案指標到檔尾，然後計算檔案全部文字後 new 配置記憶體，再讀取檔案內容到預先配置好的 buffer 裡，

std-ifstream-seekg3.cpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// g++ std-ifstream-seekg3.cpp -o a.out
#include <iostream>
#include <fstream>
using namespace std;

int main() {
    std::ifstream ifs("input.txt", std::ios::in);
    if (!ifs.is_open()) {
        cout << "Failed to open file.\n";
        return 1;
    }

    ifs.seekg(0, std::ifstream::end);
    int size = ifs.tellg();
    cout << "size: " << size << "\n";
    ifs.seekg(0, std::ifstream::beg);

    char *buffer = new char[size];

    ifs.read(buffer, size);
    ifs.close();

    //std::cout << buffer;
    std::cout.write(buffer, size);

    delete[] buffer;

    return 0;
}

以上就是 C++ std::ifstream::seekg 用法與範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！

其它相關文章推薦
C/C++ 新手入門教學懶人包
std::string 用法與範例
std::vector 用法與範例
std::sort 用法與範例
std::map 用法與範例
std::set 用法與範例

Github

Github 如何使用 Personal Access Token

本篇 ShengYu 介紹 Github 如何使用 Personal Access Token，產生 Github Access Token 的好處是如果有臨時需要給其他人權限進行共同編輯，但又不想將對方加成協作者時就可以使用 token 的方式來臨時給對方權限，同時也可以設定要給這個 Access Token 幾天的存取權限，例如7/30/60/90天數等等，以及 這個 Access Token 有怎麼樣的權限，例如只能更新 code 不能 push code 等等權限設定，Github 如何使用 Personal Access Token 分成這幾部分介紹，

  • Github 產生 Token
  • Github Token 怎麼使用
  • Github Token 過期怎麼辦？

沒有 Github Token 的話我們需要先在 Github 網站上產生一個 Token，

Github 產生 Token

這邊介紹 Github 網站如何產生 Personal Access Token，
先登入自己 GitHub 帳號並進入 Settings，

選擇左下方的 Developer settings，

左邊選擇 Personal access tokens > Token (classic)，
接著右上角選擇 Generate new token 來創一個新的 token

輸入 token 的名稱（自己記得用途即可），以及設定這個 token 控制權限，

最後按 Generate token 產生 token，

token 就會出現在畫面上，

請複製保存好此 Token，跳出畫面後它就不會再出現，忘記的話就得再產生一個新的。
之後在需要輸入 password 時，填入 token 就可以了，GitHub 會驗證該 token 是否有權操控相對應功能。

Github Token 怎麼使用

原本存取時帳號需要輸入密碼 password 的部分，換成輸入 token 就可以了！

使用 token 的好處是如果有臨時需要給其他人權限進行共同編輯，但又不想將對方加成協作者時就可以使用 token 的方式來臨時給對方權限。

Github Token 過期怎麼辦？

Github Token 過期時之後在存取 github 時會出現錯誤，例如過期後我 git pull --rebase 更新 code 會出現以下訊息，表示 token 過期了，再次 git pull --rebase 時會提示我要輸入密碼 password，這時輸入原本過期的 token 一樣是失效，

1
2
3
4
5
6
$ git pull --rebase
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/xxx/xxx.git/'

$ git pull --rebase 
Password for 'https://xxx@github.com':

那怎麼辦呢？token 過期的解決方式很簡單，就是在申請一個新的 token，原本的 token 就可以刪除了，取得新的 token 後，提示我要輸入密碼 password 時，輸入新的 token 就可以囉！

1
2
3
4
$ git pull --rebase   
Password for 'https://xxx@github.com': 
Already up to date.
Current branch master is up to date.

以上就是 Github 如何使用 Personal Access Token 的介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！

其它相關文章推薦
Github 提交你的修改貢獻到開源專案
Github 如何更新已經 fork 的專案與原專案紀錄同步
Git 顯示某個檔案的歷史修改記錄
Git 顯示整個repository的歷史修改記錄

JavaScript 取得瀏覽器寬度的方法

本篇介紹如何用 JavaScript 來取得瀏覽器寬度，JavaScript 可以用 window.innerWidth 取得瀏覽器寬度，範例如下，

1
2
3
<script type="text/javascript">
  console.log(window.innerWidth); // 瀏覽器寬度
</script>

另外以下還有其它幾種常見的寬度，

1
2
3
4
5
<script type="text/javascript">
  console.log(screen.width); // 螢幕寬度
  console.log(document.documentElement.scrollWidth); // 網頁正文全文寬度
  console.log($(window).width()); // jquery 網頁正文全文寬度
</script>

JavaScript 取得瀏覽器寬度的完整範例如下，

js-get-browser-width.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>js-get-browser-width</title>
  </head>
  <body>
    <p id="demo">Get browser width</p>
    <script type="text/javascript">
      //console.log(screen.width); // 螢幕寬度
      console.log(window.innerWidth); // 瀏覽器寬度
      //console.log(document.documentElement.scrollWidth); // 網頁正文全文寬度
      //console.log($(window).width()); // jquery 網頁正文全文寬度

      var demo = document.getElementById("demo");
      demo.innerHTML = "Get browser width: " + window.innerWidth;
      </script>
  </body>
</html>

如果要用寬度來調整網頁的呈現方式的話，可以參考 Bootstrap 的定義，Bootstrap 判斷的解析度斷點以 576(xs)、768(sm)、992(md) 三種大小來分別判斷為手機、平板、電腦三種裝置。

以上就是 JavaScript 取得瀏覽器寬度的方法範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！

C/C++教學

C++ std::ifstream::tellg 用法與範例

本篇介紹 C/C++ std::ifstream::tellg 的用法與範例，tellg 就是回傳目前檔案指標的位置，也可以理解成從檔頭到當前檔案指標的絕對位置，接下來看看 tellg 的使用範例。

以下 C++ std::ifstream::tellg 的用法介紹將分為這幾部份，

  • C++ std::ifstream::tellg 基本範例
  • C++ std::ifstream::tellg 計算檔案大小
  • C++ std::ifstream::tellg 計算檔案全部文字再 new 配置記憶體

那我們開始吧！

要使用 std::ifstream::tellg 的話，需要引入的標頭檔: <fstream>

C++ std::ifstream::tellg 基本範例

以下為 std::ifstream::tellg 搭配 std::ifstream::seekg 移動檔案指標的各種情況範例，了解這些情況更能幫助了解怎麼使用 std::ifstream::tellg，剛開完檔後使用 tellg 會回傳 0，使用 seekg 移動 5 個 bytes 再用 tellg 會回傳 5，再次使用 seekg 移動 5 個 bytes 再用 tellg 還是會回傳 5，說明 seekg 預設是移動到一個從檔頭開始的絕對位置而不是前一次的相對位置，移動相對位置的話則要 seekg 搭配 std::ifstream::cur 參數就會以當前的位置再開始移動，最後兩個範例分別是移到檔尾跟移到檔頭，

std-ifstream-tellg.cpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// g++ std-ifstream-tellg.cpp -o a.out
#include <iostream>
#include <fstream>
using namespace std;

int main() {
    std::ifstream ifs("input.txt", std::ios::in);
    if (!ifs.is_open()) {
        cout << "Failed to open file.\n";
        return 1;
    }

    size_t pos = ifs.tellg();
    cout << "position: " << pos << "\n";

    ifs.seekg(5);
    cout << "position: " << ifs.tellg() << "\n";

    ifs.seekg(5);
    cout << "position: " << ifs.tellg() << "\n";

    ifs.seekg(5, std::ifstream::cur);
    cout << "position: " << ifs.tellg() << "\n";

    ifs.seekg(0, std::ifstream::end); // 移到檔尾
    cout << "position: " << ifs.tellg() << "\n";

    ifs.seekg(0, std::ifstream::beg); // 移到檔頭
    cout << "position: " << ifs.tellg() << "\n";

    ifs.close();
    return 0;
}

假設我的 input.txt 檔案大小是 44 bytes，程式執行結果輸出如下，

1
2
3
4
5
6
position: 0
position: 5
position: 5
position: 10
position: 44
position: 0

C++ std::ifstream::tellg 計算檔案大小

這邊介紹一下如何利用 std::ifstream::tellg 來計算檔案大小，
我們可以藉由 std::ifstream::seekg 移動到檔尾，然後 tellg 取得 size，藉此來知道檔案大小，這種情形通常是在使用 new 或 malloc 動態配置記憶體時需要知道總大小是多少的情況會使用到，

std-ifstream-tellg2.cpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// g++ std-ifstream-tellg2.cpp -o a.out
#include <iostream>
#include <fstream>
using namespace std;

int main() {
    std::ifstream ifs("input.txt", std::ios::in);
    if (!ifs.is_open()) {
        cout << "Failed to open file.\n";
        return 1;
    }

    ifs.seekg(0, std::ifstream::end);
    size_t fsize = ifs.tellg();
    cout << "file size: " << fsize << "\n";
    ifs.close();
    return 0;
}

結果輸出如下，

1
file size: 44

C++ std::ifstream::tellg 計算檔案全部文字再 new 配置記憶體

以下示範 C++ std::ifstream::tellg 計算檔案全部文字後再 new 配置記憶體，

std-ifstream-tellg3.cpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// g++ std-ifstream-tellg3.cpp -o a.out
#include <iostream>
#include <fstream>
using namespace std;

int main() {
    std::ifstream ifs("input.txt", std::ios::in);
    if (!ifs.is_open()) {
        cout << "Failed to open file.\n";
        return 1;
    }

    ifs.seekg(0, std::ifstream::end);
    int size = ifs.tellg();
    cout << "size: " << size << "\n";
    ifs.seekg(0, std::ifstream::beg);

    char *buffer = new char[size];

    ifs.read(buffer, size);
    ifs.close();

    //std::cout << buffer;
    std::cout.write(buffer, size);

    delete[] buffer;

    return 0;
}

以上就是 C++ std::ifstream::tellg 子字串用法與範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！

其它相關文章推薦
C/C++ 新手入門教學懶人包
std::string 用法與範例
std::vector 用法與範例
std::sort 用法與範例
std::map 用法與範例
std::set 用法與範例

webp 轉換 png 的 command line 指令

本篇 ShengYu 介紹 webp 轉換 png 的 command line 指令用法與範例。

使用 convert 指令將 webp 轉 png，因為 convert 依賴 ImageMagick，適用於 ImageMagick v6，Linux 與 macOS 都適用，

1
covert input.webp output.png

使用 magick 指令將 webp 轉 png，適用於 ImageMagick v7，

1
magick input.webp output.png

使用 ffmpeg 指令將 webp 轉 png，

1
ffmpeg -i input.webp output.png

使用 dwebp 指令將 webp 轉 png，

1
dwebp input.webp -o output.png

使用 cwebp 指令將 webp 轉 png，

1
cwebp input.png -o output.webp

其它參考
How to Convert WebP to PNG in Linux
https://winaero.com/convert-webp-png-linux/
Convert WEBP images to PNG by Linux command - Stack Overflow
https://stackoverflow.com/questions/55161334/convert-webp-images-to-png-by-linux-command

Linux split 分割檔案用法與範例

本篇介紹 Linux split 的用法與範例，Linux split 指令可以用來分割檔案，一般檔案又分為二進制檔形式或文字檔形式的，這兩種本篇都會一併介紹，以下來就看看 Linux split 分割檔案的用法與範例吧！

以下 Linux split 指令用法與範例的內容大概分為這幾部分，

  • Linux split 分割文字檔
  • Linux split 分割二進制檔

那我們開始吧！

Linux split 分割文字檔

以下示範 Linux split 分割文字檔，用 split 指令分割 file.txt 文字檔，以每 10 行分割一份，預設分割檔按用字母當後綴字，

1
2
3
$ split -l 10 file.txt
$ ls
file.txt  xaa  xab  xac  xad  xae

承上例，指定分割檔的前綴字為 split-，

1
2
3
$ split -l 10 file.txt split-
$ ls
file.txt  split-aa  split-ab  split-ac  split-ad  split-ae

split 指令分割 file.txt 文字檔，以每 10 行分割一份，使用 -d 是讓分割檔使用數字當後綴字，

1
2
3
$ split -l 10 -d file.txt
$ ls
file.txt  x00  x01  x02  x03  x04

承上例，使用 -a 指定後綴字長度是 3，用 0 補滿，後綴長度預設是 2，

1
2
3
$ split -l 10 -d -a 3 file.txt
$ ls
file.txt  x000  x001  x002  x003  x004

承上例，指定分割檔的前綴字為 split-，

1
2
3
$ split -l 10 -d -a 3 file.txt split-
$ ls
file.txt  split-000  split-001  split-002  split-003  split-004

上述的 file.txt 可以透過 base64 指令產生一個測試用的 file.txt，例如：base64 /dev/urandom | head -c 3850 > file.txt，詳細請看這篇的介紹。

Linux split 分割二進制檔

以下示範 Linux split 分割二進制檔，用 split 指令分割 binary.bin 二進制檔，以每 10KB 分割一份，預設分割檔按用字母當後綴字，

1
2
3
$ split -b 10k binary.bin
$ ls
binary.bin  xaa  xab  xac  xad  xae

承上例，指定分割檔的前綴字為 split-，

1
2
3
$ split -b 10k binary.bin split-
$ ls
binary.bin  split-aa  split-ab  split-ac  split-ad  split-ae

split 指令分割 binary.bin 二進制檔，以每 10KB 分割一份，使用 -d 是讓分割檔使用數字當後綴字，(macOS 無 -d 此參數)

1
2
3
$ split -b 10k -d binary.bin
$ ls
binary.bin  x00  x01  x02  x03  x04

承上例，使用 -a 指定後綴字長度是 3，用 0 補滿，後綴長度預設是 2，(macOS 無 -d 此參數)

1
2
3
$ split -b 10k -d -a 3 binary.bin
$ ls
binary.bin  x000  x001  x002  x003  x004

承上例，指定分割檔的前綴字為 split-，(macOS 無 -d 此參數)

1
2
3
$ split -b 10k -d -a 3 binary.bin split-
$ ls
binary.bin  split-000  split-001  split-002  split-003  split-004

上述的 binary.bin 可以透過 dd 指令產生一個測試用的 binary.bin，例如：dd if=/dev/zero bs=50k count=1 of=binary.bin，詳細請看這篇的介紹。

以上就是 Linux split 分割檔案用法與範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！

其它相關文章推薦
Linux 常用指令教學懶人包

jQuery 新手入門教學

本篇介紹 jQuery 新手入門教學，jQuery 是一套跨瀏覽器的 JavaScript 的函式庫，用於簡化 HTML 與 JavaScript 之間的操作，提供了一些簡便的語法，廢話不多說，直接開始進行最基本的 jQuery 範例。

以下 jQuery 新手入門教學分為這幾部分，

  • jQuery 基本用法
  • jQuery 處理按鈕事件

jQuery 基本用法

在網頁中要先在 src 中指定 jQuery library 路徑，否則會執行錯誤，如下範例，使用 3.6.0 版本的 jquery.min.js，

1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

你也可以下載一份 jQuery 函式庫放在本地端，然後更改 script 的 src="..." 使用本地端的 jQuery 版本。

1
<script src="/jquery/3.6.0/jquery.min.js"></script>

以下範例是在網頁 html 的 DOM 元素全部下載完後觸發 $(document).ready() 執行程式，$(document).ready() 跟 window.onload 很像，都是在 HTML 執行 DOM 操作，但他們還是有一些觸發時間差異，

jquery-tutorial.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("p").click(function(){
          //document.body.style.background = 'red';
          
          //let elements = document.querySelectorAll('p');
          //elements.forEach(ele => ele.style.background = 'red');

          /*let p = document.getElementsByTagName('p');
          for (let i = 0; i < p.length; i++) {
              p[i].style.background = 'red';
          }*/
          
          //$('p').css('background', 'red');
          
          //document.getElementById("hello").style.background = 'red';
          $('#hello').css('background', 'red');
        });
      });
    </script>
  </head>
  <body>
    <p id="hello">Hello World</p>
    <p>This is a jQuery example</p>
  </body>
</html>

jQuery 處理按鈕事件

以下示範點擊按鈕後，觸發按鈕事件，在按鈕事件中紀錄點擊次數，並顯示點擊次數顯示在按鈕上，

jquery-tutorial2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      let counter = 0;
      $(document).ready(function() {
        $('#btn').on('click', function() {
          counter++;
          console.log(counter);
          $(this).html("按鈕點擊" + counter + "次")
          //$('#btn').text("按鈕點擊" + counter + "次");
        });
      });
    </script>
  </head>
  <body>
    <button id="btn">按鈕</button>
  </body>
</html>

以上就是 JavaScript 判斷手機版/行動裝置範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！

其他參考
jQuery Tutorial
https://www.w3schools.com/jquery/default.asp
[基礎課程] jQuery 教學（一）：基礎觀念 | 洛奇的邪惡組織手札
https://summer10920.github.io/2020/04-23/jq-baseclass-1/

JavaScript setInterval 用法與範例

本篇 ShengYu 介紹 JavaScript setInterval 的用法與範例，setInterval 用途就是就是設定一個定時器，setInterval 會不斷地執行觸發事件，即不只觸發一次，setInterval 屬於非同步函式。

以下 JavaScript setInterval 的用法介紹將分為這幾部份，

  • JavaScript setInterval 基本用法
  • 使用 clearInterval 取消 setInterval

那我們開始吧！

JavaScript setInterval 基本用法

這邊介紹 JavaScript setInterval 基本用法，setInterval 第一個參數為觸發時要呼叫的函式，下面範例是使用 arrow function，第二個參數為要延遲多少毫秒來觸發，下面範例中 1000 表示每隔 1 秒觸發一次。

setinterval.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Audio</title>
    <script type="text/javascript">
      setInterval(( () => console.log("Hello World") ), 1000);
    </script>
  </head>
  <body>
    <p>按下以下按鈕後會撥放音樂。</p>
    <button onclick="playAudio();">播放</button>
  </body>
</html>

使用 clearInterval 取消 setInterval

這邊介紹要如何取消 setInterval，使用 clearInterval 可以取消 setInterval 的設定，clearInterval 的參數需要傳入 setInterval 回傳的 id 值，如下範例，按下開始按鈕會 setInterval，之後每一秒都會更新秒數在按鈕上，如果按下取消按鈕的話會使用 clearInterval 取消 setInterval，

setinterval3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>setInterval</title>
    <script type="text/javascript">
      let intervalId = undefined;
      let counter = 0;

      function start() {
        console.log("start");
        intervalId = setInterval(() => {
          counter++;
          document.getElementById("btn1").innerText = counter + " second";
        }, 1000);
      }

      function cancel() {
        console.log("cancel");
        clearInterval(intervalId);
      }
    </script>
  </head>
  <body>
    <button id="btn1" onclick="start();">開始</button>
    <button id="btn2" onclick="cancel();">取消</button>
  </body>
</html>

以上就是 JavaScript setInterval 的用法與範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！