一个导航网站

由简单无门槛 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) {
大专栏
上一篇:原生js实现简单选项卡


下一篇:js-01_面向对象选项卡