纯JS实现KeyboardNav(学习笔记)二

纯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

MDN

    background: red url("./wall.jpg") no-repeat center center scroll;

red是当图片还没有被加载出来的时候的背景颜色

缩放背景图像-拉伸与覆盖

CSS 的 background-size 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。

background-size:150px;

设置背景图片大小宽高都为150px,并平铺

特殊值: "contain" 和 "cover"
contain:锁定比例的平铺,高宽自适应浏览器大小
例如:

cover:完全覆盖,让背景自适应

使用谷歌开发者工具模拟慢网速的环境

这时候背景图片加载不出来,先会使用背景属性中的红色

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

效果:

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';
                    };

var声明一个变量

如果不加var,那么变量就是全局变量.

优化代码

给每一块代码添加函数,将代码由线性的变成树

优化代码结构,将代码由线性变为树形.这样在代码出错的时候便于修改,能很快找到BUG的地方,只需要一层层的去找,无需看全部的代码