-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
148 lines (132 loc) · 3.77 KB
/
index.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>导航</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<main>
<div class="wrapper" id="kbWrapper"></div>
</main>
<script>
// 初始化数据
var hashA = init();
var keys = hashA["keys"];
var hash = hashA["hash"];
// 生成键盘
generateKeyboard(keys, hash);
// 监听用户动作
listenToUser(hash);
// 下面是工具函数
// 初始化数据
function init() {
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
};
var hash = {
q: "qq.com",
w: "weibo.com",
e: "ele.me",
r: "renren.com",
t: "taobao.com",
y: "youtube.com",
u: "uc.com",
i: "iqiyi.com",
o: "opera.com",
p: "paofu.cloud",
a: "acfun.tv",
s: "sohu.com",
z: "zhihu.com"
};
var hashInLocalStorage = getFromLocalStorage("zzz");
if (hashInLocalStorage) {
hash = hashInLocalStorage;
}
return {
keys: keys,
hash: hash
};
}
// 生成键盘
function generateKeyboard(keys, hash) {
for (var i = 0; i < keys.length; i++) {
var divx = cTag("div");
kbWrapper.appendChild(divx);
var row = keys[i];
for (var n = 0; n < row.length; n++) {
var span = createSpan(row[n]);
var button = createButton(row[n]);
var img = createImg(hash[row[n]]);
var kbd = cTag("kbd");
kbd.className = "key";
kbd.appendChild(span);
kbd.appendChild(img);
kbd.appendChild(button);
divx.appendChild(kbd);
}
}
}
// 监听用户动作
function listenToUser(hash) {
document.onkeypress = function(oKey) {
key = oKey.key;
website = hash[key];
window.open("https://" + website, "blank");
};
}
// 获取localStorage中name对应的hash
function getFromLocalStorage(name) {
return JSON.parse(localStorage.getItem(name) || "null");
}
// 创建标签
function cTag(tagName) {
return document.createElement(tagName);
}
// 创建span标签
function createSpan(textContent) {
var span = cTag("span");
span.textContent = textContent;
span.className = "text";
return span;
}
// 创建button标签
function createButton(id) {
var button = cTag("button");
button.textContent = "edit";
button.className = "button";
button.id = id;
button.onclick = function(re) {
var button2 = re.target;
var key = button2.id;
var img2 = button2.previousSibling;
x = prompt("输入一个网址");
hash[key] = x;
img2.src = "https://" + x + "/favicon.ico";
img2.onerror = function(dd) {
dd.target.src = "ico.png";
};
localStorage.setItem("uuu", JSON.stringify(hash));
};
return button;
}
// 创建img标签
function createImg(domain) {
var img = cTag("img");
if (domain) {
img.src = "https://" + domain + "/favicon.ico";
} else {
img.src = "ico.png";
}
img.onerror = function(dd) {
dd.target.src = "ico.png";
};
return img;
}
</script>
</body>
</html>