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

对于我们程序员来说每天最常用的就是浏览器。因为像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代码实现的是将idhours_spanminute_spansecond_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:

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=测试

访问结果:
在这里插入图片描述

3.4.1谷歌关键字检索示例:

https://www.google.com/search?q=测试&oq=测试&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或者记事本都可以的。工程目录如下:

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

  • page:存放页面的地方。
  • store: 存放资源,cssjsiconsimage...
    主要是上面两个文件夹,其余可以忽略,重点说一下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(表示提示信息显示实现),在定时器中每秒将其自增1timeOfNavigatorWords 大于 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"

这就好比如何阻止失恋后的低落情绪?最好的方式就是找个新的男(女)朋友!
那么阻止默认是的最好的方式就是给他找个一个新事件,但是需要注意的是找个事件必须定义在范围比较大的目标上,我在项目中定义到了 idindex 这个 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
    }
}

当搜索框中有值,那么我们执行开始动画,使用jskey_word_showanimation-name的值等于kws

document.getElementById("key_word_show").style.animationName = 'kws'

当搜索框中没值,那么我们执行结束动画,使用jskey_word_showanimation-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,框架是 springbootspringSecurity、持久层框架使用的是mybatis-plusmysql、中间件使用的是redis。我会带着大家一起来完成(一厢情愿QAQ)。

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

posted @ 2021-07-05 18:56  我玩亚索我会C  阅读(553)  评论(5编辑  收藏  举报