Linda Liu

@LindaLiu

ENFP | (ノ◕ヮ◕)ノ*:・゚✧ Medium:https://medium.com/@LindaLiu0821

Joined on Dec 16, 2022

  • 歡迎參考我的筆記:Medium 1 官方下載網址:https://www.figma.com/ 收費標準與價格:https://www.figma.com/pricing/ 應用裝置、手機app下載連結:https://www.figma.com/downloads/ 常用快捷鍵 Ctrl + Shift + ? 顯示鍵盤快捷鍵 Ctrl + \ 隱藏 / 顯示側邊欄
     Like 6 Bookmark
  • 完成範例:CodePen、GitHub、Medium 螢幕擷取畫面 2024-06-11 092844 13F 貪食蛇 使用語法 HTML、CSS(SCSS)、原生JS 攻略要點
     Like  Bookmark
  • 1. history.go() 載入指定的頁面 // 重整頁面 window.history.go(0); // 前往下一頁 window.history.go(1); // 返回上一頁 window.history.go(-1); 2. history.back() 返回上一頁
     Like  Bookmark
  • 螢幕擷取畫面 2024-04-24 092021 範例:兩種JS圖片輪播 太太太太太常寫到關於輪播的功能了,雖然現在有些套件已經省了不少時間,欸但是當要客製化或是想要針對各種變化去做修改,當然是少不了必須了解它的原理,所以決定寫這篇文章順便記錄一下! (也方便我之後回來回顧XD) 第一種輪播功能之切換 c6d53fea-ea0f-4d3d-a1e8-621b38bb326a HTML & CSS 這裡快速說明一下需要注意的小地方
     Like  Bookmark
  • 建立時間戳 var timestamp = new Date().getTime(); 時間戳的轉換 time 時間戳 function changeDate(time) { let date = new Date(parseInt(time)); Y = date.getFullYear() + '-'; M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; // 判斷如果天數小於10,前面會加0
     Like  Bookmark
  • 撰寫程式:HTML | CSS | JS 相關連結:Codepen、Medium FotoJet HTML 擷取片段 第一種 - 主要是兩張圖片經過JS計算對比。 <div class="box"> <div class ="ImgBox"> <img src="https://cdn1.techbang.com/system/images/329622/original/db6f84129f8c8e06d93c0abb36c74247.png?1450808173" alt="">
     Like  Bookmark
  • 完成範例:CodePen、GitHub、Medium 屏幕截图 2023-12-15 165116 (小) 12F - 拼圖 使用語法 HTML、CSS(SCSS)、原生JS(雖然有導入jquery的框架,但是就只當作備案) 攻略要點
     Like  Bookmark
  • 相關連結: Codepen、 Medium 部分HTML <!-- IPAD造型 --> <div class="ipad"> <div class="powerBtn"></div> <div class="lens"></div> <div class="screen"> <input class="text" type="text" placeholder="請輸入"> </div>
     Like  Bookmark
  • 完成範例:CodePen、GitHub、Medium 屏幕截图 2023-11-28 173016 (小) 11F - 燈箱效果 使用語法 HTML、CSS(SCSS)、原生JS(規定) 攻略要點
     Like  Bookmark
  • 完成範例:CodePen、GitHub、Medium 屏幕截图 2023-11-24 112517 9F - 抽獎轉盤 使用語法 HTML、CSS(SCSS)、JS(原生) 補充一下這次有使用到的套件Sweetalert2是可美化且可客製化<font color=blue>alert</font>的一種JavaScript套件,而且它還支援現今主流的JavaScript框架,包含React、Vue、Angular等等。參考範例 如何導入專案?
     Like  Bookmark
  • 完成範例:CodePen、GitHub、Medium IMG_0776.jpeg 8F - 圈圈叉叉遊戲 使用語法 HTML、CSS(SCSS)、JS(原生) 攻略要點
     Like  Bookmark
  • 完成範例:CodePen、Medium 6F - 60秒算術遊戲 使用語法 HTML、CSS(SCSS)、JS(原生)( ͠° ͟ʖ ͡°)=ε/̵͇̿̿/‘̿̿ ̿ ̿ ̿ ̿ 攻略要點 【特定技術】遊戲規則 0 ~ 20秒是一位數計算(1+3),21 ~ 40秒為二位數計算(25+87),41 ~ 60秒為3位數計算(100+331)。
     Like  Bookmark
  • 完成範例:CodePen、Medium 7F - 畫板 使用語法 HTML、CSS(SCSS)、JS(原生) 雖然之前畫板就有做過了,但全部都用原生JS真的是第一次次̿̿ ̿̿ ̿̿ ̿'̿’\̵͇̿̿\з=( ͠° ͟ʖ ͡°)=ε/̵͇̿̿/‘̿̿ ̿ ̿ ̿ ̿ 攻略要點
     Like  Bookmark
  • 撰寫程式:HTML | CSS | JS codepen Medium HTML HTML中的標籤label中的for,對應input的Id屬性。 <div class = "main" id = "inBox"> <label for="addImage" class = "addImage" ></label> <input type="file" id="addImage" accept="image/*">
     Like  Bookmark
  • 完成範例:CodePen、Medium 4F - 各地時區 使用語法 HTML、CSS(SCSS)、JS(Vue) yo~ yo~ yo~這次換了新的語法來寫了嘿嘿( ~‧ ω ‧)~ 攻略要點
     Like  Bookmark
  • 完成範例:CodePen、Medium 3F - 計算機 使用語法 HTML、CSS(SASS)、JS(原生) 攻略要點 【特定技術】數字位數過多時,不能因此而破版,計算機功能皆須齊全。
     Like  Bookmark
  • 完成範例:CodePen、Medium 2F - 時鐘 使用語法 HTML、CSS(SASS)、JS(原生) 攻略要點 【特定技術】需使用 JS 原生語法的 getDate() 撈取時間,不可用套件。 【特定技術】需使用 JS 原生語法的 setTimeout() 或 setInterval(),持續讓秒針、分針、時針能夠以台北時區移動。
     Like  Bookmark
  • 完成範例:CodePen、Medium 1F - 9 x 9乘法表 使用語法 HTML、CSS(SASS)、JS(原生) 攻略要點 【特定技術】需使用 JS for 迴圈技巧,裡頭數字不能直接寫在 HTML 上,需使用 JS 印出。 需使用 HTML、CSS、JS 技術。
     Like  Bookmark
  • codepen:https://codepen.io/liu_0821/pen/NWePBZQ 主要說明 說明 touchmove 和 mousemove 的實際應用方式。 當 Html2Canvas 遇到不支援的 CSS3 的解決方法。 簡易的文字設定與套用方法。 部分HTML <div class="col-12 selectGroup"> <select class="form-select" id="fontStyle">
     Like  Bookmark
  • 如果想要製作將網頁其中一個區塊儲存成圖片之後下載到本地端的功能,那可以參考看看這個好用的套件~ 它的原理是將你指定的HTML區塊轉換為 canvas之後,再下載成png or jpg 檔案 首先先載入Html2Canvas所提供的套件 <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> HTML部分 <div class="box" id="Html2Canvas"> <h4 style="color: #000; ">Hello world!</h4> </div> JS部分 clientWidth & clientHeight是元素所包含的「子元素」的寬度及高度,其中包含了padding,但不包含邊界及捲軸。
     Like  Bookmark