Skip to content

Commit a853710

Browse files
LittlefeanLittlefean
committed
增加了界面
1 parent 8fdbc2c commit a853710

File tree

6 files changed

+389
-0
lines changed

6 files changed

+389
-0
lines changed

‎css/index.css

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
a {
7+
text-decoration: none;
8+
}
9+
button {
10+
cursor: pointer;
11+
}
12+
body nav {
13+
text-align: center;
14+
height: 60px;
15+
}
16+
body nav a {
17+
height: 60px;
18+
line-height: 60px;
19+
margin: 0 20px;
20+
}
21+
body header {
22+
background-color: #33a474;
23+
color: white;
24+
padding: 20px 0;
25+
margin-bottom: 30px;
26+
}
27+
body header h1 {
28+
text-align: center;
29+
line-height: 2em;
30+
}
31+
body header p {
32+
text-align: center;
33+
line-height: 2em;
34+
}
35+
body main section {
36+
text-align: center;
37+
}
38+
body main section p {
39+
font-size: 20px;
40+
font-weight: bolder;
41+
color: #576071;
42+
}
43+
body main section .describe {
44+
display: inline-block;
45+
}
46+
body main section .buttons {
47+
width: 50%;
48+
height: 100px;
49+
display: inline-block;
50+
}
51+
body main section .buttons button {
52+
min-width: 50px;
53+
min-height: 50px;
54+
border-radius: 50%;
55+
margin: 0 15px;
56+
border: solid 3px;
57+
background-color: transparent;
58+
transition: all 0.1s;
59+
}
60+
body main section .buttons .activate {
61+
box-shadow: 0 0 10px;
62+
}
63+
body main section .buttons .button-0,
64+
body main section .buttons .button-1,
65+
body main section .buttons .button-2 {
66+
color: #33a474;
67+
}
68+
body main section .buttons .button-0:hover,
69+
body main section .buttons .button-1:hover,
70+
body main section .buttons .button-2:hover {
71+
background-color: #33a474;
72+
}
73+
body main section .buttons .button-0.activate,
74+
body main section .buttons .button-1.activate,
75+
body main section .buttons .button-2.activate {
76+
background-color: #33a474;
77+
}
78+
body main section .buttons .button-4,
79+
body main section .buttons .button-5,
80+
body main section .buttons .button-6 {
81+
color: #88619a;
82+
}
83+
body main section .buttons .button-4:hover,
84+
body main section .buttons .button-5:hover,
85+
body main section .buttons .button-6:hover {
86+
background-color: #88619a;
87+
}
88+
body main section .buttons .button-4.activate,
89+
body main section .buttons .button-5.activate,
90+
body main section .buttons .button-6.activate {
91+
background-color: #88619a;
92+
}
93+
body main section .buttons .button-3 {
94+
color: #9b9faa;
95+
}
96+
body main section .buttons .button-3:hover {
97+
background-color: #9b9faa;
98+
}
99+
body main section .buttons .button-3.activate {
100+
background-color: #9b9faa;
101+
}
102+
body main section .buttons .button-0,
103+
body main section .buttons .button-6 {
104+
transform: scale(1);
105+
}
106+
body main section .buttons .button-1,
107+
body main section .buttons .button-5 {
108+
transform: scale(0.85);
109+
}
110+
body main section .buttons .button-2,
111+
body main section .buttons .button-4 {
112+
transform: scale(0.7);
113+
}
114+
body main section .buttons .button-3 {
115+
transform: scale(0.55);
116+
}

‎css/index.less

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
a {
7+
text-decoration: none;
8+
}
9+
button {
10+
cursor: pointer;
11+
}
12+
13+
body {
14+
nav {
15+
text-align: center;
16+
height: 60px;
17+
a {
18+
// line-height: 2em;
19+
height: 60px;
20+
line-height: 60px;
21+
margin: 0 20px;
22+
}
23+
}
24+
header {
25+
background-color: #33a474;
26+
color: white;
27+
padding: 20px 0;
28+
margin-bottom: 30px;
29+
h1 {
30+
text-align: center;
31+
line-height: 2em;
32+
}
33+
p {
34+
text-align: center;
35+
line-height: 2em;
36+
}
37+
}
38+
39+
main {
40+
section {
41+
text-align: center;
42+
p {
43+
font-size: 20px;
44+
font-weight: bolder;
45+
color: #576071;
46+
}
47+
.describe {
48+
display: inline-block;
49+
}
50+
.buttons {
51+
width: 50%;
52+
// margin: 0 auto;
53+
height: 100px;
54+
display: inline-block;
55+
button {
56+
min-width: 50px;
57+
min-height: 50px;
58+
border-radius: 50%;
59+
margin: 0 15px;
60+
border: solid 3px;
61+
background-color: transparent;
62+
transition: all 0.1s;
63+
}
64+
.activate {
65+
box-shadow: 0 0 10px;
66+
}
67+
.button-0,
68+
.button-1,
69+
.button-2 {
70+
color: #33a474;
71+
&:hover {
72+
background-color: #33a474;
73+
}
74+
&.activate {
75+
background-color: #33a474;
76+
}
77+
}
78+
79+
.button-4,
80+
.button-5,
81+
.button-6 {
82+
color: #88619a;
83+
&:hover {
84+
background-color: #88619a;
85+
}
86+
&.activate {
87+
background-color: #88619a;
88+
}
89+
}
90+
.button-3 {
91+
color: #9b9faa;
92+
&:hover {
93+
background-color: #9b9faa;
94+
}
95+
&.activate {
96+
background-color: #9b9faa;
97+
}
98+
}
99+
100+
.button-0,
101+
.button-6 {
102+
transform: scale(1);
103+
}
104+
.button-1,
105+
.button-5 {
106+
transform: scale(0.85);
107+
}
108+
.button-2,
109+
.button-4 {
110+
transform: scale(0.7);
111+
}
112+
.button-3 {
113+
transform: scale(0.55);
114+
}
115+
}
116+
}
117+
}
118+
}

