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

灰太狼 2023-10-08 12:56 31阅读 0赞

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

**视频连接：**  
[演示视频][Link 1]

Rec 0001

#### 文章目录 ####

*  一、使用到的技术
 *  二、功能介绍
 *   *  2.1 根据关键字进行检索
     *  2.2 搜索引擎切换
     *  2.3 常用网址导航
     *  2.4 壁纸切换
 *  三、前提
 *   *  3.1 css动画
     *  3.2 图床
     *  3.3 阿里矢量图标库
     *  3.4 百度、谷歌 url参数介绍
     *   *  3.4.1 百度关键字检索示例：
         *  3.4.1谷歌关键字检索示例：
 *  四、代码实现
 *   *  4.1 创建工程
     *  4.2 主页 - index.html
     *   *  重点讲解：
         *  （1）如何让背景图平铺并且自适应浏览器窗口大小？
         *  （2）为什么要给背景图设置一个颜色较暗的遮罩层？
         *  （3）时间是如何实时展示的？
         *  （4）在这个项目中有很多地方都是需要计时功能，总不能每个需要计时的地方都写一个定时器去执行吧？
         *  （5）星期几是如何展示的？
         *  （6）如何阻止网页右键默认事件，以及Ctrl\+s保存网页呢？
         *  （7）如何控制css动画的执行呢？
     *  4.3 常用网址导航 - commonUse
     *   *  重点讲解：
         *  （1）菜单是如何实现的？
         *  （2）常用网址里面的数据从哪来？是写死的吗？
         *  （3）图标从哪来的，是上传到图库上的吗？
         *  （4）常用网址就这些吗？好像没看到添加的功能！
     *  4.4 设置页 - set
     *   *  重点讲解
         *  （1）就这些壁纸？太少了吧！
 *  五、项目下载
 *  六、后续

## 一、使用到的技术 ##

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

*  `html` **：** *html不用赘述了，主要的页面就是用它写的；*
 *  `JS` **：** *JS主要用来获取一些使用vue不方便的document对象；*
 *  `JQuery` **：** *使用JQuery提供AJAX请求；*
 *  `CSS` **：** *CSS这边除了一般的样式外，用的做多的是CSS的动画；*
 *  `vue` **：** *原本打算是使用原生的“三板斧”，但是后来发现对dom的操作比较多，然后就加了Vue。*

## 二、功能介绍 ##

### 2.1 根据关键字进行检索 ###

**演示：**  
![在这里插入图片描述][20210628201703226.gif_pic_center]  
上面演示的是使用 百度 的搜索引擎，可以根据关键字进行匹配检索。

### 2.2 搜索引擎切换 ###

![在这里插入图片描述][2021062820202386.gif_pic_center]  
当鼠标悬浮在**搜索框**左侧的图片上时，会显示当前搜索引擎，点击鼠标左键 可以切换搜索引擎。

### 2.3 常用网址导航 ###

![在这里插入图片描述][20210628202403900.gif_pic_center]  
点击鼠标左键 唤出菜单，里面有\*\*【常用网址】\*\*，在这里我们可以收藏一些我们经常访问的网址。

### 2.4 壁纸切换 ###

![在这里插入图片描述][20210628203633907.gif_pic_center]  
最后一个\*\*【设置】\*\*菜单页可以进行更换壁纸。

## 三、前提 ##

### 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动画的内容：[点这里][Link 2]

### 3.2 图床 ###

因为我们没有存储图片的服务器，那些背景图，以及图标我都是上传到了图床上的，并没有存到项目的文件中。我使用的图床：[图床][Link 3]

### 3.3 阿里矢量图标库 ###

项目中的图标大部分来自：[阿里矢量图][Link 4]

### 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=%E6%B5%8B%E8%AF%95&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=测试

访问结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70]

#### 3.4.1谷歌关键字检索示例： ####

> https://www.google.com/search?q=%E6%B5%8B%E8%AF%95&oq=%E6%B5%8B%E8%AF%95&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**或者**记事本**都可以的。工程目录如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 1]  
这些文件夹都是自己随意创建的。

