讓我們來做一個屬於自己的瀏覽器主頁吧！

我玩亞索我會C發表於2021-07-05
瀏覽器

對於我們程式設計師來說每天最常用的就是瀏覽器。因為像google、百度、火狐、必應這些瀏覽器的主頁不太美觀桌布也很少，所以我做了一個瀏覽器主頁，目前做的功能比較少後續會慢慢完善，先給大家展示一下。廢話少說我們看效果。

視訊連線：
演示視訊
[video(video-UQ5R8OPS-1624885891569)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=461310695)(image-https://ss.csdn.net/p?http://i2.hdslb.com/bfs/archive/a948567c7b51d4694c1e508b756f8c7717341cc6.jpg)(title-Rec 0001)]

@

目錄

一、使用到的技術

使用到的技術都是很簡單的。主要是下面五個：

  • html ： html不用贅述了，主要的頁面就是用它寫的；
  • JS ： JS主要用來獲取一些使用vue不方便的document物件；
  • JQuery ： 使用JQuery提供AJAX請求；
  • CSS ： CSS這邊除了一般的樣式外，用的做多的是CSS的動畫；
  • vue ： 原本打算是使用原生的“三板斧”，但是後來發現對dom的操作比較多，然後就加了Vue。

二、功能介紹

2.1 根據關鍵字進行檢索

演示：
在這裡插入圖片描述
上面演示的是使用 百度 的搜尋引擎，可以根據關鍵字進行匹配檢索。

2.2 搜尋引擎切換

在這裡插入圖片描述
當滑鼠懸浮在搜尋框左側的圖片上時，會顯示當前搜尋引擎，點選滑鼠左鍵 可以切換搜尋引擎。

2.3 常用網址導航

在這裡插入圖片描述
點選滑鼠左鍵 喚出選單，裡面有【常用網址】，在這裡我們可以收藏一些我們經常訪問的網址。

2.4 桌布切換

在這裡插入圖片描述
最後一個【設定】選單頁可以進行更換桌布。

三、前提

3.1 css動畫

在此專案中使用到了css動畫，能夠讓頁面看著流暢舒服。我們只需要記住css動畫的三個屬性即可：
（1）animation-delay： 動畫延遲，就是動畫延遲多少秒播放。
（2）animation-name： 動畫名稱，表示該動畫的唯一標識。
（3）animation-duration： 動畫播放多少秒
例項：

#hours_span, #minute_span, #second_span {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 40px;
    color: rgba(245, 245, 245, 0);
    animation-delay: 0.5s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    cursor: pointer;
}

@keyframes hms {
    from {
        color: rgba(255, 255, 255, 0);
    }
    to {
        color: rgba(255, 255, 255, 1);
    }
}

上面的css程式碼實現的是將id為hours_span、minute_span、second_span的標籤的字型顏色從全透明變為不透明，在頁面載入0.5s後執行，執行時間為0.5s。
如果你想了解更多關於css動畫的內容：點這裡

3.2 圖床

因為我們沒有儲存圖片的伺服器，那些背景圖，以及圖示我都是上傳到了圖床上的，並沒有存到專案的檔案中。我使用的圖床：圖床

3.3 阿里向量圖示庫

專案中的圖示大部分來自：阿里向量圖

3.4 百度、谷歌 url引數介紹

3.4.1 百度關鍵字檢索示例：

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=測試&fenlei=256&rsv_pq=95f456900001c037&rsv_t=b612aTU10cMh7uf54aJUvGJ0daBdkqFniQa2vCOlJ3I%2FjqjGEs7eGV57w48&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=6&rsv_sug1=5&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=1180&rsv_sug4=1180&rsv_sug=2

（1）基礎url:

http://www.baidu.com/

（2）重要的引數：

  • ?: “?”後面拼接請求引數。多個引數使用“&”連線。

  • s: 表示搜尋是search的縮寫。

  • ie: 表示關鍵字編碼格式 預設為 utf-8。

  • wd: 表示檢索的關鍵字 上述示例中 關鍵字是wd=%E6%B5%8B%E8%AF%95 這是編碼格式轉換為utf-8後的結果，轉成中文是 測試 。（重要）

  • bs: 搜尋的歷史關鍵詞。

（3）實驗：

https://www.baidu.com/s?ie=utf-8&wd=測試

訪問結果：
在這裡插入圖片描述

3.4.1谷歌關鍵字檢索示例：

https://www.google.com/search?q=測試&oq=測試&aqs=chrome..69i57j69i60l2.2144j0j15&sourceid=chrome&ie=UTF-8

（1）基礎url

https://www.google.com/

（2）重要引數

  • search: 表示搜尋。
  • q: 表示關鍵字。
  • ie: 表示關鍵字編碼方式 預設 urf-8。
  • oq: 相關搜尋的主詞,也就是核心搜尋詞的意思。

