纯JS实现KeyboardNav(学习笔记)二
- 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写
- 这篇主要是添加css,优化js编写逻辑和代码排版
- GitHub项目源码
- 预览地址
最终效果
最终效果
KeyboardNav使用指南:
- 左下角为网站的icon,'.'代表网站无icon或未设置网站
- 按键盘上相应的按键进入对应网站
- 鼠标放上去可编辑并保存网站,除了初始网站,用户编辑的网站存在本地cookies
- 清空cookies后保存在本地的网站将被清除,还原会初始状态
CSS样式
美化按键
美化按键
/*美化按键*/
/**/
/*}*/
.kbd{
margin: 0;
padding: 0;
border:0;
width: 65px;
height: 50px;
/*线性渐变:0-70白色,70-100,fff-f3f3f3渐变*/
background: linear-gradient(to bottom, #fff 0%,#fff 70%,#f3f3f3 100%);
border-radius: 7px;
/*下方阴影,box-shadow5个最常用属性,分别是左偏移,右偏移,模糊,扩张,颜色*/
box-shadow: 0 5px 0 0 #D8DCDE;
color: #767D81;
font-family: Helvetical;
vertical-align: top;
/*用flex布局居中*/
display: inline-flex;
align-items: center;
justify-content: center;
}
.kbd_wrapper{
display: inline-block;
vertical-align: top;
/*这两句一定要搭配使用!!!!*/
width: 65px;
height: 55px;
/*border:1px solid #3C3C3D;*/
border-radius: 7px;
margin: 0 5px;
/**/
box-shadow: 0 4px 3px 0 #3C3C3D,0 0 1px 0 #3C3C3D;
/*下,一圈*/
}
一定要记住写vertical-align: top;;避免inlineblock的bug
display: inline-block;
vertical-align: top;
/*这两句一定要搭配使用!!!!*/
CSS3中vh vw 单位的使用
参考:
张鑫旭时许相关单位vw vh
css3参考手册-vh
vh:viewport height
vw:viewport width
“视区”所指为浏览器内部的可视区域大小，即
window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
相对于视口的高度。视口被均分为100单位的vh
用flex布局绝对居中的三句话套路
在父元素上写
/*绝对居中父元素上的三行代码*/
display: flex;
justify-content: center;
align-items: center;
100%浏览器高度+绝对居中方法
- 100%浏览器高度方法:
html,body{
height: 100%;
}
- 100%浏览器高度+绝对居中方法
main{
/*绝对居中父元素上的三行代码*/
display: flex;
justify-content: center;
align-items: center;
/*高度为浏览器高度*/
height: 100vh;
}
background
background: red url("./wall.jpg") no-repeat center center scroll;
red是当图片还没有被加载出来的时候的背景颜色
缩放背景图像-拉伸与覆盖
CSS 的 background-size 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。
background-size:150px;
设置背景图片大小宽高都为150px,并平铺
clipboard.png
特殊值: "contain" 和 "cover"
contain:锁定比例的平铺,高宽自适应浏览器大小
例如:
clipboard.png
clipboard.png
cover:完全覆盖,让背景自适应
clipboard.png
使用谷歌开发者工具模拟慢网速的环境
这时候背景图片加载不出来,先会使用背景属性中的红色
clipboard.png
favicon.ico
如果想访问icon就去网站根目录下的favicon.ico,大部分网站适合.
imgxxxx = document.createElement("img");
if(hash[row[index2]]){//判断这个是否存在
imgxxxx.src = 'http://'+hash[row[index2]]+'/favicon.ico';
//加http协议,不然会认为是路径
} else{//undefined
//如果src为空,就会进入当前的网址,导致图片显现不出来,所以给他一个存在的图片
imgxxxx.src = './point.png';
}
插入icon
效果:clipboard.png
onerror事件
监听请求失败事件
添加img get请求的onerror方法,当出现个天使白,就将图片变成.
imgxxxx.onerror = function (ev) {
//onerror事件,监听img的get请求错误事件
ev.target.src = './point.png';
//把没有请求到的错误事件的src定为那个点
};
编辑网址时,可以改变键盘里的图标
button2 = jfglkhj.target;
img2 = button2.previousSibling;
img2.src = 'http://'+x+'/favicon.ico';
img2.onerror = function (ev) {
ev.target.src = './point.png';
};
clipboard.png
var声明一个变量
如果不加var,那么变量就是全局变量.
优化代码
给每一块代码添加函数,将代码由线性的变成树
clipboard.png
优化代码结构,将代码由线性变为树形.这样在代码出错的时候便于修改,能很快找到BUG的地方,只需要一层层的去找,无需看全部的代码
