参考一个并不好看的页面：http://www.36start.com/
本博客着重写javascript，所以关于css要求能用就写
1. 准备构思
先画一个用例图
用例图
选择数据结构
有hash，有四个数组。
为了简化一下，去掉最上面一行，三个数组就够了
2. 写代码
HTML的基本结构和构思
- 在<body>里写<header>，<main>，<footer>三个标签作为基本结构
- 在<main>里生成网页上键盘的代码，所以要再加个<div>在里面，用来控制键盘的居中
- 用<kbd>表示键盘的按键，再加个<button>用于用户修改该按键的网页信息(用js生成即可)
- 给<main>下面的<div>加一个id，名为
id="divFirst"，用于js定位
用JS生成HTML元素
- 声明数组和hash
在<body>里写<script>，直接在里面写:
keys = { //声明一个二维数组，用于后面生成<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，用来存按键对应的网址
'q':'qq.com',
'w':'weibo.com',
'e':'ele.me',
....
}
- 给<main>添加一个<div>，重复三次，以储存三排键盘
继续写
index = 0
while(index < keys['length']){ //当index小于keys数组个数时，执行以下代码，直到不满足条件为止
div1 = document.createElement('div') //文档.创建一个标签名为div的标签，放入div1容器中
divFirst.appendChild(div1) //给divFirst容器追加一个名为div1的儿子
index = index + 1 //每次循环完index+1，共循环3次
}
- 给每一个<div>里添加一排该行个数的<kbd>
且每个<kbd>中含有其对应的键盘值
可以从keys中取
写在创建三个div的循环里
row = keys[index] //第一个数组 第二个数组 第三个数组 也就是key的length值
index2 = 0
while(index2< row['length']){ // 0-9 0-8 0-7三个数组的length值
kbd1 = document.createElement('kbd') //文档.创建一个标签名为kbd的标签，放入kbd1容器中
kbd1.textContent = row[index2] //三个数组对应的键盘值写到kbd1中
div1.appendChild(kbd1) //把kbd1的值追加到div1容器中
index2 = index2 + 1 //循环该行键位个数的次数
}
用CSS让键盘居中
- 先让所有小写英文字母变成大写字母
div > kbd{
text-transform:uppercase;
}
- 将<main>下面的<div>变成内联元素，然后给他的父元素加上
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;//给后面按钮定位准备的
}
JS监听键盘
比如，需求是用户输入键位时，打开对应网页
使用键盘监听事件即可
document.onkeypress = function(fjogjosjogo){
//这个名为"fjogjosjogo"的hash里包含了用户输入的所有信息，当然名字是随便取的
key = fjogjosjogo['key'] // q s d j...拿到用户按的键
website = hash[key] //得到hash数组中对应按键的地址
window.open('http://' + website, '_blank')
//使用http协议在新窗口页面访问该地址
}
用户可编辑hash
用户可编辑键位对应网址
且刷新页面可保存
先把<button>写到每个<kbd>中
然后让用户点击按钮可把hash变更后的值写入浏览器的loclaStorage中
以下内容写在<kbd>的循环中
button1 = document.createElement('button')
button1.textContent = '编辑'
button1.id = row[index2] //给每个按钮标记以其对应的字母id
button1.onclick = function(fjogjosjogo){ //当用户点击时，去fjog..中取要的值
key = fjogjosjogo['target']['id'] //取fjog..中的target值的id，存到key容器中
urlId = prompt('给我一个网址') //浏览器弹出一个输入框,把用户输入的值存到urlId这个容器中
hash[key] = urlId //hash变更
localStorage.setItem('hashEnd',JSON.stringify(hash)) //localStorage里有很多桶，hashEnd就是桶的名字。将变更后的hash存到hashEnd这个容器里
}
kbd1.appendChild(button1)
如果存在变更后的hash值，就取出localStorage中变更后的hash值，覆盖原网页的hash值
以下内容写在所有循环外
//取出 localStorage 中的hashEnd对应的hash
hashInLocalStorage = JSON.parse(localStorage.getItem('hashEnd') || 'null')
if(hashInLocalStorage){ //如果浏览器中的hashEnd存在
hash = hashInLocalStorage //就拿hashEnd覆盖网页的原hash
}
用css装饰按钮
使按钮hover时才出现
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好好装饰页面了
我的项目地址:点击这里
网友评论