對於我們程序員來說每天最常用的就是瀏覽器。因為像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 百度關鍵字檢索示例：
（1）基礎url:
（2）重要的參數：
?: “?”后面拼接請求參數。多個參數使用“&”連接。
s: 表示搜索是search的縮寫。
ie: 表示關鍵字編碼格式 默認為 utf-8。
wd: 表示檢索的關鍵字 上述示例中 關鍵字是wd=%E6%B5%8B%E8%AF%95 這是編碼格式轉換為utf-8后的結果，轉成中文是 測試 。（重要）
bs: 搜索的歷史關鍵詞。
（3）實驗：
訪問結果：
3.4.1谷歌關鍵字檢索示例：
（1）基礎url
（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）。
我的努力創作只為博大家開心！如果能夠您從中寫學東西那更是我希望的。希望大家給個贊鼓勵一下，謝謝大家！！！