純JS實現KeyboardNav(學習筆記)二

Muninn 發布于2019-08-29 15:06 / 1038人閱讀

純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 初裝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113103.html

純JS實現KeyboardNav(學習筆記)二

純JS實現KeyboardNav(學習筆記)二這篇博客只是自己的學習筆記,供日后復習所用,沒有經過精心排版,也沒有按邏輯編寫這篇主要是添加css,優化js編寫邏輯和代碼排版 GitHub項目源碼預覽地址最終效果 showImg(https://sfault-image.b0.upaiyun.com/202/564/2025649432-5adb193d75ef2_articlex); ...

msup 2019-08-22 16:35 評論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