Ellie's Blog
0%

發表於

CodePen成果

5/26 寫出一個番茄鐘(三)-偵測輸入內容/停止鍵/readonly

心得

改變工作方法

  • 列出想增加的功能
  • 將功能排列重要程度 先實現重要的
  • 寫程式之前 先將想法打出來
    • 列舉可行的方案
    • 防止實作時的混亂
  • 新學會的功能 在空白頁面做實驗 再整合到頁面
    • 用codePen紀錄學到的功能
  • 頁面做出一些改變之後就先來寫文章 先整理出心得
    • 寫文章之前 要先整理程式碼
    • 用以改善工作流程
    • 用寫下文字的方式 複習近期所學的知識

邏輯說明

  • 偵測輸入內容
    • 使用change 一旦改變input內容就會重新抓到值
    • 加入判斷 如果內容等於0 或是空白
      • 就alert提示
      • 並且讓開始計時按鈕不可點擊
  • 加入停止鍵 & 按鈕disabled的切換
    • 畫面載入時不可點擊 點擊’’開始計時’’之後才可以點擊
    • 開始計時之後 ‘’開始計時’’按鈕就不能點擊
      • 以防計時混亂
  • readonly
    • 開始計時之後就不可更改輸入內容
      • 以防混亂
    • 點擊’停止計時’就可以更改內容
    • ((未來加上’’暫停’’按鈕時 也不可更改內容

使用程式(本次新學會的)

readonly

在HTML標籤使用readonly 讓內容變成唯讀模式

1
2
3
$("input").attr("readonly", "readonly");
 $("input").removeAttr("readonly"); //移除設定

disabled

在HTML標籤使用disabled 讓按鈕不可使用

1
$(this).attr("disabled", "disabled");

發表於

CodePen成果

5/26 寫出一個番茄鐘(二)-改變背景顏色 /自動進入下個鬧鐘 /語音設定

邏輯說明

  • 改變背景顏色
    • 抓取輸入的時間 形成陣列
    • 判斷陣列的序列
      • 基數==工作時間 ==背景紅色
      • 偶數==休息時間==背景綠色
      • 最後一個==結束計時 ==背景白色
      • 之後想改成可以讓使用者自己選擇顏色
  • 自動進入下個鬧鐘
    • 抓取所有輸入的時間
    • 加總所有時間
    • 設定setInterval
  • 語音設定
    • 抓取輸入的文字
    • 使用new SpeechSynthesisUtterance()
    • 在特定時間撥放

使用程式(本次新學會的)

new SpeechSynthesisUtterance()

JS30-Day23-Speech Synthesis

SpeechSynthesisUtterance Property

SpeechSynthesisUtterance.lang：設定或取得發音的語言。

SpeechSynthesisUtterance.pitch：設定或取得發音的音調。

SpeechSynthesisUtterance.rate：設定或取得發音的速度。

SpeechSynthesisUtterance.text：設定或取得發音的文字內容。

SpeechSynthesisUtterance.voice：設定或取得發音的聲音。

SpeechSynthesisUtterance.volume：設定或取得發音的音量。

1
2
3
4
5
6
7
8
9
10
function finishedAlarm(text) {
    var msg = new SpeechSynthesisUtterance();
    msg.text = text;
    msg.lang = ["zh-TW"];
    msg.volume = 100; // 聲音的音量
    msg.rate = 0.7; //語速，數值，預設值是1，範圍是0.1到10
    msg.pitch = 1.5; // 表示說話的音高，數值，範圍從0（最小）到2（最大）。預設值為1
    speechSynthesis.speak(msg);
  }
});

發表於 更新於

成果

心得

  • 寫完發現不難，在for迴圈那邊搞很久，中間還有重複做一些功能的情況發生
  • 基礎的東西可能不是很熟 所以會卡住 要回去上課來補
  • 要多寫幾個作品 熟悉工作流程
  • 寫的過程盡量做小範圍的測試 才不會一直找不到bug
    • 所以拆分功能一一去做非常重要

未來改善之處

  • 時間改成分鐘
  • 可以設定自動循環
  • 開始時間 音效
  • 可以靜音

邏輯說明

  • 抓取輸入時間
    • 計算總時常
    • 形成一個陣列
      • 陣列內容用於設定鬧鐘鈴響時間
  • 設定計時功能
    • 使用 setInterval
    • 使用for 迴圈 + if
      • 判斷響鈴時間
      • 以及觸發鈴聲
  • 設定響鈴功能
    • 新增一個 Audio
    • 設定播放音效
    • 設定播放音量
    • audio.play(); 執行

使用程式

setInterval

