[Source] 資源分享
好用資源
好用資源
利用工具 這次使用 HTML + CSS + JavaScript 的組合。 HTML : 網頁所看到的所有元件 CSS : 負責美編 JS : 呈現打字動畫及跳轉搜尋畫面 程式發想 打完字按下 送出,鎖定 按鈕不讓使用者再次送出, 顯示打字 動畫 ,最後 跳轉 到搜尋結果 程式實作 利用 setIntervel 來製作間隔動畫 var interval = setInterval(async function() { ... },intervalTime); 逐一增加文字到原文字長度 if (index == questionText.length) { clearInterval(interval); } 使用 setTimeout 來製作 delay 效果 var delay = setTimeout(function() { ... },forwardTime); 最後用 get 參數跳轉到 Google 網頁 window.location.assign("https://www.google.com/search?q=" + questionText); ㄏ ㄏ 一個很廢的小程式 ....
為了應景一下,自己扣出新年倒數的網頁啦! 利用工具 這次使用 HTML + CSS + JavaScript 的組合。 HTML : 控制字及煙火的表現 CSS : 負責美編(字的效果、煙火的顏色) JS : 主要是倒數及內嵌 HTML 程式發想 倒數計時:到了 2021 01/01 00:00:00 就顯示 新年快樂 ,並且 放出煙火 程式實作 設定倒數終止時間 var countDownDate = new Date("Jan 1, 2021 00:00:00").getTime(); 每一秒重新取得新內容 (單位:毫秒) var x = setInterval(function() { // 函式內容 }, 1000); 取得現在的時間 (使用者系統時間) var now = new Date().getTime(); 更新並顯示倒數時間 使用 innerHTML 屬性,將文字內嵌到指定 id 的容器 document.getElementById("time").innerHTML = "倒數 " + hours + " 小時 " + minutes + " 分鐘 " + seconds + " 秒 "; 時間到了,就停止計時 clearInterval(x); document....