01导航页面

1.功能描述

键位上显示对应网站的图标及键位，输入键盘键位打开相应网站，点击键位可修改键盘键位所对应的网站。

# 2.思路 初始化数据——》生成键盘——》监听用户动作
# 3.具体操作 ## 3.1 初始化数据 用hash来存每个键位的数据，用数组来存每一行的键位，共3行，使用3个数组。 ``` 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 生成键盘

首先创建1个div用来装键盘整体。在该div中，循环出3个div用来装每行的键位。再循环出每行的键位（kbd），并添加到对应的行（div）。每行键位个数取决于对应数组的长度。

在kbd里面添加1个编辑按钮，点击编辑按钮可更新数据，用localstorage.getItem来存储更新后的数据。添加img，用来设置icon，并设置编辑后的icon。

3.3 监听用户动作

点击按键跳转到相应的页面。

document.onkeypress = function(xzkjcnxlkcjlk){
  var key = xzkjcnxlkcjlk['key'];
  var website = hash[key];
  window.open('http://'+website, '_blank');
}

# 4.相关知识点 ## 4.1 html - **标签：**内联元素、用来存键位

4.2 css

• 移动时状态   key:hover
• 将小写字母转成大写字母   text-transform:uppercas
• 元素居中
    1.内联元素居中   给父元素设置text-align:center
    2.块级元素居中   宽度固定
    3.非内联或块级元素居中
        方法1：变为内联元素
        方法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创建div   div1 = document.createElement('div')
• 添加子元素   zhangsan.appendChild(div1)
• z这个文字的文本内容为hi   z.textContent= ‘hi’
• 监听用户输入事件   document.onkeypress= function(x){}
• 用户按键时是否同时按alt   altkey
• 模拟客户打开网址   window.open(网址)
• 监听按钮点击事件   buttonX.onclick = function(x){}
• 本地存储器（结果为JSON）   localStorage.setItem()
      可在Application——》Storage——》Local Storage看观察
• 获取本地存储器数据（结果为字符串）   localStorage.getItem()
• 转换为字符串   JSON.stringify()
• 转换为JSON   JSON.parse()
• 内联元素回车显示会有空格，js内生成的内联元素回车不会显示
• return两个东西是不可以的

## 5.实际成果