让我们来做一个属于自己的浏览器主页吧！

对于我们程序员来说每天最常用的就是浏览器。因为像google、百度、火狐、必应这些浏览器的主页不太美观壁纸也很少，所以我做了一个浏览器主页，目前做的功能比较少后续会慢慢完善，先给大家展示一下。废话少说我们看效果。

视频连接：

[video(video-uq5r8ops-1624885891569)(type-bilibili)(url-)(image-)(title-rec 0001)]

@

目录

• • • （6）如何阻止网页右键默认事件，以及ctrl+s保存网页呢？
  • 4.3 常用网址导航 - commonuse

一、使用到的技术

使用到的技术都是很简单的。主要是下面五个：

• 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:

（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

（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）。

我的努力创作只为博大家开心！如果能够您从中写学东西那更是我希望的。希望大家给个赞鼓励一下，谢谢大家！！！