让我们来做一个属于自己的浏览器主页吧！
对于我们程序员来说每天最常用的就是浏览器。因为像google、百度、火狐、必应这些浏览器的主页不太美观壁纸也很少，所以我做了一个浏览器主页，目前做的功能比较少后续会慢慢完善，先给大家展示一下。废话少说我们看效果。
视频连接：
[video(video-uq5r8ops-1624885891569)(type-bilibili)(url-)(image-)(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后缀就是该网站的图标。例如：
知乎：
地址：
图标地址：
（4）常用网址就这些吗？好像没看到添加的功能！
当然不止这些，我对此目前没限制，因为后台还在开发中，因为这个功能是需要登陆才能进行展示的，目前展示的这些我打算把它们作为默认网址进行展示。后续我还要做个网址分类功能
4.4 设置页 - set
点击壁纸即可切换。
重点讲解
（1）就这些壁纸？太少了吧！
哦~ 当然不是，这些是我测试用的。这个功能也是需要登陆才能继续往下写的。我后面会提供大量好看的壁纸！而且可以自定义壁纸。后面必须还可以设置主页整体的量度，以及菜单背景色，让整个主页更加灵活更加个性化。
五、项目下载
gitee:
六、后续
我会持续更新此项目，在完善前端功能的同时，并为它做一个后台。目前后台使用的编程语言是java，框架是 springboot、springsecurity、持久层框架使用的是mybatis-plus、mysql、中间件使用的是redis。我会带着大家一起来完成（一厢情愿qaq）。
我的努力创作只为博大家开心！如果能够您从中写学东西那更是我希望的。希望大家给个赞鼓励一下，谢谢大家！！！
上一篇： css3动画实现帧动画