參考一個并不好看的頁面：http://www.36start.com/
本博客著重寫javascript，所以關(guān)于css要求能用就寫
1. 準(zhǔn)備構(gòu)思
先畫一個用例圖
用例圖
選擇數(shù)據(jù)結(jié)構(gòu)
有hash衙传，有四個數(shù)組蜒秤。
為了簡化一下，去掉最上面一行测蘑，三個數(shù)組就夠了
2. 寫代碼
HTML的基本結(jié)構(gòu)和構(gòu)思
- 在<body>里寫<header>份帐，<main>膏萧，<footer>三個標(biāo)簽作為基本結(jié)構(gòu)
- 在<main>里生成網(wǎng)頁上鍵盤的代碼，所以要再加個<div>在里面饮怯，用來控制鍵盤的居中
- 用<kbd>表示鍵盤的按鍵闰歪，再加個<button>用于用戶修改該按鍵的網(wǎng)頁信息(用js生成即可)
- 給<main>下面的<div>加一個id，名為
id="divFirst"蓖墅，用于js定位
用JS生成HTML元素
- 聲明數(shù)組和hash
在<body>里寫<script>库倘，直接在里面寫:
keys = { //聲明一個二維數(shù)組临扮，用于后面生成<div>,<kbd>以及<button>
'0':{0:'q',1:'w',2:'e',3:'r',4:'t',5:'y',6:'u',7:'i',8:'o',9:'p',length:10},
'1':{0:'a',1:'s',2:'d',3:'f',4:'g',5:'h',6:'j',7:'k',8:'l',length:9},
'2':{0:'z',1:'x',2:'c',3:'v',4:'b',5:'n',6:'m',length:7},
'length':3
}
hash = { //聲明一個hash，用來存按鍵對應(yīng)的網(wǎng)址
'q':'qq.com',
'w':'weibo.com',
'e':'ele.me',
....
}
- 給<main>添加一個<div>教翩，重復(fù)三次杆勇，以儲存三排鍵盤
繼續(xù)寫
index = 0
while(index < keys['length']){ //當(dāng)index小于keys數(shù)組個數(shù)時，執(zhí)行以下代碼饱亿，直到不滿足條件為止
div1 = document.createElement('div') //文檔.創(chuàng)建一個標(biāo)簽名為div的標(biāo)簽蚜退，放入div1容器中
divFirst.appendChild(div1) //給divFirst容器追加一個名為div1的兒子
index = index + 1 //每次循環(huán)完index+1，共循環(huán)3次
}
- 給每一個<div>里添加一排該行個數(shù)的<kbd>
且每個<kbd>中含有其對應(yīng)的鍵盤值
可以從keys中取
寫在創(chuàng)建三個div的循環(huán)里
row = keys[index] //第一個數(shù)組 第二個數(shù)組 第三個數(shù)組 也就是key的length值
index2 = 0
while(index2< row['length']){ // 0-9 0-8 0-7三個數(shù)組的length值
kbd1 = document.createElement('kbd') //文檔.創(chuàng)建一個標(biāo)簽名為kbd的標(biāo)簽彪笼，放入kbd1容器中
kbd1.textContent = row[index2] //三個數(shù)組對應(yīng)的鍵盤值寫到kbd1中
div1.appendChild(kbd1) //把kbd1的值追加到div1容器中
index2 = index2 + 1 //循環(huán)該行鍵位個數(shù)的次數(shù)
}
用CSS讓鍵盤居中
- 先讓所有小寫英文字母變成大寫字母
div > kbd{
text-transform:uppercase;
}
- 將<main>下面的<div>變成內(nèi)聯(lián)元素钻注，然后給他的父元素加上
text-align:center使鍵盤居中 - 完整代碼為
*{margin:0;padding:0;}
a{text-decoration: none;}
div > kbd{
border:1px solid red;
width:4em;
height:4em;
display: inline-block;
text-transform: uppercase;
position: relative;//給后面按鈕定位準(zhǔn)備的
}
JS監(jiān)聽鍵盤
比如，需求是用戶輸入鍵位時配猫，打開對應(yīng)網(wǎng)頁
使用鍵盤監(jiān)聽事件即可
document.onkeypress = function(fjogjosjogo){
//這個名為"fjogjosjogo"的hash里包含了用戶輸入的所有信息队寇，當(dāng)然名字是隨便取的
key = fjogjosjogo['key'] // q s d j...拿到用戶按的鍵
website = hash[key] //得到hash數(shù)組中對應(yīng)按鍵的地址
window.open('http://' + website, '_blank')
//使用http協(xié)議在新窗口頁面訪問該地址
}
用戶可編輯hash
用戶可編輯鍵位對應(yīng)網(wǎng)址
且刷新頁面可保存
先把<button>寫到每個<kbd>中
然后讓用戶點擊按鈕可把hash變更后的值寫入瀏覽器的loclaStorage中
以下內(nèi)容寫在<kbd>的循環(huán)中
button1 = document.createElement('button')
button1.textContent = '編輯'
button1.id = row[index2] //給每個按鈕標(biāo)記以其對應(yīng)的字母id
button1.onclick = function(fjogjosjogo){ //當(dāng)用戶點擊時，去fjog..中取要的值
key = fjogjosjogo['target']['id'] //取fjog..中的target值的id章姓，存到key容器中
urlId = prompt('給我一個網(wǎng)址') //瀏覽器彈出一個輸入框,把用戶輸入的值存到urlId這個容器中
hash[key] = urlId //hash變更
localStorage.setItem('hashEnd',JSON.stringify(hash)) //localStorage里有很多桶，hashEnd就是桶的名字识埋。將變更后的hash存到hashEnd這個容器里
}
kbd1.appendChild(button1)
如果存在變更后的hash值凡伊，就取出localStorage中變更后的hash值，覆蓋原網(wǎng)頁的hash值
以下內(nèi)容寫在所有循環(huán)外
//取出 localStorage 中的hashEnd對應(yīng)的hash
hashInLocalStorage = JSON.parse(localStorage.getItem('hashEnd') || 'null')
if(hashInLocalStorage){ //如果瀏覽器中的hashEnd存在
hash = hashInLocalStorage //就拿hashEnd覆蓋網(wǎng)頁的原h(huán)ash
}
用css裝飾按鈕
使按鈕hover時才出現(xiàn)
div > kbd > button{
position: absolute;
right:0;
bottom:0;
display: none;
}
div > kbd:hover> button{
display:inline-block;
}
main{text-align: center;}
main> .wrapper{
display: inline-block;
}
完成
到這里就完成了所有js的工作
接下來就需要用css好好裝飾頁面了
我的項目地址:點擊這里
