-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·153 lines (153 loc) · 4.73 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
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<title>我的个人导航主页</title>
<style>
body {
background-image: url("壁纸.jpg");
background-size: cover;
font-family: Arial, sans-serif;
}
.column {
float: left;
width: 25%;
padding: 20px;
box-sizing: border-box;
}
.column h2 {
font-size: 24px;
font-weight: bold;
color: #fff;
background-color: #333;
padding: 10px;
margin: 0;
text-align: center;
}
.column ul {
list-style: none;
margin: 0;
padding: 0;
}
.column li {
margin-bottom: 10px;
}
.column a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
.column a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="column">
<h2>常用网页</h2>
<ul>
<li>
<a
href="https://blog.csdn.net/yuan2019035055/category_11466020.html?spm=1001.2014.3001.5515"
>100天精通Python从入门到就业</a
>
</li>
<li><a href="https://github.com/">GitHub</a></li>
<li>
<a
href="https://www.bilibili.com/video/BV1Y84y1L7Nn/?p=49&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=f4bc1addd58ccd3c73dac4c86bac440e"
>JavaScript</a
>
</li>
<li><a href="https://www.csdn.net">CSDN</a></li>
<li><a href="https://xiaolincoding.com">小林coding</a></li>
<li><a href="https://csdiy.wiki">CS自学指南</a></li>
<li><a href="https://www.runoob.com">菜鸟教程</a></li>
<li>
<a href="http://localhost:3000">localhost: </a
><input type="text" class="local" />
</li>
<li>
<a href="https://mail.qq.com/">QQ邮箱</a>
</li>
<li><a href="https://www.bilibili.com/">bilibili</a></li>
<li><a href="https://www.aliyundrive.com/drive/">阿里云盘</a></li>
<li><a href="https://music.163.com/">网易云音乐</a></li>
<li><a href="https://www.douyin.com/">抖音</a></li>
</ul>
</div>
<div class="column">
<h2>每日学习</h2>
<ul>
<li><a href="https://www.icourse163.org">中国大学MOOC</a></li>
<li><a href="https://www.acwing.com">acwing练习编程</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="column">
<h2>每日任务</h2>
<ul>
<li>跑步</li>
<li>在acwing做一道编程题</li>
<li>阅读EDA书籍</li>
<li>学习数值计算</li>
<li>在王者峡谷努力练习</li>
<li>阅读C++PrimerPlus</li>
<li>锻炼</li>
<li>每周天及时提交作业</li>
<li>学习Express</li>
<li></li>
</ul>
</div>
<div class="column">
<h2>计划安排</h2>
<ul>
<li>新三国电视剧</li>
<li>阅读一本书</li>
<li>王者荣耀上50星</li>
<li>巅峰赛上2000</li>
<li>出去嗨一周</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
let inputElement = document.querySelector("input.local");
// 获取所有的 <a> 元素
let aElements = document.querySelectorAll("a");
// 为输入框添加事件监听器
inputElement.addEventListener("keyup", function (event) {
// 获取输入框的值
let port = event.target.value;
// 遍历所有的 <a> 元素
aElements.forEach(function (aElement) {
// 获取当前 <a> 元素的 href 属性值
let href = aElement.getAttribute("href");
// 判断 href 是否以 "localhost:" 开头
if (href.startsWith("http://localhost:")) {
// 将端口号替换为输入框的值
let newHref = href.replace(/:\d+/, ":" + port);
// 更新 href 属性值
aElement.setAttribute("href", newHref);
}
});
});
// 为所有的 <a> 元素添加点击事件监听器
aElements.forEach(function (aElement) {
aElement.addEventListener("click", function (event) {
// 阻止默认行为
event.preventDefault();
// 获取 href 属性值
let href = aElement.getAttribute("href");
// 跳转到对应的 localhost 地址
window.location.href = href;
});
});
</script>
</body>
</html>