利用工具
這次使用 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);
ㄏ ㄏ 一個很廢的小程式 . . .