Introduction:
Sometimes it is necessary to display a message on the page, use alert(), the experience is not very friendly, every time it needs to be closed manually, here is a code written in js
Effect:
Core code:
/**
* 显示消息
* @param {Object} rate
*/
function showMessage(msg) {
const message = document.createElement('div');
message.style.position = 'fixed';
message.style.bottom = '10px';
message.style.right = '10px';
message.style.backgroundColor = '#fff';
message.style.borderRadius = '3px';
message.style.padding = '5px';
message.textContent = `${msg}`;
document.body.appendChild(message);
// 1秒后移除消息提示
setTimeout(() => {
document.body.removeChild(message);
}, 1000);
}
Call method:
showMessage('这是一条消息！');Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
/**
* 显示消息
* @param {Object} rate
*/
function showMessage(msg) {
const message = document.createElement('div');
message.style.position = 'fixed';
message.style.bottom = '10px';
message.style.right = '10px';
message.style.backgroundColor = '#fff';
message.style.borderRadius = '3px';
message.style.padding = '5px';
message.textContent = `${msg}`;
document.body.appendChild(message);
// 1秒后移除消息提示
setTimeout(() => {
document.body.removeChild(message);
}, 1000);
}
// 消息提示调用测试
var i = 0;
setInterval(function() {
showMessage('这是一条消息！' + parseFloat(i += 0.1).toFixed(1));
}, 600)
</script>
</html>