其他分享
首页 > 其他分享> > 一个导航网站

一个导航网站

作者：互联网

由简单无门槛 js 实现一个触发按键跳转网页的导航网站，效果预览

数据结构

我们都知道工欲善其事，必先利其器，所以选择好数据结构再来进行编程是很有必要的。由于是一个键盘按键对应一个网站，我们很快就会想到 key:value 所以我用对象来存储。

1
2
3
4
5
6
7
8
9
10
11
12
hash = {
    q: 'qq.com', 
    w: 'w3cplus.com', 
    e: 'edx.org.com', 
    t: 'cloud.tencent.com', 
    a: 'alloyteam.com', 
    y: 'youtube.com', 
    i: 'iconfont.cn', 
    o: 'opera.com', 
    z: 'zhangxinxu.com', 
  
}

生成键盘

想到键盘比较多，我就没有写键盘的 HTML 而是改用 JS 自动生成，把要用的三排键想成三个数组存储，可以用对象也可以是二维数组。

1
2
3
4
5
6
var keys = {
    0: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',],
    1: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',],
    2: ['z', 'x', 'c', 'v', 'b', 'n', 'm',],
    length: 3,
}

根据获取到的 keys[][] 的字母来显示键值，遍历该对象进行键盘生成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function (id) {
    var oBtn = tag('button')
    oBtn.id = id
    oBtn.textContent = 'E'

    oBtn.onclick = function (e) {
      //修该键盘的对应网址
    }
    return oBtn
}

function generateKeyboard(keys, hash) {
大专栏

标签：function,oBtn,keys,网站,com,键盘,一个,导航,id
来源： https://www.cnblogs.com/sanxiandoupi/p/11713139.html