大佬教程收集整理的这篇文章主要介绍了让我们来做一个属于自己的浏览器主页吧!,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
对于我们程序员来说每天最常用的就是浏览器。因为像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。演示:
上面演示的是使用 百度 的搜索引擎,可以根据关键字进行匹配检索。在此项目中使用到了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动画的内容:点这里
因为我们没有存储图片的服务器,那些背景图,以及图标我都是上传到了图床上的,并没有存到项目的文件中。我使用的图床:图床
项目中的图标大部分来自:阿里矢量图
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)重要的参数:
(3)实验:
访问结果:
https://www.google.com/search?q=测试&oq=测试&aqs=chrome..69i57j69i60l2.2144j0j15&@R_618_9016@EID=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=测试=&@R_618_9016@EID=chrome&ie=UTF-8
我使用的编码工具是webstorm,当然也可以使用HBuilder或者记事本都可以的。工程目录如下:
这些文件夹都是自己随意创建的。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);
}
})
},
下面三行代码是关键!
-webkit-BACkground-size: cover;
-o-BACkground-size: cover;
BACkground-size: cover;
目的是为了让背景之上的字体更明显。如果背景图太亮,在切换壁纸一张高亮度的壁纸后,会导致主页上的字体看不清或看不见,影响体验!还有个重要原因是:分清主次,背景图是“次”,搜索框、时间等这些呈现在背景图之上的才是“主”,就像伴唱声音不能高于主唱一样,设置一个暗色遮罩层能够增强这种效果。
在这里我使用的是js的定时器,每秒都去获取当前时间的时、分、秒,并把实时的时间显示到页面上。
是的,如果每个需要计时器的地方都需要写一个定时器去执行的话,那样效率就太低了。我的做法是,只写一个定时器,将那些需要计时功能的地方挂载到计时器上即可(前提是这些计时功能都是相同的间隔,比如都是间隔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);
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;
}
},
网页右键默认事件:
阻止:@click.right ="showMenu"
这就好比如何阻止失恋后的低落情绪?最好的方式就是找个新的男(女)朋友!
那么阻止默认是的最好的方式就是给他找个一个新事件,但是需要注意的是找个事件必须定义在范围比较大的目标上,我在项目中定义到了 id
为 index
这个 div
上,这个div
是整个页面最外层的!
比如主页上的搜索框有值时展示关键字匹配结果动画,没有值时就执行收起动画呢?就像下面的:
这个地方是困扰我很久的一个问题——如何使用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'
菜单 是个div
它属于index
页面,里面的内容是在其他页面进行展示的,使用的是iframe
窗口嵌套。
通过Ajax请求json文件得来的,是假数据拟造的,模拟从服务器端获取来的数据。
部分是,部分不是。菜单 底部的导航图标是上传到图库的,常用网址的图标大部分是直接通过该网站地址加上后缀 /favicon.ico得来的。大部分网站的地址加上/favicon.ico后缀就是该网站的图标。例如: 知乎: 地址:https://www.zhihu.com 图标地址:https://www.zhihu.com/favicon.ico
当然不止这些,我对此目前没限制,因为后台还在开发中,因为这个功能是需要登陆才能进行展示的,目前展示的这些我打算把它们作为默认网址进行展示。后续我还要做个网址分类功能
哦~ 当然不是,这些是我测试用的。这个功能也是需要登陆才能继续往下写的。我后面会提供大量好看的壁纸!而且可以自定义壁纸。后面必须还可以设置主页整体的量度,以及菜单背景色,让整个主页更加灵活更加个性化。
gitee: 完整前端项目下载
我会持续更新此项目,在完善前端功能的同时,并为它做一个后台。目前后台使用的编程语言是Java
,框架是 springboot
、springSecurity
、持久层框架使用的是@H_393_108@mybatis-plus、@H_393_108@mysql、中间件使用的是redis
。我会带着大家一起来完成(一厢情愿QAQ)。
我的努力创作只为博大家开心!如果能够您从中写学东西那更是我希望的。希望大家给个赞鼓励一下,谢谢大家!!!
以上是大佬教程为你收集整理的让我们来做一个属于自己的浏览器主页吧!全部内容,希望文章能够帮你解决让我们来做一个属于自己的浏览器主页吧!所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。