Window setInterval()
WindowOrWorkerGlobalScope.setInterval()((裡面有新寫法想要嘗試))

setInterval(function () { }, 1000);
* (執行程式 , 間隔時間)

1
2
3
4
5
6
7
8
9
function count(time) {
    let timer = setInterval(function () {
        if (time >= 0) {
           
        } else {
            clearInterval(timer);
        }
    }, 1000);
}

new Audio

JavaScript audio play 播放音效

function playAudio() {
    const audio = new Audio("coin01.mp3");
    audio.play();
  }

如何只播放 1 秒

如何只播放 1 秒

1
2
3
audio.play();
setTimeout(() => { audio.pause(); audio.currentTime = 0; }, 1000);

發表於 更新於

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

.gitignore-有些檔案我不想放在 Git 裡面…

【狀況題】有些檔案我不想放在 Git 裡面…

.gitignore 是在專案裡面需要忽略的檔案

建立一個.gitignore檔案

專案目錄裡放一個 .gitignore 檔案，

$ touch .gitignore

怎樣編寫.gitignore

git设置忽略文件和目录

打開.gitignore 文件

含意 編寫方式
# 忽略*.o和*.a文件 *.[oa]
# 忽略*.b和*.B文件，my.b除外 *.[bB]
!my.b
# 忽略dbg文件和dbg目录 dbg
# 只忽略dbg目录，不忽略dbg文件 dbg/
# 只忽略dbg文件，不忽略dbg目录 dbg
!dbg/

[狀況]有的時候推不上去怎麼辦?

【狀況題】怎麼有時候推不上去…

Push 指令的時候會出現這個錯誤訊息：failed to push some refs to 'https://github.com/eddiekao/dummy-git.git'

第一招：先拉再推

git pull –rebase

第二招：無視 總之就是聽我的！

git push -f

發表於 更新於

總體的步驟

  • 先寫出想做什麼
    • 想有什麼功能
      • 最好詳細形容一下 比較好做
    • 畫面大概長怎樣
      • 可以找出頁面的範本
      • 或是畫示意圖
  • HTML CSS 先做出畫面
  • JS 寫功能
    • 可以將功能 分成1.0 以及 2.0版本
    • 先做出1.0 最簡單的頁面
    • 再慢慢進階到2.0
  • JS 遇到不會寫的功能 先記下來
    • 查不會的部分
      1. 將查到資料的寫在筆記
      2. 寫一個簡單的頁面作為實驗
      3. 將成果記錄到notion
      4. 整合到項目裡面
  • 其他Tips
    • 想到新的點子就先寫下來 之後再安排時間實踐
    • 每天反思今天的工作流程
    • 每天總結今天自己做出的事情
    • 每天將作品push 到Git hub上面 當作紀錄
    • 注意休息 一定要有時間放空 可以讓腦袋自己去整理思緒

想寫出的功能

  • 計時功能

    • 點擊開始計時 就要開始這個鬧鐘
    • 鬧鐘結束之後要自動進入下一個鬧鐘
    • 結束工作鬧鐘之後 要累計時間
      • 設定local storage存到裡面
    • 暫停的按鈕 跟功能
    • 可設定循環次數 自動撥放循環幾次

  • 輸入

    • 抓到輸入的數字 變成計時時間
      • 設定的數字不能小於0
    • 設定結束提醒 將文字轉成語音 播放出來

  • 版面

    • 顯示倒數計時
    • 設定默認工作時間
    • 可以設定靜音模式
    • 設定開始聲音
    • 設定計時聲音
    • 工作時間紅色 / 休息時間綠色

  • 累積工作時間

發表於 更新於

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

前言

這是一個學習紀錄，記下我學到的新的功能，所以只會引用文章中程式碼的部分，詳情請看參考文章原文。

參考文章

十分鐘快速掌握 Markdown

Markdown文件

標題

十分鐘快速掌握 Markdown 

1
2
3
4
# 標題 1
## 標題 2
...
###### 標題 6

引用

十分鐘快速掌握 Markdown 

1
> 使用引用

使用引用

清單 bullet / number l

十分鐘快速掌握 Markdown 

1
2
3
4
- 這是清單
+ 這也是清單
* 這同樣是清單
        - 清單子項目(一個縮排或是兩個空白 )
1
2
3
4
1. 數字型清單
2. 第二個數字清單
2. 數字清單不需要連續數字
  3. 數字清單子項目(一個縮排或是兩個空白 )

分隔線

Markdown文件

1
2
3
4
5
6
7
8
9
* * *

***

*****

- - -

---

斜體

十分鐘快速掌握 Markdown 

1
2
*使用斜體*。
_使用斜體_

