-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (124 loc) · 3.53 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="cn">
<head>
<meta charset="UTF-8">
<title>我的导航</title>
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
<header></header>
<main>
<div id="wrapper">
</div>
</main>
<footer></footer>
<script>
//1.初始化数据
var hashA=init()
var keys=hashA['keys']
var hash=hashA['hash']
//2.生成键盘
//遍历keys,生成kbd标签
generateKeyboard(keys,hash)
//3.监听用户动作
listenKeyboard(hash)
function listenKeyboard(urlArray){
document.onkeypress=function(suibianqimingzi){
var key=suibianqimingzi['key']//q w e r
var website=urlArray[key]
// location.href="http://"+website
window.open("http://"+website,'_blank')
}
}
//4.封装函数
function getFromLocalStorage(name){
return JSON.parse(localStorage.getItem(name)||'null')
}
function tag(tagName,attributes){//attributes指属性
var element=document.createElement(tagName)
for(var aa in attributes){ //aa 为className,id,textContent
element[aa]=attributes[aa] // element[aa] 为 'row',row[index2],'编辑'
}
return element//标签也是hash, div={classname:'row'}
}
function createButton(buttonId){
var allButton=tag('button',{id:buttonId,textContent:'编辑'})
// button1.id=row[index2]//q w e
// button1.textContent='编辑'
allButton.onclick=function(clickButtonEvent){
var clickButton=clickButtonEvent['target']//用户点击的元素
var img2=clickButton.previousSibling
var key=clickButton['id']//q w e
var x=prompt('给我一个网址') // baidu.com 用户输入的信息(网址)赋值给x
if(x!=null){//如果用户点编辑但未输入网址,则不执行。此处判断语句应在 接到值 且覆盖之前
hash[key]=x //hash 变更
img2.src='http://'+x+'/favicon.ico'
localStorage.setItem('zzz',JSON.stringify(hash))
}
}
return allButton
}
function createImg(domain){
var img1=tag('img')
if(domain){
img1.src='http://'+domain+'/favicon.ico'
}
else{
img1.src='./favicon.ico'
}
img1.onerror=function(xxx){
xxx.target.src='./favicon.ico'
}
return img1
}
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
}
console.log(keys[0])
var hash={
q:'qq.com',
w:'weibo.com',
e:'ele.me',
t:'tianya.cn',
z:'zhihu.com',
j:'jingdong.com',
v:'v2ex.com'
}
//取出localStorage中zzz对应的hash
var hashInLocalStorage=getFromLocalStorage('zzz')
if(hashInLocalStorage){
hash=hashInLocalStorage
}
return{
"keys":keys,
"hash":hash
}
}
function generateKeyboard(keys,hash){
for(var index=0; index< keys['length']; index = index+1 ){
var div1=tag('div',{className:'row'})//此处相当于把div当成一个hash,里面的key和value是className:'row'
// div1.className=('row')
wrapper.appendChild(div1) // document.getElementById("wrapper").appendChild(div1)
// var row;
row=keys[index] //第一个数组 第二个数组 第三个数组
for(var index2 =0;index2< row['length']; index2 = index2 + 1){ // row['length']第一轮为10,第二轮为9,第三轮为7
var span1=tag('span',{textContent:row[index2]})
// span1.textContent=row[index2] //q w e
var button1=createButton(row[index2])
var img1=createImg(hash[row[index2]])
var kbd1=tag('kbd')
kbd1.appendChild(span1)
kbd1.appendChild(img1)
kbd1.appendChild(button1)
div1.appendChild(kbd1)
}
}
}
</script>
</body>
</html>