js 简单的消息提示框

迷南。 2023-10-13 21:38 45阅读 0赞

**简介：**

有时候要在页面上显示消息，用alert()，体验不是很友好，每次要手动关闭，这里用js写一个

**效果：**

![888c45db9508413a8696706769a954b9.gif][]

**核心代码：**

/**
     *  显示消息
     * @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>

[888c45db9508413a8696706769a954b9.gif]: https://img-blog.csdnimg.cn/888c45db9508413a8696706769a954b9.gif