純JS實(shí)現(xiàn)KeyboardNav(學(xué)習(xí)筆記)一

lscho 發(fā)布于2019-08-02 10:14 / 2133人閱讀

摘要：取正值時(shí)，陰影擴(kuò)大取負(fù)值時(shí)，陰影收縮。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。

純JS實(shí)現(xiàn)KeyboardNav(學(xué)習(xí)筆記)一

這篇博客只是自己的學(xué)習(xí)筆記,供日后復(fù)習(xí)所用,沒有經(jīng)過精心排版,也沒有按邏輯編寫
GitHub項(xiàng)目源碼
預(yù)覽地址

最終效果

KeyboardNav使用指南:

左下角為網(wǎng)站的icon,"."代表網(wǎng)站無icon或未設(shè)置網(wǎng)站

按鍵盤上相應(yīng)的按鍵進(jìn)入對(duì)應(yīng)網(wǎng)站

鼠標(biāo)放上去可編輯并保存網(wǎng)站,除了初始網(wǎng)站,用戶編輯的網(wǎng)站存在本地cookies

清空cookies后保存在本地的網(wǎng)站將被清除,還原會(huì)初始狀態(tài)

數(shù)據(jù)結(jié)構(gòu)的使用

哈希,數(shù)組
做出來導(dǎo)航頁面

實(shí)際上數(shù)組就是hash
數(shù)組帶方括號(hào)其實(shí)是hash的一種簡寫.
且數(shù)組是對(duì)象.

報(bào)錯(cuò)學(xué)習(xí)

JS錯(cuò)誤:沒有被處理的語法錯(cuò)誤 :不期待的字符串]
意思就是這里不應(yīng)該有字符串]
語法錯(cuò)誤

css重要代碼

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

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

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

#mainxxxx>div:nth-child(2)代表mainxxxx的名為div的第二個(gè)子元素.

定位kbd里面的button,并添加hover

kbd>button{
    position: absolute;
    right: 0;
    bottom: 0;
    display: none;
    /*絕對(duì)定位到右下角*/
}
kbd:hover>button{
    display: inline-block;
    /*鼠標(biāo)浮到kbd上才出現(xiàn)*/
}

box-shadow使用指南

inset

默認(rèn)陰影在邊框外。
使用inset后，陰影在邊框內(nèi)（即使是透明邊框），背景之上內(nèi)容之下。

這是頭兩個(gè) 值，用來設(shè)置陰影偏移量。設(shè)置水平偏移量，如果是負(fù)值則陰影位于元素左邊。設(shè)置垂直偏移量，如果是負(fù)值則陰影位于元素上面。可用單位請(qǐng)查看。
如果兩者都是0，那么陰影位于元素后面。這時(shí)如果設(shè)置了或則有模糊效果。

這是第三個(gè) 值。值越大，模糊面積越大，陰影就越大越淡。不能為負(fù)值。默認(rèn)為0，此時(shí)陰影邊緣銳利。

這是第四個(gè) 值。取正值時(shí)，陰影擴(kuò)大；取負(fù)值時(shí)，陰影收縮。默認(rèn)為0，此時(shí)陰影與元素同樣大。

相關(guān)事項(xiàng)查看。如果沒有指定，則由瀏覽器決定——通常是color的值，不過目前Safari取透明。

最常用的是后五個(gè)值,例子:

/* 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;

循環(huán)遍歷二元數(shù)組

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

            row = keys[index];
            index2 = 0;

            while (index2
鍵盤監(jiān)聽事件

這個(gè)hash容納你所需要的所有細(xì)節(jié):
例如altkey可以看出你再按m的時(shí)候是否同時(shí)按了alt
 //監(jiān)聽鍵盤被按事件
        document.onkeypress = function (sjdhfakdhjlsdka) {

            //sjdhfakdhjlsdka這個(gè)參數(shù)  包含你想要知道的所有信息,是一個(gè)hash
            key = sjdhfakdhjlsdka["key"];//得到用戶的鍵
            website = hash[key];//獲取網(wǎng)站地址

            // location.href = "http://"+website;//將鍵變成新的網(wǎng)站的地址
            //location.href當(dāng)前地址欄.地址
            //

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

        }
button編輯hash(event的target)
//每一個(gè)kbd里面加入button
                buttonxx = document.createElement("button");
                buttonxx.textContent = "編輯";
                // 每一個(gè)button的id都是row[index2],即kbd里面的內(nèi)容,以便區(qū)分
                buttonxx.id = row[index2];
                //添加button點(diǎn)擊事件
                buttonxx.onclick = function (jfglkhj) {
                    //☆☆☆☆這里不能用this,也不能用buttonxx,因?yàn)閎uttonxx只是一個(gè)容器,每一次循環(huán),里面放的東西都不一樣
                    // 最后他里面放的東西是最后那個(gè)createElement("button").所以不行
                    //例如
                    // console.log(buttonxx);
                    // 不管按那個(gè)鍵,所有的打印出來的都是最后一個(gè)button
                    //解決方法:使用 jfglkhj.target ,指的就是當(dāng)前完整元素.
                    // 例如:
                    // console.log(jfglkhj);
                    //console.log(jfglkhj.target);
                    // console.log(jfglkhj.target.id);

                    key = jfglkhj.target.id;//比如說v
                    //或者jfglkhj["target"]["id"];
                    x = prompt("給我一個(gè)網(wǎng)址");//比如說mtt.com
                    hash[key] = x;//賦值
                    
                };
                kbdxxxx.appendChild(buttonxx);
如果使用buttonxx

使用console.log(jfglkhj.target);

console.log(jfglkhj.target.id);

localStorage初步理解
沒有辦法讓js變量在下一個(gè)頁面出現(xiàn),無法改變js源代碼.只能把hash這個(gè)變量存到j(luò)s之外的地方.
問題解決思路:

每次變更hash就找一個(gè)地方備份,下次刷新,就覆蓋原來的hash
一變就存,一刷新就覆蓋.
查看localStorage

localStorage,只要編輯了,我就存
                    x = prompt("給我一個(gè)網(wǎng)址");//比如說mtt.com

                    hash[key] = x;//賦值

                    // 問題:刷新之后編輯的網(wǎng)址沒有了
                    // 解決方法:使用localStorage,只要變就備份,只要刷新就覆蓋
                    //如果hash變更,只要編輯了,我就存
                    localStorage.setItem("zzz",JSON.stringify(hash));//JSON.stringify(hash)把hash變成字符串,存到zzz變量里備份

                    //上面這句代碼的作用:localStorage里有很多桶,吧hash存到zzz這個(gè)桶里
                    //每一次編輯,就把新的hash存到  瀏覽器里
                    //然后把這個(gè)瀏覽器里的hash覆蓋原來的就可以了
                    //熟悉原理:一變更就存檔
上面是備份hash代碼
//把localStorage里hash,zzz拿出來
        var hashINLocalStorage = JSON.parse(localStorage.getItem("zzz")|| "null");
        if(hashINLocalStorage){ //如果hashINLocalStorage不為空,第二次刷新就不為空了.
            hash = hashINLocalStorage;//覆蓋hash
        }
上面是覆蓋代碼
位置:


經(jīng)測(cè)試,緩存清空localStorage就沒有了
其他

程序員評(píng)分與努力程度的關(guān)系