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.实际成果