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

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

• 這篇博客只是本身的學習筆記,供往後複習所用,沒有通過精心排版,也沒有按邏輯編寫
• GitHub項目源碼
• 預覽地址

最終效果

KeyboardNav使用指南:

• 左下角爲網站的icon,'.'表明網站無icon或未設置網站
• 按鍵盤上相應的按鍵進入對應網站
• 鼠標放上去可編輯並保存網站,除了初始網站,用戶編輯的網站存在本地cookies
• 清空cookies後保存在本地的網站將被清除,還原會初始狀態

數據結構的使用

哈希,數組
作出來導航頁面

實際上數組就是hash
數組帶方括號實際上是hash的一種簡寫.
且數組是對象.

報錯學習

JS錯誤:沒有被處理的 語法錯誤 :不期待的字符串]
意思就是這裏不該該有字符串]
語法錯誤

css重要代碼

text-transform: uppercase;
        /*文本小寫變大寫*/

#mainxxxx{
    display: inline-block;
}
main{
    text-align: center;
}
/*mainxxx這個div居中*/

#mainxxxx>div:nth-child(2){
    margin-left: 1em;
}

#mainxxxx>div:nth-child(2)表明mainxxxx的名爲div的第二個子元素.

定位kbd裏面的button,並添加hover

kbd>button{
    position: absolute;
    right: 0;
    bottom: 0;
    display: none;
    /*絕對定位到右下角*/
}
kbd:hover>button{
    display: inline-block;
    /*鼠標浮到kbd上纔出現*/
}

box-shadow使用指南

• inset

  默認陰影在邊框外。
  使用inset後，陰影在邊框內（即便是透明邊框），背景之上內容之下。

• <offset-x> <offset-y>
  這是頭兩個 <length> 值，用來設置陰影偏移量。<offset-x> 設置水平偏移量，若是是負值則陰影位於元素左邊。 <offset-y> 設置垂直偏移量，若是是負值則陰影位於元素上面。可用單位請查看 <length> 。
  若是二者都是0，那麼陰影位於元素後面。這時若是設置了<blur-radius> 或<spread-radius> 則有模糊效果。
• <blur-radius>
  這是第三個 <length> 值。值越大，模糊面積越大，陰影就越大越淡。 不能爲負值。默認爲0，此時陰影邊緣銳利。
• <spread-radius>
  這是第四個 <length> 值。取正值時，陰影擴大；取負值時，陰影收縮。默認爲0，此時陰影與元素一樣大。
• <color>
  相關事項查看 <color> 。若是沒有指定，則由瀏覽器決定——一般是color的值，不過目前Safari取透明。

最經常使用的是後五個值,例子:

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

循環遍歷二元數組

//遍歷keys,生成kbd標籤
        var index = 0;
        while (index< keys['length']){
            var divxxxx = document.createElement('div');
            mainxxxx.appendChild(divxxxx);

            row = keys[index];
            index2 = 0;

            while (index2<row.length){
                kbdxxxx = document.createElement("kbd");
                kbdxxxx.textContent = row[index2];
                divxxxx.appendChild(kbdxxxx);
                index2++;
            }
            index++;
        }

鍵盤監聽事件

這個hash容納你所須要的全部細節:
例如altkey能夠看出你再按m的時候是否同時按了alt

//監聽鍵盤被按事件
        document.onkeypress = function (sjdhfakdhjlsdka) {

            //sjdhfakdhjlsdka這個參數  包含你想要知道的全部信息,是一個hash
            key = sjdhfakdhjlsdka['key'];//獲得用戶的鍵
            website = hash[key];//獲取網站地址

            // location.href = 'http://'+website;//將鍵變成新的網站的地址
            //location.href當前地址欄.地址
            //

            window.open('http://'+website,"_blank");
            //window.open  窗口.打開  "_blank"新窗口打開.

        }

button編輯hash(event的target)

//每個kbd裏面加入button
                buttonxx = document.createElement("button");
                buttonxx.textContent = "編輯";
                // 每個button的id都是row[index2],即kbd裏面的內容,以便區分
                buttonxx.id = row[index2];
                //添加button點擊事件
                buttonxx.onclick = function (jfglkhj) {
                    //☆☆☆☆這裏不能用this,也不能用buttonxx,由於buttonxx只是一個容器,每一次循環,裏面放的東西都不同
                    // 最後他裏面放的東西是最後那個createElement("button").因此不行
                    //例如
                    // console.log(buttonxx);
                    // 無論按那個鍵,全部的打印出來的都是最後一個button
                    //解決方法:使用 jfglkhj.target ,指的就是當前完整元素.
                    // 例如:
                    // console.log(jfglkhj);
                    //console.log(jfglkhj.target);
                    // console.log(jfglkhj.target.id);

                    key = jfglkhj.target.id;//好比說v
                    //或者jfglkhj['target']['id'];
                    x = prompt('給我一個網址');//好比說mtt.com
                    hash[key] = x;//賦值
                    
                };
                kbdxxxx.appendChild(buttonxx);

若是使用buttonxx

使用console.log(jfglkhj.target);

console.log(jfglkhj.target.id);

localStorage初步理解

沒有辦法讓js變量在下一個頁面出現,沒法改變js源代碼.只能把hash這個變量存到js以外的地方.

問題解決思路:

每次變動hash就找一個地方備份,下次刷新,就覆蓋原來的hash

一變就存,一刷新就覆蓋.
查看localStorage

localStorage,只要編輯了,我就存

x = prompt('給我一個網址');//好比說mtt.com

                    hash[key] = x;//賦值

                    // 問題:刷新以後編輯的網址沒有了
                    // 解決方法:使用localStorage,只要變就備份,只要刷新就覆蓋
                    //若是hash變動,只要編輯了,我就存
                    localStorage.setItem("zzz",JSON.stringify(hash));//JSON.stringify(hash)把hash變成字符串,存到zzz變量裏備份

                    //上面這句代碼的做用:localStorage裏有不少桶,吧hash存到zzz這個桶裏
                    //每一次編輯,就把新的hash存到  瀏覽器裏
                    //而後把這個瀏覽器裏的hash覆蓋原來的就能夠了
                    //熟悉原理:一變動就存檔

上面是備份hash代碼

//把localStorage裏hash,zzz拿出來
        var hashINLocalStorage = JSON.parse(localStorage.getItem('zzz')|| 'null');
        if(hashINLocalStorage){ //若是hashINLocalStorage不爲空,第二次刷新就不爲空了.
            hash = hashINLocalStorage;//覆蓋hash
        }

上面是覆蓋代碼

位置:

經測試,緩存清空localStorage就沒有了

其餘

程序員評分與努力程度的關係