Home / JS / smartupworld | Creating a Notification through JavaScript and blink it every 1.5 second

smartupworld | Creating a Notification through JavaScript and blink it every 1.5 second

Style

.notification {
position: fixed;
z-index: 1000;
padding: 5px;
border: 1px solid black;
font-size: 20px;
background: white;
text-align: center;
}
.welcome {
background: #b80000;
color: yellow;
}

JS –

function showNotification({top=0,right=0,background="#ededed",color="blue",html=""}){
let notification = document.createElement('div');
notification.className = "notification";
notification.innerHTML = html;
notification.style.top = top+"px";
notification.style.color = color;
notification.style.right = right+"px";
notification.style.background = background;
document.body.append(notification);
setTimeout(()=>notification.remove(),1000);}
let i = 1;
setInterval( ()=>showNotification({
top: 0,
right: 0,
color: 'yellow',
background: "red",
html: "hellow "+ i++
}
), 1500 );

You can use setTimeout function instead of  setInterval to show notification only once

setTimeout(()=>showNotification({
top: 0,
right: 0,
color: 'yellow',
background: "red",
html: "hellow "+ i++
}), 1500 );

Hits: 41

%d bloggers like this: