😍Làm chức năng thông báo khách hàng đăng ký namkhoahanoi.vn (ok)
PreviousjQuery Plugin To Create Animated Placeholders - placeholderTypewriter (ok)NextTencent Captcha Demo (ok)
Last updated
Last updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.customer-action-notify {
position: fixed;
bottom: -100px;
z-index: 1000;
margin-bottom: 2rem;
margin-left: 2rem
}
.customer-action-notify .notify-container {
border-radius: 50px;
overflow: hidden;
background-color: #5C470A;
color: rgb(255, 255, 255);
display: flex;
align-items: center
}
.customer-action-notify .user-image {
width: 3.5rem;
height: 3.5rem;
border-radius: 50px;
overflow: hidden;
margin: .3em;
position: relative;
}
.customer-action-notify .user-image img {
width: 100%;
height: 100%;
object-fit: cover
}
.customer-action-notify .user-image:after {
content: "*";
position: absolute;
background-color: rgba(52, 51, 51, 0.5);
width: 100%;
height: 100%;
border-radius: 100%;
z-index: 1;
left: 0;
top: 0;
text-align: center;
font-size: 80px;
font-family: sans-serif;
}
.customer-action-notify .user-info {
padding-left: .5em;
padding-right: 4em;
font-size: 13px;
line-height: 1.5em
}
.customer-action-notify .user-name {
font-weight: 700
}
@keyframes virtualNotifyShow {
0% {
opacity: 0;
bottom: -100px
}
100% {
opacity: 1;
bottom: 0
}
}
@keyframes virtualNotifyHide {
0% {
opacity: 1;
bottom: 0
}
100% {
opacity: 0;
bottom: -100px
}
}
</style>
</head>
<body>
<div id="GFG_DOWN">
<div id="customer-action-notify" class="customer-action-notify" style="animation: 2s linear 0s 1 normal forwards running virtualNotifyShow;">
<div class="notify-container">
<div class="user-image">
<img src="https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/default.jpg" alt="default">
</div>
<div class="user-info">
<div class="user-name"><span>Nguyễn Văn An - 0329783***</span></div>
<div class="user-description"><span>Đăng ký tư vấn</span></div>
<div class="user-action-time"><span>Lúc 8h 32 phút ngày 22-04-2023</span></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var lists = [
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/1.jpg",
"name": "Trần Bá Tháp - 0329739***",
"action": "Đăng ký khám Bao Quy Đầu",
"time": "Gần 15 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/2.jpg",
"name": "Phạm Ngọc Bình - 0913456***",
"action": "Đăng ký khám Bệnh Lậu Nam",
"time": "Gần 24 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/3.jpg",
"name": "Lê Văn Hiền - 0974566***",
"action": "Đăng ký khám Đau tinh hoàn",
"time": "Gần 34 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/4.jpg",
"name": "Nguyễn Bảo Việt - 0946445***",
"action": "Đăng ký khám Đau tinh hoàn",
"time": "Gần 18 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/5.jpg",
"name": "Ngô Đắc Động - 0964545***",
"action": "Đăng ký khám Bệnh Lậu Nam",
"time": "Gần 22 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/6.jpg",
"name": "Nguyễn Văn Đắc - 0395674***",
"action": "Đăng ký Khuyến mãi",
"time": "Gần 32 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/7.jpg",
"name": "Hoàng Bảo Ngọc - 0374634***",
"action": "Đăng ký khám Mộng Tinh",
"time": "Gần 17 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/8.jpg",
"name": "Hồ Văn Kiểm - 0916866***",
"action": "Đăng ký khám Mụn dương vật",
"time": "Gần 26 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/9.jpg",
"name": "Lê Văn Đoàn - 0934555***",
"action": "Đăng ký khám Mụn dương vật",
"time": "Gần 48 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/10.jpg",
"name": "Trần Duy Văn - 0329734***",
"action": "Đăng ký khám Tiểu buốt",
"time": "Gần 15 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/11.jpg",
"name": "Nguyễn Đức Thịnh - 0912334***",
"action": "Đăng ký khám Tiểu buốt",
"time": "Gần 52 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/12.jpg",
"name": "Nguyễn Văn An - 0354456***",
"action": "Đăng ký khám Tiểu Nhiều",
"time": "Gần 53 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/13.jpg",
"name": "Trần Trung Hiếu - 0916666***",
"action": "Đăng ký khám Tiểu Nhiều",
"time": "Gần 11 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/14.jpg",
"name": "Nguyễn Văn Thanh - 0345678***",
"action": "Đăng ký khám Tiểu Nhiều",
"time": "Gần 42 phút trước"
},
{
"image": "https://namkhoahanoi.vn/wp-content/themes/cream-magazine-child/assets/registers/namkhoa/15.jpg",
"name": "Văn Văn Hiếu - 0925856***",
"action": "Đăng ký khám Tiểu ra máu",
"time": "Gần 43 phút trước"
}
];
var actionnotifys = document.createElement("div");
var containerc = document.createElement("div");
var userimgc = document.createElement("div");
var imgc = document.createElement("img");
var userinfoc = document.createElement("div");
var namec = document.createElement("div");
var descriptionc = document.createElement("div");
var actiontimec = document.createElement("div");
var downc = document.getElementById("GFG_DOWN");
var showHid = document.getElementById("customer-action-notify");
actionnotifys.setAttribute("class", "customer-action-notify");
actionnotifys.setAttribute("style", "animation: 2s linear 0s 1 normal forwards running virtualNotifyShow");
containerc.setAttribute("class", "notify-container");
userimgc.setAttribute("class", "user-image");
userinfoc.setAttribute("class", "user-info");
namec.setAttribute("class", "user-name");
descriptionc.setAttribute("class", "user-description");
actiontimec.setAttribute("class", "user-action-time");
setInterval(function() {
var random = Math.floor(Math.random() * lists.length);
imgc.setAttribute("src", lists[random].image);
userimgc.append(imgc);
namec.innerHTML = "";
namec.append(lists[random].name);
userinfoc.append(namec);
descriptionc.innerHTML = "";
descriptionc.append(lists[random].action);
userinfoc.append(descriptionc);
actiontimec.innerHTML = "";
actiontimec.append(lists[random].time);
userinfoc.append(actiontimec);
containerc.append(userimgc);
containerc.append(userinfoc);
actionnotifys.append(containerc);
showHid.setAttribute('style','display: none');
downc.append(actionnotifys);
},
30000
);
</script>
</body>
</html>