-
Notifications
You must be signed in to change notification settings - Fork 79
/
Copy pathinteraction.html
278 lines (228 loc) · 12.1 KB
/
interaction.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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>机器人小明</title>
<link rel="stylesheet" type="text/css" href="../static/css/c1.css"/>
<link rel="stylesheet" type="text/css" href="../static/css/mdui.min.css"/>
<script src="../static/webjs/mdui.min.js"></script>
</head>
<style>
.card {
width: 50%;
height: 750px;
position: absolute;
top: 0;
margin: 30px 0 0 30px;
}
.book img {
width: 300px;
height: 300px;
margin-left:50px ;
margin-top: 20px;
}
.card li{
height: 50px;}
</style>
<div class="mdui-theme-primary-light-blue mdui-theme-accent-blue">
{# <div class="loader"></div>#}
<div id="robot">
<img src="../static/icon/robot.png">
</div>
{# <div id="robot1" class="container3 mdui-card">#}
{# <div class="text">#}
{# 您好，我是机器人小明，感谢您使用本系统。<br>#}
{# 假设您是一位在校大学生，正在学习计算机相关的专业，并且热爱计算机。<br>#}
{# </div>#}
{# <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-btn-block"#}
{# onclick="document.getElementById('robot1').style.display='none',document.getElementById('robot2').style.display='block' ">#}
{# 好的∑(゜ロ゜;)#}
{# </button>#}
{# </div>#}
{##}
{##}
{# <div id="robot2" class="container3 mdui-card">#}
{# <div class="text">#}
{# 您和您周围的同学肯定会有像这样的苦恼<br>#}
{# 究竟是应该准备读研深造呢，还是好好学习技术毕业直接就业呢..(｡•ˇ‸ˇ•｡) ..<br>#}
{# </div>#}
{# <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-btn-block"#}
{# onclick="document.getElementById('robot2').style.display='none',document.getElementById('robot3').style.display='block' ">#}
{# 没错啊，很痛苦呢#}
{# </button>#}
{##}
{# </div>#}
<div id="robot3" class="container3 mdui-card" style="display:block">
<div class="text">
下面就让小明来帮您解决这个问题<br>
告诉我你想在计算机哪个方向努力，我就会通过大数据分析给你提供一些建议<br><br>
<a class="mdui-chip" onclick="f1()">
<span class="mdui-chip-icon mdui-color-blue-200"></span>
<span class="mdui-chip-title">软件</span>
</a>
<a class="mdui-chip"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-indigo-200"></span>
<span class="mdui-chip-title">前端</span>
</a>
<a class="mdui-chip"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-teal-200"></span>
<span class="mdui-chip-title">后端</span>
</a>
<a class="mdui-chip"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-red-200"></span>
<span class="mdui-chip-title">图像</span>
</a>
<a class="mdui-chip"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-deep-purple-200"></span>
<span class="mdui-chip-title">语音</span>
</a>
<a class="mdui-chip"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-light-green-200"></span>
<span class="mdui-chip-title">游戏</span>
</a>
<a class="mdui-chip"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-pink-200"></span>
<span class="mdui-chip-title">自然语言处理</span>
</a>
<a class="mdui-chip" href="?name=学习"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-amber-200"></span>
<span class="mdui-chip-title">机器学习</span>
</a>
<a class="mdui-chip" href="?name=数据"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-deep-purple-200"></span>
<span class="mdui-chip-title">数据</span>
</a>
<a class="mdui-chip" href="?name=测试"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-blue-grey-200"></span>
<span class="mdui-chip-title">测试</span>
</a>
<a class="mdui-chip" href="?name=网络安全"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-yellow-200"></span>
<span class="mdui-chip-title">网络安全</span>
</a>
<a class="mdui-chip" href="?name=运维"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-cyan-200"></span>
<span class="mdui-chip-title">运维</span>
</a>
<a class="mdui-chip" href="?name=UI"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-light-green-200"></span>
<span class="mdui-chip-title">UI</span>
</a>
<a class="mdui-chip" href="?name=区块链"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-brown-200"></span>
<span class="mdui-chip-title">区块链</span>
</a>
<a class="mdui-chip" href="?name=网络"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-red-200"></span>
<span class="mdui-chip-title">网络</span>
</a>
<a class="mdui-chip" href="?name=全栈"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-blue-200"></span>
<span class="mdui-chip-title">全栈工程师</span>
</a>
<a class="mdui-chip" href="?name=嵌入式"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-deep-purple-200"></span>
<span class="mdui-chip-title">嵌入式工程师</span>
</a>
<a class="mdui-chip" href="?name=物联网"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-orange-200"></span>
<span class="mdui-chip-title">物联网工程师</span>
</a>
<a class="mdui-chip" href="?name=架构"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-cyan-200"></span>
<span class="mdui-chip-title">架构工程师</span>
</a>
<a class="mdui-chip" href="?name=算法"
onclick="document.getElementsByClassName('loader')[0].style.display='block'">
<span class="mdui-chip-icon mdui-color-deep-orange-200"></span>
<span class="mdui-chip-title">算法工程师</span>
</a>
</div>
</div>
<div id="robot4" class="mdui-card" style="display: none;">
<div class="text">
通过大数据分析后<br>
我们为您准备了学习路线<br>要掌握的技能和推荐书籍
</div>
</div>
<div class="mdui-tab " mdui-tab
style="right: 120px;position: absolute;top:100px;display: none;
font-weight: 600;letter-spacing: 0.2em;height:50px; ">
<a href="#example1-tab4" class="mdui-ripple">分析结果</a>
<a href="#example1-tab1" class="mdui-ripple">学习路线</a>
<a href="#example1-tab2" class="mdui-ripple">技能</a>
<a href="#example1-tab3" class="mdui-ripple">推荐书籍</a>
</div>
<div id="example1-tab1" class="mdui-p-a-2">
<div class="mdui-card card" id="1" style=""></div>
</div>
<div id="example1-tab2" class="mdui-p-a-2">
<div class="mdui-card card" id="1" style="font-size: 1.2em;letter-spacing: 1px;padding-top: 45px">
<ul>
<li>对 HTML / CSS / JavaScript 具有一定的知识；<br></li>
<li>有较熟练使用 AngularJS / Vue / jQuery 或者其它类库的经验；<br></li>
<li>较熟悉第三方组件（插件）生态环境及具体案例；</li>
<li>有较熟练使用 Jade / Swig / Handlebars / Mustache 或者其它模板引擎的经验；<br></li>
<li>有较熟练使用 SASS 或者其它 CSS 预处理器的经验；<br></li>
<li>有较熟练使用 CoffeeScript 的经验；<br></li>
<li>对 CSS / JavaScript 设计模式有很好的认识及应用；<br></li>
<li>对常用数据结构和算法熟悉；<br></li>
<li>有使用 GruntJS / GulpJS 任务运行器的经验；<br></li>
<li>有使用 Yeoman 生成器的经验；</li>
<li>有诸如 Bower / Volo / JSPM 等前端静态资源包管理器使用经验；</li>
<li>熟悉本地及远程（真机）调试操作；</li>
<li>有 Git 的使用经验；<br></li>
</ul>
</div>
</div>
<div id="example1-tab3" class="mdui-p-a-2">
<div class="mdui-card card book" id="1" style="">
<a href="https://detail.tmall.com/item.htm?spm=a230r.1.14.41.60d47936PrHKVN&id=588391570410&ns=1&abbucket=2"> <img src="../static/icon/book/1.png"></a>
<a href="https://detail.tmall.com/item.htm?spm=a230r.1.14.97.60d47936PrHKVN&id=569403754016&ns=1&abbucket=2"><img src="../static/icon/book/2.png"></a>
<a href="https://detail.tmall.com/item.htm?spm=a230r.1.14.239.60d47936PrHKVN&id=570446617914&ns=1&abbucket=2" ><img src="../static/icon/book/4.png"></a>
<a href="" ></a><img src="../static/icon/book/3.png">
<img src="../static/icon/book/5.png">
<img src="../static/icon/book/6.png">
</div>
</div>
<div id="example1-tab4" class="mdui-p-a-2">
<div id="displayno">
<iframe src="../static/html/bing.html" scrolling="no" frameborder="0" width="55%" height="450"
class="p1"></iframe>
<iframe src="../static/html/qiu1.html" scrolling="no" frameborder="0" width="30%" height="400"
class="p2"></iframe>
<iframe src="../static/html/qiu2.html" scrolling="no" frameborder="0" width="30%" height="400"
class="p2"></iframe>
<iframe src="../static/html/qiu3.html" scrolling="no" frameborder="0" width="30%" height="400"
class="p2"></iframe>
</div>
</div>
</div>
<script>
function f1() {
document.getElementById('displayno').style.display = 'block';
document.getElementsByClassName('mdui-tab')[0].style.display = 'flex';
document.getElementById('robot3').style.display = 'none';
document.getElementById('robot4').style.display = 'block';
}
</script>
</body>
</html>