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

這篇博客只是自己的學習筆記,供日后復習所用,沒有經過精心排版,也沒有按邏輯編寫
GitHub項目源碼
預覽地址

左下角為網站的icon,"."代表網站無icon或未設置網站

按鍵盤上相應的按鍵進入對應網站

鼠標放上去可編輯并保存網站,除了初始網站,用戶編輯的網站存在本地cookies

清空cookies后保存在本地的網站將被清除,還原會初始狀態

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

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

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

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上才出現*/
}

inset

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

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

這是第三個 值。值越大，模糊面積越大，陰影就越大越淡。 不能為負值。默認為0，此時陰影邊緣銳利。

這是第四個 值。取正值時，陰影擴大；取負值時，陰影收縮。默認為0，此時陰影與元素同樣大。

相關事項查看 。如果沒有指定，則由瀏覽器決定——通常是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
鍵盤監聽事件

這個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就沒有了
其他

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