HTML 5 學習心得

#第三週

完善上周的程式

上週寫的程式，從效率上來看，其實效果不是很好，因為可以用更簡單的方法來概述整段程式，那就是用“餘數”的概念。一個數被4除，餘數的種類只有4種（0, 1, 2, 3）、一個數被5除，餘數的種類只有5種（0, 1, 2, 3, 4）以此類推。這剛剛好符合了當初設計計數器的概念，且能同時兼具迴圈的功能。簡單的數學邏輯，無需使用 If 功能。

c = (c+x+a.length)% (a.length)

這是上次的版本

這是改動後的版本

改動後的版本更加精簡，且易改性很高（以後想改變什麼，僅需改動這一行即可），錯誤率也會大大降低

新功能--自動切換

設計相片自動切換及停止切換功課

這一期會用到新的指令

setInterval 和 clearInterval

#如果我解釋的不清楚，可以點擊欄目的標題～～

與上次的版本相似，只是多了些新程式（用黃色熒光筆標記的）

這次我們要多設置兩個按鈕，一個是開始播放鍵（一個是播放停止鍵，如圖第34及35排）。創建按鍵的方法在上週已經介紹過了，可以返回去上週去查看～～

setinterval

setinterval 這個指令被設計，目的是讓程式能在指定的週期內（按毫秒計算）來調用函數或計算表達式

如圖所示，使用setinterval 調用function f1的功能，回傳給f1數值1，並設定每1500毫秒（1.5秒）完成一次動作

clearinterval

clearinterval 就好比一個清除功能，他會把setinterval裡的值給清除掉

自動播放功能概念其實很簡單：

  • 當瀏覽網頁者按下播放鍵後，系統通過setinterval 按時向function f1 回傳1 ，執行切換照片的程式
  • 當遊覽網頁者按下停止鍵了以後，系統通過clearinterval 把 my var裡的interval的值清除掉，這樣setinterval的程式就會停止了
  • 且這時候如果點擊上一張或下一張，結果也不會出錯，因為系統裡的計數器"C"是正確的

當當～～這就是個完成品了

不過以上版本並不是我最初的版本，下面的這個版本才是～～

  • 我一開始做的版本並不怎麼好，仍然有很多的缺陷，當中有包括重複或者多餘的指令，程式跑起來還是正常的，但前提是要把紅框中的var刪去。
  • 在debug過程中發現，如果今天var宣告兩次的話（第一次在第6排，第二次在第18排），程式第26排就會出錯，他會找不到myVar 這個東西，因此我就想把我之前做錯的版本發出來給大家看下，告知有這一種語法錯誤。

總結：

程式的易用性及高效性；程式不一定要寫得很長，而是要寫得簡短、精明，也盡量不要牽扯到太多的變數，因為變數越多，出錯的可能性就越大，要多想，要常換位思考。