js 简单的消息提示框

最新推荐文章于 2024-04-20 14:57:38 发布

王家五哥

最新推荐文章于 2024-04-20 14:57:38 发布

阅读量748

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_36521848/article/details/131850109

版权

简介：

有时候要在页面上显示消息，用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>