使用斜體 *之外非斜體

使用斜體 _之外非斜體

強調

十分鐘快速掌握 Markdown 

1
2
**使用強調**
__使用強調__

使用強調

使用強調

行內程式碼

十分鐘快速掌握 Markdown

將Html的標籤顯示在面上

1
`<em>123</em>` (前後加上反引號

<em>123</em>

連結

十分鐘快速掌握 Markdown 

1
[Google](https://www.google.com.tw/)

Google

圖片

十分鐘快速掌握 Markdown 

1
2
3
4

![unsplash 圖片](https://images.unsplash.com/photo-1573900941478-7cc800f708f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80)

![ }內容為SEO增強 非必填

(題外話 怎樣取得圖片連結

在網站上的圖片

  1. 右鍵
  2. 複製圖片網址

電腦上的圖片

  1. 上傳到會生成url的網站
  2. 複製網址 貼在專案當中

程式碼

十分鐘快速掌握 Markdown

區塊程式碼
三個連續的反引號（`）用在開頭結尾

(let i 
1
2
3
4
  setTimeout(function () {
    console.log('這執行第' + i + '次');
  }, 0);
}

表格

十分鐘快速掌握 Markdown 

1
2
3
| thead 1 | thrad 2 | thread 3 |
|---------|---------|----------|
| td      | td      | td       |

縮排

markdown段落中如何產生縮排

指令 含意
&nbsp; 半形的不斷行的空白格（推薦使用）
&ensp; 半形的空格
&emsp; 全形的空格

發表於 更新於

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

前言

這是一個學習紀錄，記下我學到的新的功能，所以只會引用文章中程式碼的部分，詳情請看參考文章原文。

參考文章

Hexo Blog 輕鬆架

【學習筆記】如何使用 Hexo + GitHub Pages 架設個人網誌

下載 hexo

詳細請看
【學習筆記】如何使用 Hexo + GitHub Pages 架設個人網誌

  • 安裝 Node.js

  • 安裝 Hexo-cli

指令 用途
npm install hexo-cli -g 安裝 Hexo
hexo init <資料夾名稱> 在特定資料夾開始使用 Hexo
$ npm install 開始使用 npm

Hexo 的資料夾結構解釋

詳細請看學習筆記】如何使用 Hexo + GitHub Pages 架設個人網誌
.
├── _config.yml 設定檔

├── package.json記錄載入模組

├── scaffolds模板檔案

├── source資源 存放原始檔案

|&emsp;├──drafts草稿

|&emsp;└── posts發布的文章

└── themes主題

進行 Hexo 設定

建立自己 Blog 系列(三) Hexo next theme 介紹-解說 config.yml 設定檔

  • 找到資料夾中 config.yml
  • 修改 config.yml 的設定 (按照文章中的去改就好)

建立第一篇文章

Hexo Blog 輕鬆架

新增一篇文章

>$ hexo new [layout] `<`title`>`

編輯文章內容 

注意撰寫格式不對的話就無法正常顯示


    ---
    title: "[Leetcode] #206_Reverse Linked List"
    date: 2021-08-06 15:21:16
    updated: 2021-11-30 15:21:16
    tags: [Leetcode, easy]
    categories:
        - leetcode
        - data structure
    ---

啟動伺服器 開啟 blog 頁面

 $ hexo server
指令 用途
hexo new [layout] <title> 新增文章
$ hexo clean 清除靜態檔案與快取
$ hexo generate 產生靜態檔案
$ hexo server 啟動伺服器 開啟 blog 頁面
$ hexo new post 產生新貼文模板

部署到 GitHub

【學習筆記】如何使用 Hexo + GitHub Pages 架設個人網誌

以下圖片均來自原文 此處只作為步驟紀錄

設定 GitHub 的部分

  • Step1. 註冊 GitHub 帳號並登入
  • Step2. 點選 New 新增一個 Repository（專案）
  • Step3. 將專案名稱命名為 username.github.io，username 記得改成自己的帳號名稱

設定本機的部分

  • Step1. 安裝 Git 相關套件

    $ npm install hexo-deployer-git –save

  • Step2. 修改 _config.yml 檔案的 Deployment 設定

    這裡指的_config.yml 檔案是根目錄的

第一次部屬到 GitHub

  1. 輸入部署指令

    $ hexo deploy

  2. 依序輸入 clean -> generate -> deploy 三行指令，避免更新不完全：

    1
    2
    3
    4
    5
    hexo cl    // 清除之前建立的靜態檔案
    hexo g     // 建立靜態頁面
    hexo d     // 部署至 GitHub

    hexo g -d  //合併第二、三行指令