意见反馈组件 Feedback UI Design
1. 概述
项目本体展示了一个意见反馈小组件.
本项目中涉及的知识点:
- 使用
innerHTML修改组件内部的HTML内容. - 使用
scale(...)缩放元件.
效果:
2. 结构和切图
网页的基本结构如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<div id="panel" class="panel-container">
<strong>How satisfied are you with our <br/> Customer Support Performance?</strong>
<div class="ratings-container">
<div class="rating">
<img src="https://image.flaticon.com/icons/svg/187/187150.svg" alt="">
<small>Unhappy</small>
</div>
<div class="rating">
<img src="https://image.flaticon.com/icons/svg/187/187136.svg" alt=""/>
<small>Neutral</small>
</div>
<div class="rating active">
<img src="https://image.flaticon.com/icons/svg/187/187133.svg" alt=""/>
<small>Satisfied</small>
</div>
</div>
<button class="btn" id="send">Send Review</button>
</div>
</body>
3. 编写 CSS 样式
首先将 body 的样式设为 水平垂直居中:
1
2
3
4
5
6
7
8
9
10
11
12
body {
background-color: #fef9f2;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
user-select: none;
-webkit-user-select: none;
}
其次处理最外层包裹所有内容的容器样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.panel-container {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
border-radius: 4px;
font-size: 90%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 30px;
max-width: 400px;
}
.panel-container strong {
line-height: 20px;
}
.ratings-container {
display: flex;
margin: 20px 0;
}
最后处理三个选项按钮和提交按钮的样式:
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
.rating {
flex:1;
cursor: pointer;
padding: 20px;
margin: 10px 5px;
}
.rating:hover,
.rating.active {
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
.rating img {
width: 40px;
}
.rating small {
color: #555;
display: inline-block;
margin: 10px 0 0;
}
.rating:hover small,
.rating.active small {
color: #111
}
.btn {
background-color: #302d2b;
color: #fff;
border: 0;
border-radius: 4px;
padding: 12px 30px;
}
.btn:focus {
outline: 0;
}
.btn:active {
transform: scale(.98);
}
.fa-heart {
color: red;
font-size: 30px;
margin-bottom: 10px;
}
完整的 CSS 样式表如下:
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
* {
box-sizing: border-box;
}
body {
background-color: #fef9f2;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
user-select: none;
-webkit-user-select: none;
}
.panel-container {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
border-radius: 4px;
font-size: 90%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 30px;
max-width: 400px;
}
.panel-container strong {
line-height: 20px;
}
.ratings-container {
display: flex;
margin: 20px 0;
}
.rating {
flex:1;
cursor: pointer;
padding: 20px;
margin: 10px 5px;
}
.rating:hover,
.rating.active {
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
.rating img {
width: 40px;
}
.rating small {
color: #555;
display: inline-block;
margin: 10px 0 0;
}
.rating:hover small,
.rating.active small {
color: #111
}
.btn {
background-color: #302d2b;
color: #fff;
border: 0;
border-radius: 4px;
padding: 12px 30px;
}
.btn:focus {
outline: 0;
}
.btn:active {
transform: scale(.98);
}
.fa-heart {
color: red;
font-size: 30px;
margin-bottom: 10px;
}
4. JavaScript
最后编写 JavaScript 函数:
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
const ratings = document.querySelectorAll('.rating');
const ratingsContainer = document.querySelector('.ratings-container');
const sendBtn = document.querySelector('#send');
const panel = document.querySelector('#panel');
let selectedRating = 'Satisfied';
ratingsContainer.addEventListener('click', (e) => {
if (e.target.parentNode.classList.contains('rating')) {
removeActive();
e.target.parentNode.classList.add('active');
selectedRating = e.target.nextElementSibling.innerHTML;
}
if (e.target.classList.contains('rating')) {
removeActive();
e.target.classList.add('active');
selectedRating = e.target.nextElementSibling.innerHTML;
}
})
sendBtn.addEventListener('click', (e) => {
panel.innerHTML = `
<i class="fas fa-heart"></i>
<strong>Thank You!</strong>
<br>
<strong>Feedback: ${selectedRating}</strong>
<p>We will use your feedback to improve our customer service.</p>`;
})
function removeActive() {
for (let i=0; i<ratings.length; i++) {
ratings[i].classList.remove('active');
}
}
最后, 完整的网页演示可见 此处
