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>
|