‎index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>16人格测试程序员版</title>
7+
<link rel="stylesheet" href="./css/index.css" />
8+
</head>
9+
<body>
10+
<nav>
11+
<a href="#">职业人格测试</a>
12+
<a href="#">查看所有结果</a>
13+
<a href="#">开源地址</a>
14+
</nav>
15+
<header>
16+
<h1>免费的人格测试（程序员版）</h1>
17+
<p>做你自己，诚实回答，找出你的职业人格类型。</p>
18+
<p>尝试发掘自己的学习潜力，看看自己更擅长学哪个方面。</p>
19+
</header>
20+
21+
<!-- 题目 -->
22+
<main></main>
23+
<input type="range" min="-5" max="5" value="0" />
24+
</body>
25+
<script src="./js/static.js"></script>
26+
<script src="./js/question.js"></script>
27+
<script src="./js/index.js"></script>
28+
</html>

‎js/index.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
window.onload = function () {
2+
// 加载所有题目，并渲染组件
3+
const mainElement = document.querySelector('main');
4+
5+
const questionObjectList = [];
6+
for (const questionJson of QUESTION_ARRAY) {
7+
let questionObject = new Question(questionJson.content);
8+
questionObjectList.push(questionObject);
9+
}
10+
11+
for (let question of questionObjectList) {
12+
console.log(question.element);
13+
mainElement.appendChild(question.element);
14+
}
15+
16+
};

‎js/question.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* 题目类
3+
* 在此js被加载之前请先注意加载personality.js文件。引用到内部的一个全局变量
4+
*/
5+
class Question {
6+
constructor(content) {
7+
// 题目
8+
this.content = content;
9+
// 当前用户选择的分值
10+
this.currentValue = 0;
11+
// 对应的element
12+
this.element = null;
13+
this.generateElement();
14+
}
15+
16+
/**
17+
* 此方法只在第一次调用有效，确保元素绑定的唯一性
18+
* element
19+
* p 题目
20+
* div
21+
* button * 5
22+
* span 非常反对，比较反对，轻微反对，中立，轻微赞成，比较赞成，非常赞成
23+
*/
24+
generateElement() {
25+
if (this.element) {
26+
return;
27+
}
28+
let element = document.createElement("section");
29+
// 题目
30+
let content = document.createElement("p");
31+
content.classList.add("content");
32+
content.innerText = this.content;
33+
element.appendChild(content);
34+
// 同意
35+
let spanAgree = document.createElement('span');
36+
spanAgree.classList.add("describe");
37+
spanAgree.innerText = '同意';
38+
element.appendChild(spanAgree);
39+
40+
// 多个按钮组
41+
let buttonList = document.createElement("div");
42+
buttonList.classList.add("buttons");
43+
for (let i = 0; i < 7; i++) {
44+
// 生成每个按钮
45+
let btn = document.createElement("button");
46+
btn.classList.add(`button-${i}`);
47+
btn.onclick = () => {
48+
this.currentValue = i - 3;
49+
// 修改样式
50+
for (let otherBtn of buttonList.children) {
51+
otherBtn.classList.remove('activate');
52+
}
53+
btn.classList.add('activate');
54+
};
55+
buttonList.appendChild(btn);
56+
}
57+
element.appendChild(buttonList);
58+
59+
// 反对
60+
let spanDisagree = document.createElement('span');
61+
spanDisagree.classList.add("describe");
62+
spanDisagree.innerText = '反对';
63+
element.appendChild(spanDisagree);
64+
65+
this.element = element;
66+
}
67+
}

‎js/static.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const QUESTION_ARRAY = [
2+
{
3+
'content': '在面临一个紧急的项目交付期限时，你即使超时完成也会注重完成质量',
4+
},
5+
{
6+
'content': '你不会因为程序被其他人发现bug而感到羞耻和尴尬，相反你觉得这是正常的事情',
7+
},
8+
{
9+
'content': '你完成了一个新功能的开发，但在代码审查中发现有一些潜在的优化和改进的地方，你愿意花更多时间进行全面的代码优化，以确保高质量。',
10+
},
11+
{
12+
'content': '项目引入一项新技术，但这可能导致学习曲线和一些额外的开发时间。你希望希望尽快引入新技术，即使牺牲一些质量。',
13+
},
14+
{
15+
'content': '你喜欢算法并经常参加算法竞赛',
16+
},
17+
{
18+
'content': '你经常愿意牺牲可读性来优化性能',
19+
},
20+
{
21+
'content': '你会保证项目的功能稳定性，出于风险角度，有些地方暂不考虑优化',
22+
},
23+
{
24+
'content': '你认为注释写详细是浪费时间，良好的代码是“自文档”的',
25+
},
26+
{
27+
'content': '多数时候，相比新框架，你更愿意使用自己熟练掌握的方式和技术来做项目',
28+
},
29+
{
30+
'content': '你花了很多时间学习了很多不同的语言和框架，并且有人认为你会的很多',
31+
},
32+
{
33+
'content': '你认为写出不同的前端界面、样式和UI交互很有趣（如果你还没学过和尝试过，请选择中立）',
34+
},
35+
{
36+
'content': '当你写的程序能可视化，甚至能用鼠标等设备进行交互时，你会很高兴。',
37+
},
38+
{
39+
'content': '',
40+
},
41+
{
42+
'content': '设计并做出一个庞大复杂的系统对你来说并不困难。',
43+
},
44+
]

0 commit comments

Comments
 (0)