1.功能描述
鍵位上顯示對應網(wǎng)站的圖標及鍵位，輸入鍵盤鍵位打開相應網(wǎng)站，點擊鍵位可修改鍵盤鍵位所對應的網(wǎng)站隅俘。
2.思路
初始化數(shù)據(jù)——》生成鍵盤——》監(jiān)聽用戶動作
3.具體操作
3.1 初始化數(shù)據(jù)
用hash來存每個鍵位的數(shù)據(jù)建炫，用數(shù)組來存每一行的鍵位，共3行轧叽，使用3個數(shù)組。
var keys = {
'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
}
var hash = {
'a': 'acfun.tv','b': 'baidu.com','c': 'ccb.com','d':'douban.com','e': 'ele.me',
'f': 'f130.com','g': 'guahao.com','h': 'hao123.com','i': 'iqiyi.com',
'j': 'jobcn.com','k': 'ku6.com','l': 'lottery.gov.cn','m': 'microsoft.com',
'n': 'nokia.com.cn', 'o': 'opera.com', 'p': 'psbc.com','q': 'qq.com', 'r': 'rising.com.cn',
's': 'sohu.com','t': 'taobao.com','u': 'uuu9.com' ,'v': 'verycd.com' ,'w': 'weibo.com',
'x': 'xunlei.com','y': 'yahoo.com.cn', 'z': 'zhihu.com',
}
3.2 生成鍵盤
首先創(chuàng)建1個div用來裝鍵盤整體刊棕。在該div中炭晒，循環(huán)出3個div用來裝每行的鍵位。再循環(huán)出每行的鍵位（kbd）甥角，并添加到對應的行（div）网严。每行鍵位個數(shù)取決于對應數(shù)組的長度。
鍵盤
在kbd里面添加1個編輯按鈕嗤无，點擊編輯按鈕可更新數(shù)據(jù)震束，用localstorage.getItem來存儲更新后的數(shù)據(jù)。添加img当犯，用來設置icon垢村，并設置編輯后的icon。
kbd
3.3 監(jiān)聽用戶動作
點擊按鍵跳轉(zhuǎn)到相應的頁面嚎卫。
document.onkeypress = function(x){
var key = x['key'];
var website = hash[key];
window.open('http://'+website, '_blank');
}
4.相關知識點
4.1 html
- <kbd>標簽：內(nèi)聯(lián)元素嘉栓、用來存鍵位
4.2 css
-
移動時狀態(tài)???
key:hover -
將小寫字母轉(zhuǎn)成大寫字母???
text-transform:uppercas -
元素居中
1.內(nèi)聯(lián)元素居中???給父元素設置text-align:center
2.塊級元素居中???寬度固定
3.非內(nèi)聯(lián)或塊級元素居中
???方法1：變?yōu)閮?nèi)聯(lián)元素
???方法2：寬度固定 -
設置多個影陰用逗號隔開???
box-shadow:0 0 0px 1px red,0 0 0px2px green; - div是不包括影陰的
-
背景自適應???
background-size:cover - body{height:100vh;}???vh:viewportheight
- 背景要考慮高度、平鋪方式
4.3 js
-
用js創(chuàng)建div???
div1 = document.createElement('div') -
添加子元素???
zhangsan.appendChild(div1) -
z這個文字的文本內(nèi)容為hi???
z.textContent= ‘hi’ -
監(jiān)聽用戶輸入事件???
document.onkeypress= function(x){} -
用戶按鍵時是否同時按alt???
altkey -
模擬客戶打開網(wǎng)址???
window.open(網(wǎng)址) -
監(jiān)聽按鈕點擊事件???
buttonX.onclick = function(x){} -
本地存儲器（結果為JSON）???
localStorage.setItem()
可在Application——》Storage——》Local Storage看觀察 -
獲取本地存儲器數(shù)據(jù)（結果為字符串）???
localStorage.getItem() -
轉(zhuǎn)換為字符串???
JSON.stringify() -
轉(zhuǎn)換為JSON???
JSON.parse() - 內(nèi)聯(lián)元素回車顯示會有空格，js內(nèi)生成的內(nèi)聯(lián)元素回車不會顯示
- return兩個東西是不可以的
