<h3 class=draft-block draft--h3 name=header-9d9u3></h3> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*l376yir7cYnBNNLoOcYSBQ.png data-width=1200 data-height=891 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block></figcaption></div></div> 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼:</div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*ygoWh3P17orWnVa8IK4q6A.png data-width=1200 data-height=312 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>字首大寫</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*__C3qGk_y9Ie6bseyrH1KQ.png data-width=1200 data-height=312 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>縮減字數</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*dtOx926v8revz-wS9AM3EA.png data-width=1200 data-height=276 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>取得選取文字</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1180px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*-sgmJyxg1RbD7ZbNVnYUhg.png data-width=1180 data-height=598 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>純文字貼上</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*WV5hDQ-_-9Re2C8_1ozxCw.png data-width=1200 data-height=276 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>數字大小排列</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*NVZvBqZ1eWWWdHrkasKxtA.png data-width=1200 data-height=418 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>千分位</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*5rEZhMkLiBELjR7W6UPIfA.png data-width=1200 data-height=312 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>計算日期之間的天數</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*4ZjpTchBFRsQE6BXBpxqNA.png data-width=1200 data-height=312 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>檢查陣列是否為空</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*yqBLG58F3sDEDRnHsCwFHA.png data-width=1200 data-height=490 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>拷貝陣列/物件</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*ZvIxe7Z-djrqA4YZS4VoPw.png data-width=1200 data-height=526 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>陣列組合</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*rcgsMTMdgXSP2YBoNC7hHw.png data-width=1200 data-height=312 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>交換變數值</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*pckDxyNiXYhzQdscwJNVgw.png data-width=1200 data-height=312 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>產生隨機色</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*DmIRhABIGlZK4fwZ8fZWeA.png data-width=1200 data-height=276 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>偵測觸控設備</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*Z_P7Tuu5qqB5VPZBZuFDwA.png data-width=1200 data-height=312 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>取得 cookie 值</figcaption></div></div> <div class=draft--imgNormal draft-block><div><div style=height:1200px class=image-block-prerender data-src=https://cdn-images-1.medium.com/max/1200/1*tcVJiJRkRLCiNyca22FchA.png data-width=1200 data-height=276 data-isblurred=false data-position=center></div><figcaption class=imageCaption draft-block style=cursor:text;display:block>移除 DOM 元素</figcaption></div></div> <div class=hr__AtomHrContainer-sc-1afmttx-0 dsBIOm draft-block><pre class=hr__HrWrapper-sc-1afmttx-1 hUbgX draft--hr><hr class=hr__Hr-sc-1afmttx-2 iegMSY></pre></div> <div class=draft-block draft--p left>感謝您的閱讀,我試著將生活與自己所學到的知識,以平易近人的方式傳達給正在努力進步的同好,甚至是領域之外卻有興趣的人。如果喜歡我的文章,歡迎贊助我,你的鼓勵也是我進步的動力。</div>