純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 單元的運用
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,並平鋪
特別值: “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的處所,只需要一層層的去找,無需看悉數的代碼
