JS初体验-做一个导航页面

2019-01-22 本文已影响37人酒极子

参考一个并不好看的页面：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好好装饰页面了
我的项目地址:点击这里