iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

寫JS30天 系列

跟著JS30初步了解javascript

鐵人鍊成 | 共 30 篇文章 | 21 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室第二屆鐵人賽
DAY 21

JS30 - 21 - Native Speech Recognition

今天要學習的是語音轉成文字可以使用Web Speech APIWeb Speech API有兩個部分 speechSynthesis 語音合成(文字轉語音)...

2018-11-05 ‧ 由 JasonYang 分享
DAY 22

JS30 - 22 - Geolocation

今天這個geolocation API可以拿到使用者的位置但需要取得使用者的授權使用nevigator.geolocation這個物件,可以取得裝置的地理相關資...

2018-11-06 ‧ 由 JasonYang 分享
DAY 23

JS 30 - 23 - Follow Along Link Highlighter

今天要學習的是:取得元素在畫面位置的相關資訊 首先我們希望當滑鼠移動到連結上時,可以有highlight效果此highlight效果會從上一個位置移動到當前滑到...

2018-11-07 ‧ 由 JasonYang 分享
DAY 24

JS30 - 24 - Speech Synthesis

還記得幾天前我們有將語音專程文字今天我們要將文字轉成語音使用的是Web Speech API的SpeechSynthesisUtterance和speechSy...

2018-11-08 ‧ 由 JasonYang 分享
DAY 25

JS30 - 25 - Sticky Nav

今天我們要做的效果是讓nav bar隨著捲軸滾動黏在最上方並讓logo顯示出來 我們先來看看css吧! nav { background:black;...

2018-11-09 ‧ 由 JasonYang 分享
DAY 26

JS30 - 26 - Event Capture, Propagation, Bubbling and Once

我們常常使用.addEventListenr來監聽事件發生今天就要來好好研究一下他的機制 語法 EventTarget.addEventListener(typ...

2018-11-10 ‧ 由 JasonYang 分享
DAY 27

JS30 - 27 - Stripe Follow Along Nav

今天的目標和Day 23有點像不過,今天我們要在滑鼠滑入時製作類似下拉式選單的效果 目標當滑鼠滑入、滑出時其下方會出現對話框顯示資訊 首先先看一下html &l...

2018-11-11 ‧ 由 JasonYang 分享
DAY 28

JS30 - 28 - Click and Drag

目標 拖曳滑鼠,使items移動我們來看看html吧 <div class="items"> <div class...

2018-11-12 ‧ 由 JasonYang 分享
DAY 29

JS30 - 29 - Video Speed Controller

今天我們要來製作一個控制影片速度的進度條,還記得在Day11的時候做影片也有調整過速度吧!今天算是一個複習,那就來吧! 首先我們要拿到的東西有調整速度的 bar...

2018-11-13 ‧ 由 JasonYang 分享
DAY 30

JS30 - 30 - Countdown Timer

今天要來做一個倒數計時器,首先我們先將所有的 buttons都監聽起來,在點擊後,抓到設定的時間並當成參數傳入 timer() ,再抓到要顯示的區域。 cons...

2018-11-14 ‧ 由 JasonYang 分享