（3）實驗：

https://www.google.com/search?q=測試95&oq=測試=&sourceid=chrome&ie=UTF-8

四、程式碼實現

4.1 建立工程

我使用的編碼工具是webstorm，當然也可以使用HBuilder或者記事本都可以的。工程目錄如下：

在這裡插入圖片描述
這些資料夾都是自己隨意建立的。

  • page：存放頁面的地方。
  • store： 存放資源，css、js、icons、image...
    主要是上面兩個資料夾，其餘可以忽略，重點說一下store下的data資料夾，這裡面放的是json檔案就是一些假資料，比如常用網址資訊就是從這個資料夾中讀取的，後面都會一一介紹。

重點說一下store 資料夾下的 data 資料夾，這裡面存放的是一些json資料，用於擬造從伺服器端返回過來的資料，如果想使用擬造資料，只需要將請求的url執行該檔案所在的資料夾即可。如常用網址的json資料:**

{
  "result": [
    {
      "netName": "知乎",
      "url": "https://www.zhihu.com/",
      "icon": "https://www.zhihu.com/favicon.ico"
    },
    {
      "netName": "B站",
      "url": "https://www.bilibili.com/",
      "icon": "https://www.bilibili.com/favicon.ico"
    },
    {
      "netName": "今日頭條",
      "url": "https://www.toutiao.com/",
      "icon": "https://www.toutiao.com/favicon.ico"
    },
    {
      "netName": "LeetCode",
      "url": "https://leetcode-cn.com/",
      "icon": " https://z3.ax1x.com/2021/06/24/RKJB5R.png"
    },
    {
      "netName": "GitHub",
      "url": "https://github.com/",
      "icon": "https://z3.ax1x.com/2021/06/23/RuN6pt.png"
    },
    {
      "netName": "碼雲",
      "url": "https://gitee.com/",
      "icon": "https://gitee.com/favicon.ico"
    },
    {
      "netName": "QQ郵箱",
      "url": "https://mail.qq.com/",
      "icon": "https://mail.qq.com/favicon.ico"
    },
    {
      "netName": "路過圖床",
      "url": "https://imgtu.com/",
      "icon": "https://imgtu.com/content/images/system/favicon_1587118523486_91617a.png"
    },
    {
      "netName": "阿里向量圖",
      "url": "https://www.iconfont.cn/",
      "icon": "https://img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"
    }

  ]
}

請求資料：

		//獲取選單導航列表
        searchNavigationMenus(){
            $.ajax({
                type: 'get',
                url:'../store/data/menus.json',
                dataType: 'json',
                success:function (result){
                    v.$data.menus = result.result;
                },
                error:function (result){
                    console.log(result.result);
                }
            })
        },

4.2 主頁 - index.html

在這裡插入圖片描述

重點講解：

（1）如何讓背景圖平鋪並且自適應瀏覽器視窗大小？

下面三行程式碼是關鍵！

	-webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

（2）為什麼要給背景圖設定一個顏色較暗的遮罩層？

目的是為了讓背景之上的字型更明顯。如果背景圖太亮，在切換桌布一張高亮度的桌布後，會導致主頁上的字型看不清或看不見，影響體驗！還有個重要原因是：分清主次，背景圖是“次”，搜尋框、時間等這些呈現在背景圖之上的才是“主”，就像伴唱聲音不能高於主唱一樣，設定一個暗色遮罩層能夠增強這種效果。

（3）時間是如何實時展示的？

在這裡我使用的是js的定時器，每秒都去獲取當前時間的時、分、秒，並把實時的時間顯示到頁面上。

（4）在這個專案中有很多地方都是需要計時功能，總不能每個需要計時的地方都寫一個定時器去執行吧？

是的，如果每個需要計時器的地方都需要寫一個定時器去執行的話，那樣效率就太低了。我的做法是，只寫一個定時器，將那些需要計時功能的地方掛載到計時器上即可（前提是這些計時功能都是相同的間隔，比如都是間隔1s）。比如來說，當前搜尋引擎提示資訊我只想要他顯示3s然後消失，我們可以這樣做，定義一個變數 timeOfNavigatorWords= 0（表示提示資訊顯示實現），在定時器中每秒將其自增1 當 timeOfNavigatorWords 大於 3 時 執行隱藏 提示資訊程式碼，然後再將此變數的值歸0。程式碼如下：

  ...
  var timeOfNavigatorWords = 0;
  ...
  window.setInterval(function () {
            ...
            //掛載 導航顯示欄位顯示
            if(v.timeOfNavigatorWords >= 3){
                v.navigatorHidden();
                v.timeOfNavigatorWords = 0;
            }
            v.timeOfNavigatorWords++;
            ...
        }, 1000);

