系列文章
JS30 - 21 - Native Speech Recognition
今天要學習的是語音轉成文字可以使用Web Speech APIWeb Speech API有兩個部分 speechSynthesis 語音合成(文字轉語音)...
JS30 - 22 - Geolocation
今天這個geolocation API可以拿到使用者的位置但需要取得使用者的授權使用nevigator.geolocation這個物件，可以取得裝置的地理相關資...
JS 30 - 23 - Follow Along Link Highlighter
今天要學習的是：取得元素在畫面位置的相關資訊 首先我們希望當滑鼠移動到連結上時，可以有highlight效果此highlight效果會從上一個位置移動到當前滑到...
JS30 - 24 - Speech Synthesis
還記得幾天前我們有將語音專程文字今天我們要將文字轉成語音使用的是Web Speech API的SpeechSynthesisUtterance和speechSy...
JS30 - 25 - Sticky Nav
今天我們要做的效果是讓nav bar隨著捲軸滾動黏在最上方並讓logo顯示出來 我們先來看看css吧！ nav { background:black;...
JS30 - 26 - Event Capture, Propagation, Bubbling and Once
我們常常使用.addEventListenr來監聽事件發生今天就要來好好研究一下他的機制 語法 EventTarget.addEventListener(typ...
JS30 - 27 - Stripe Follow Along Nav
今天的目標和Day 23有點像不過，今天我們要在滑鼠滑入時製作類似下拉式選單的效果 目標當滑鼠滑入、滑出時其下方會出現對話框顯示資訊 首先先看一下html &l...
JS30 - 28 - Click and Drag
目標 拖曳滑鼠，使items移動我們來看看html吧 <div class="items"> <div class...
JS30 - 29 - Video Speed Controller
今天我們要來製作一個控制影片速度的進度條，還記得在Day11的時候做影片也有調整過速度吧！今天算是一個複習，那就來吧！ 首先我們要拿到的東西有調整速度的 bar...
JS30 - 30 - Countdown Timer
今天要來做一個倒數計時器，首先我們先將所有的 buttons都監聽起來，在點擊後，抓到設定的時間並當成參數傳入 timer() ，再抓到要顯示的區域。 cons...