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

msup 发布于2019-08-22 16:35 / 2687人阅读

纯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的地方,只需要一层层的去找,无需看全部的代码

GPU云服务器云服务器实现二叉树 js中纯数字 java实现二次握手纯攻击js 初装

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94479.html

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

纯JS实现KeyboardNav(学习笔记)二这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码预览地址最终效果 showImg(https://sfault-image.b0.upaiyun.com/202/564/2025649432-5adb193d75ef2_articlex); ...

Muninn 2019-08-29 15:06 评论0 收藏0
纯JS实现KeyboardNav(学习笔记)一

摘要：取正值时，阴影扩大取负值时，阴影收缩。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。纯JS实现KeyboardNav(学习笔记)一这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码预览地址最终效果 showImg(https://sfault-image.b0.upaiyun.com/...

source 2019-08-22 16:27 评论0 收藏0
纯JS实现KeyboardNav(学习笔记)一

摘要：取正值时，阴影扩大取负值时，阴影收缩。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。纯JS实现KeyboardNav(学习笔记)一这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码预览地址最终效果 showImg(https://sfault-image.b0.upaiyun.com/...

lscho 2019-08-02 10:14 评论0 收藏0
SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

摘要：函数式编程，一看这个词，简直就是学院派的典范。所以这期周刊，我们就重点引入的函数式编程，浅入浅出，一窥函数式编程的思想，可能让你对编程语言的理解更加融会贯通一些。但从根本上来说，函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程（Functional Programming），一...

csRyan 2019-08-22 10:50 评论0 收藏0