<HTML>
<body>
</body>
<script>
showNotification({
// shows an element with the text "Hello" near the right-top of the window
top: 10, // 10px from the top of the window (by default 0px)
right: 10, // 10px from the right edge of the window (by default 0px)
html: "Hello!", // the HTML of notification
className: "welcome" // an additional class for the div (optional)
});
function showNotification({top = 0, right = 0, className, html}) {
let notification = document.createElement('div');
notification.className = "notification";
if (className)//if notification class exist,
{
notification.classList.add(className);
}
notification.style.top = top + 'px';
notification.style.right = right + 'px';
notification.innerHTML = html;
document.body.append(notification);
setTimeout(() => notification.remove(), 1500);
let i = 1;
setInterval(() => {
showNotification({
top: 10,
right: 10,
html: 'Hello ' + i++,
className: "welcome"
});
}, 2000);
}
</script>
</HTML>
<body>
</body>
<script>
showNotification({
// shows an element with the text "Hello" near the right-top of the window
top: 10, // 10px from the top of the window (by default 0px)
right: 10, // 10px from the right edge of the window (by default 0px)
html: "Hello!", // the HTML of notification
className: "welcome" // an additional class for the div (optional)
});
function showNotification({top = 0, right = 0, className, html}) {
let notification = document.createElement('div');
notification.className = "notification";
if (className)//if notification class exist,
{
notification.classList.add(className);
}
notification.style.top = top + 'px';
notification.style.right = right + 'px';
notification.innerHTML = html;
document.body.append(notification);
setTimeout(() => notification.remove(), 1500);
let i = 1;
setInterval(() => {
showNotification({
top: 10,
right: 10,
html: 'Hello ' + i++,
className: "welcome"
});
}, 2000);
}
</script>
</HTML>
/*
this isnt complete version of the solution to the task on the website
but like, when the answer is given on plunker and more than one page of HTML
i dont really want to follow all up.
i just wonder the part that i imaged is similar in real.
didnt really know that showNotification and the variable top and right
but it was an object which stores that two variables.
create an element by createElement, change or add the className to the list using notification.className.
dont forget to append the object using document.body.append(obj)
*/
댓글
댓글 쓰기