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

CodePen成果

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

心得

改變工作方法

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

邏輯說明

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

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

readonly

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

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

disabled

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

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