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

视频连接：
演示视频

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 根据关键字进行检索

演示：

上面演示的是使用百度的搜索引擎，可以根据关键字进行匹配检索。

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

访问结果：

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或者记事本都可以的。工程目录如下：

这些文件夹都是自己随意创建的。

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

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

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

用python做一个简单的图片浏览器竟如此简单
用了106行代码就做了一个图片浏览器,python真的太强大了.废话少说,看看效果先! 106行代码中还有不少代码是美化用的,真正功能的代码就没几句了.还是说说功能吧: 1. 打开文件夹,并只打开特定 ...
【Android】Android studio做一个简单的图片浏览器
我们现在布局文件中定义一个简单的线性布局容器,代码如下 activity_main.xml <?xml version="1.0" encoding="utf-8& ...
空间电子书架用flashi还是html,做个PDF格式电子图书浏览器——浅谈一类控件的使用...
下载本文示例代码下载源代码摘要通过PDF控件做一个PDF格式电子图书浏览器,学习一类控件的使用方法. 关键词 PDF控件电子图书浏览器控件使用首先声明,做这个PDF格式电子图书浏览器,其目 ...
怎样用cocos2d-x做一个基于地图块的游戏（Part One）
怎样用cocos2d-X做一个基于地图块的游戏 (Part One) 在这个分为上下两部分的教程中,我们将介绍如何使用Cocos2D-X和地图编辑器做一款基于地图块的游戏.在这个简单的地图块游戏里,一 ...
开关面板如何自己印字_如何自己动手做一个智能开关
现在的智能家居这么火,对于想自己动手的小伙伴们来说,都想自己去做一些家里使用的智设备.现在的中国不缺卖唱卖惨的,缺的是能动手创造一些能实际使用的而不是哗众取宠的人,天天喊着要反击外国技术封锁.那么我 ...
微信怎么at所有人_任正非被遗漏的讲话：怎么做一个谦虚的领导者？
任正非曾在市场大会做过一个叫<做谦虚的领导者>的讲话,少有媒体和社会层面的关注,甚至内部也未有什么波澜.但细看起来,这个讲话基本上是华为的管理纲要,如:以利润为中心:建立大区协调机制:坚持 ...
java字符存储_用java的类集框架做一个字符存储器(15)
11.这是java的关于java的类集框架做一个字符存储器的源代码可以直接进行编译运行,希望大家能够从中获益良多. package niming; //导入ArrayList这个类 import ja ...
VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
【跟我一起学Unity3D】做一个2D的90坦克大战之AI系统
对于AI,我的初始想法非常easy,首先他要能动,而且是在地图里面动. 懂得撞墙后转弯,然后懂得射击,其它的没有了,基于这个想法,我首先创建了一个MyTank类,用于管理玩家的坦克的活动,然后创建AI ...

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

文章目录

一、使用到的技术

二、功能介绍

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）就这些壁纸？太少了吧！

五、项目下载

六、后续

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

最新文章

热门文章

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

文章目录

一、使用到的技术

二、功能介绍

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）就这些壁纸？太少了吧！

五、项目下载

六、后续

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

最新文章

热门文章

（6）如何阻止网页右键默认事件，以及`Ctrl`+`s`保存网页呢？