練習1 ── alert 示警元件
https://jsfiddle.net/birdie2019/4ur1c7xf/34/

練習2 ── toast 吐司元件
https://jsfiddle.net/birdie2019/fmc6b8ht/49/
研究了一下setTimeout()用法,經過自己的消化吸收寫成筆記記錄下來
分享筆記:https://hackmd.io/@birdie/SJisAlTcs
另外發現display無法做transition的效果,改用opacity

練習3 ── modal 互動視窗元件
https://jsfiddle.net/birdie2019/9p3zsthL/17/

練習4 ── 表單驗證
https://jsfiddle.net/birdie2019/bdavsur4/91/

練習5 ── collapse 折疊效果
https://jsfiddle.net/birdie2019/dkncrv03/43/
認識了scrollHeight屬性,建議可以用圖去搜尋會比較好理解這個屬性
也順便學了clientHeight和offsetHeight

練習6 ── dropdown 下拉式選單
https://jsfiddle.net/birdie2019/xb0ka495/44/
研究window.onclick怎麼使用並認識了matches()

練習7 ── carousel 輪播元件
https://jsfiddle.net/birdie2019/t6uxb9df/30/


此次教材心得分享:
一開始在腦袋裡會想很複雜,憑空亂想亂打code發現不是再刪掉再亂打,但其實不可能一下就到位,後來拿筆和紙先把需要的功能和自己的邏輯想法簡單的寫和畫下來,釐清自己現在需要怎麼做,方法有幾種,若這個方法不行,還可以用什麼方法可以做,這個方法看似很沒有效率,但真的對我幫助很大且完成此次所有作業。

按讚的人:

共有 1 則留言