对于我们程序员来说每天最常用的就是浏览器。因为像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）。
我的努力创作只为博大家开心！如果能够您从中写学东西那更是我希望的。希望大家给个赞鼓励一下，谢谢大家！！！