*  **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 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 2]

#### 重点讲解： ####

#### （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保存网页呢？ ####

**网页右键默认事件：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 3]  
**阻止：**

@click.right ="showMenu"

这就好比如何阻止失恋后的低落情绪？最好的方式就是找个新的男（女）朋友！  
那么阻止默认是的最好的方式就是给他找个一个**新事件**，但是需要注意的是找个事件必须定义在范围比较大的目标上，我在项目中定义到了 `id` 为 `index`这个 `div` 上，这个`div` 是整个页面最外层的！

#### （7）如何控制css动画的执行呢？ ####

比如主页上的搜索框有值时展示关键字匹配结果动画，没有值时就执行收起动画呢?就像下面的：  
![在这里插入图片描述][20210630224455451.gif_pic_center]  
这个地方是困扰我很久的一个问题——如何使用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 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 4]  
点击鼠标右键唤出菜单。

#### 重点讲解： ####

#### （1）菜单是如何实现的？ ####

菜单 是个`div` 它属于`index`页面，里面的内容是在其他页面进行展示的，使用的是`iframe`窗口嵌套。

#### （2）常用网址里面的数据从哪来？是写死的吗？ ####

通过**Ajax**请求**json**文件得来的，是假数据拟造的，模拟从服务器端获取来的数据。

#### （3）图标从哪来的，是上传到图库上的吗？ ####

部分是，部分不是。菜单 底部的导航图标是上传到图库的，常用网址的图标大部分是直接通过该网站地址加上后缀 **/favicon.ico**得来的。大部分网站的地址加上\*\*/favicon.ico\*\*后缀就是该网站的图标。例如：  
**知乎：**  
地址：https://www.zhihu.com  
图标地址：https://www.zhihu.com/favicon.ico  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center]

#### （4）常用网址就这些吗？好像没看到添加的功能！ ####

当然不止这些，我对此目前没限制，因为**后台**还在开发中，因为这个功能是需要登陆才能进行展示的，目前展示的这些我打算把它们作为默认网址进行展示。后续我还要做个**网址分类功能**

### 4.4 设置页 - set ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 5]  
点击壁纸即可**切换**。

#### 重点讲解 ####

#### （1）就这些壁纸？太少了吧！ ####

哦~  当然不是，这些是我测试用的。这个功能也是需要登陆才能继续往下写的。我后面会提供大量好看的壁纸！而且可以自定义壁纸。后面必须还可以设置主页整体的量度，以及菜单背景色，让整个主页更加灵活更加个性化。

## 五、项目下载 ##

**gitee:**  
[完整前端项目下载][Link 5]

## 六、后续 ##

我会持续更新此项目，在完善前端功能的同时，并为它做一个后台。目前**后台**使用的编程语言是`Java`，框架是 `springboot`、`springSecurity`、持久层框架使用的是`mybatis-plus`、`mysql`、中间件使用的是`redis`。我会带着大家一起来完成（一厢情愿QAQ）。

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

[Link 1]: https://player.bilibili.com/player.html?aid=461310695
[20210628201703226.gif_pic_center]: https://img-blog.csdnimg.cn/20210628201703226.gif#pic_center
[2021062820202386.gif_pic_center]: https://img-blog.csdnimg.cn/2021062820202386.gif#pic_center
[20210628202403900.gif_pic_center]: https://img-blog.csdnimg.cn/20210628202403900.gif#pic_center
[20210628203633907.gif_pic_center]: https://img-blog.csdnimg.cn/20210628203633907.gif#pic_center
[Link 2]: https://www.w3school.com.cn/css/css3_animations.asp
[Link 3]: https://imgtu.com/
[Link 4]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210630212421983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210628204824513.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210630221747346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210630222522173.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70
[20210630224455451.gif_pic_center]: https://img-blog.csdnimg.cn/20210630224455451.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210630225556162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210630231731344.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210630231947542.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70
[Link 5]: https://gitee.com/hu_jiangdi/easy-web