（5）星期幾是如何展示的？

 getWeek() {
            var weekIndex = new Date().getDay();
            switch (weekIndex) {
                case 0:
                    this.week = '周 日';
                    break;
                case 1:
                    this.week = '周 一';
                    break;
                case 2:
                    this.week = '周 二';
                    break;
                case 3:
                    this.week = '周 三';
                    break;
                case 4:
                    this.week = '周 四';
                    break;
                case 5:
                    this.week = '周 五';
                    break;
                case 6:
                    this.week = '周 六';
                    break;
            }
        },

（6）如何阻止網頁右鍵預設事件，以及Ctrl+s儲存網頁呢？

網頁右鍵預設事件：
在這裡插入圖片描述
阻止：

@click.right ="showMenu"

這就好比如何阻止失戀後的低落情緒？最好的方式就是找個新的男（女）朋友！
那麼阻止預設是的最好的方式就是給他找個一個新事件，但是需要注意的是找個事件必須定義在範圍比較大的目標上，我在專案中定義到了 id 為 index 這個 div 上，這個div 是整個頁面最外層的！

（7）如何控制css動畫的執行呢？

比如主頁上的搜尋框有值時展示關鍵字匹配結果動畫，沒有值時就執行收起動畫呢?就像下面的：
在這裡插入圖片描述
這個地方是困擾我很久的一個問題——如何使用js控制css動畫的執行？
首先我們需要搞清楚的是css動畫執行的關鍵是什麼，答案是：animation-name 。css動畫是通過animation-name 來得知是誰要執行這個動畫，那麼我就就可以使用js通過設定目標的animation-name值的方式動態控制 是誰、什麼時候執行這個動畫。例如：

#key_word_show {
    margin: 20px auto;
    width: 500px;
    background-color: rgba(50, 50, 50, 0.7);
    border-radius: 30px;
    z-index: 4;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
/**
 * 關鍵字檢索列表展開開始動畫
 */
@keyframes kws {
    from {
        height: 0px
    }
    to {
        height: 365px
    }
}
/**
 * 關鍵字檢索列表展開結束動畫
 */
@keyframes kws2 {
    from {
        height: 365px
    }
    to {
        height: 0px
    }
}

當搜尋框中有值，那麼我們執行開始動畫，使用js讓key_word_show 的 animation-name的值等於kws

document.getElementById("key_word_show").style.animationName = 'kws'

當搜尋框中沒值，那麼我們執行結束動畫，使用js讓key_word_show 的 animation-name的值等於kws2

document.getElementById("key_word_show").style.animationName = 'kws2'

4.3 常用網址導航 - commonUse

在這裡插入圖片描述
點選滑鼠右鍵喚出選單。

重點講解：

（1）選單是如何實現的？

選單 是個div 它屬於index頁面，裡面的內容是在其他頁面進行展示的，使用的是iframe視窗巢狀。

（2）常用網址裡面的資料從哪來？是寫死的嗎？

通過Ajax請求json檔案得來的，是假資料擬造的，模擬從伺服器端獲取來的資料。

（3）圖示從哪來的，是上傳到相簿上的嗎？

部分是，部分不是。選單 底部的導航圖示是上傳到相簿的，常用網址的圖示大部分是直接通過該網站地址加上字尾 /favicon.ico得來的。大部分網站的地址加上/favicon.ico字尾就是該網站的圖示。例如：
知乎：
地址：https://www.zhihu.com
圖示地址：https://www.zhihu.com/favicon.ico
在這裡插入圖片描述

（4）常用網址就這些嗎？好像沒看到新增的功能！

當然不止這些，我對此目前沒限制，因為後臺還在開發中，因為這個功能是需要登陸才能進行展示的，目前展示的這些我打算把它們作為預設網址進行展示。後續我還要做個網址分類功能

4.4 設定頁 - set

在這裡插入圖片描述
點選桌布即可切換。

重點講解

（1）就這些桌布？太少了吧！

哦~ 當然不是，這些是我測試用的。這個功能也是需要登陸才能繼續往下寫的。我後面會提供大量好看的桌布！而且可以自定義桌布。後面必須還可以設定主頁整體的量度，以及選單背景色，讓整個主頁更加靈活更加個性化。

五、專案下載

gitee:
完整前端專案下載

六、後續

我會持續更新此專案，在完善前端功能的同時，併為它做一個後臺。目前後臺使用的程式語言是Java，框架是 springboot、springSecurity、持久層框架使用的是mybatis-plus、mysql、中介軟體使用的是redis。我會帶著大家一起來完成（一廂情願QAQ）。

我的努力創作只為博大家開心！如果能夠您從中寫學東西那更是我希望的。希望大家給個贊鼓勵一下，謝謝大家！！！

相關文章