纯JS实现KeyboardNav(学习笔记)二
最终效果 KeyboardNav使用指南:</>复制代码
这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写
这篇主要是添加css,优化js编写逻辑和代码排版
GitHub项目源码
预览地址
左下角为网站的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的地方,只需要一层层的去找,无需看全部的代码
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94479.html
纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 预览地址 最终效果 showImg(https://sfault-image.b0.upaiyun.com/202/564/2025649432-5adb193d75ef2_articlex); ...
摘要:取正值时,阴影扩大取负值时,阴影收缩。默认为,此时阴影与元素同样大。如果没有指定,则由浏览器决定通常是的值,不过目前取透明。 纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 showImg(https://sfault-image.b0.upaiyun.com/...
摘要:取正值时,阴影扩大取负值时,阴影收缩。默认为,此时阴影与元素同样大。如果没有指定,则由浏览器决定通常是的值,不过目前取透明。 纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 showImg(https://sfault-image.b0.upaiyun.com/...
摘要:函数式编程,一看这个词,简直就是学院派的典范。所以这期周刊,我们就重点引入的函数式编程,浅入浅出,一窥函数式编程的思想,可能让你对编程语言的理解更加融会贯通一些。但从根本上来说,函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程(Functional Programming),一...
阅读 1123·2021-09-22 15:37
阅读 1154·2021-09-13 10:27
阅读 2505·2021-08-25 09:38
阅读 2466·2019-08-26 11:42
阅读 1547·2019-08-26 11:39
阅读 1584·2019-08-26 10:58
阅读 2356·2019-08-26 10:56
阅读 2590·2019-08-23 18:08
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要