第十屆

web
寫JS30天
JasonYang

系列文章

DAY 1

JS 30 - 01 - drum kit

JS30的第一天要將鍵盤變成一個爵士鼓,首先看一下所拿到的.html檔 <div class="keys"> &lt...

DAY 2

JS 30 - 02 - JS and CSS Clock

今天我們要來做個時鐘,首先我們使用new Date()「在開啟網頁時」拿到當下時間 首先看到時鐘會發現秒針、分針、時針都是在9點鐘方向所以要先記得一件事「之後要...

DAY 3

JS 30 - 03 - CSS Variables

首先先來看看 html <h2>Update CSS Variables with <span class='hl'>JS</sp...

DAY 4

JS 30 - 04 - Array Cardio Part I

今天要介紹 Array 常用的 methed,廢話不多說,先來介紹今天學到的一些技巧 .filter() .filter() 會回傳一個陣列,其條件是 retu...

DAY 5

JS 30 - 05 -Flex Panels Image Gallery

今天要製作一個點擊某區塊,該區塊的 大小會放大 隱藏內容顯示出來 首先先看看 css ,這裡的 css 很容易解析,就是一個 flex 容器包著另外一個 f...

DAY 6

JS 30 - 06 - Ajax Type Ahead

Demo 首先到公眾運輸平台找 api let flights = []; fetch(flightApi) .then(blob => {...

DAY 7

JS 30 - 07 - Array Cardio Part II

今天有幾題要來解決,首先我們拿到了一個裝滿許多個人資料的 array ,資料如下 const people = [{ name: 'Wes',...

DAY 8

JS 30 - 08 - Fun with HTML5 Canvas

今天要用 canvas 來畫圖,canvas可以用來即時畫圖、畫動畫,還可以用來處理影片,為影片增加特效。今天要來做一個會隨著點擊時間「移動」、「變色」、「縮放...

DAY 9

JS30 - 09 - Dev Tools Domination

想要了解 js 如何操作 css我們可以鎖定目標 element看他變化時, js 在背後做了什麼事 首先開啟開發者工具的 element 找到要觀察的 el...

DAY 10

JS 30 - 10 - Hold Shift and Check Checkboxes

按著shift,一次選取上一次選到的chekbox至這次選取的checkbox const checkboxs = document.querySelector...