简介:
有时候要在页面上显示消息,用alert(),体验不是很友好,每次要手动关闭,这里用js写一个
效果:
核心代码:
/**
* 显示消息
* @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);
}
调用方式:
showMessage('这是一条消息!');
代码示例:
<!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>