Mai Việt SơnMai Việt Sơn

Thiết kế website wordpress, mẹo hay, plugins đáp ứng nhu cầu.

Một sản phẩm của Mai Việt Sơn

Jan 8, 2022tips283 từ trong 2 phút


(JavaScript) Làm tính năng " Khách Đăng ký thành công" giống Ladipage

Hãy xem video nếu cần hiểu

Copy code về sửa chơi này

HTML/CSS/JSNguồn: Mai Việt Sơn
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notify</title>
</head>
<body>
<div id="mvs__notify">
<h3 id="mvs__title">Mai Viet Son</h3>
<p>Vừa đăng ký thành công khóa học JS cơ bản</p>
</div>
<style>
#mvs__notify {
position: fixed;
bottom: 20px;
left: 20px;
line-height: 10px;
background: #002d5f;
color: white;
padding: 5px20px;
border-radius: 20px;
transition: 2sease;
opacity: 0;
}

.mvs__show {
opacity: 1 !important;
}
</style>
<script>
varmvsNotify = {
dataCustomer: [
'Mai Việt Sơn',
'Nguyễn Tuấn Anh',
'Lương Xuân Trường',
'Quế Ngọc Hải',
'Park Hang Seo',
'Nguyễn Hữu Thắng',
'Nguyễn Quang Hải'
],
dataTitle: 'Mai Việt Sơn',
mvsBox: document.getElementById('mvs__notify'),
mvsCus: document.getElementById('mvs__title'),
init: function() {
varnewShow = this.show.bind(this);
varnewHide = this.hide.bind(this);
varTimer = setInterval(function() {
newShow();
setTimeout(function() {
newHide();
}, 3000);
}, 8000);
},
show: function() {
this.mvsCus.innerText = this.dataCustomer[this.getIndex()];
this.mvsBox.classList.add('mvs__show');
},
hide: function() {
this.mvsBox.classList.remove('mvs__show');
},
getIndex: function() {
returnMath.floor(Math.random() * this.dataCustomer.length);
}
}
mvsNotify.init();
</script>
</body>
</html>

Mua cho tôi 1 cốc coffee ☕.