js实现toast轻提示功能

参考一：根据提示内容进行自动消失的轻提示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@keyframes show {
			    0% {
			        opacity: 0;
			    }
			    			 
			    100% {
			        opacity: 1;
			    }            
			}
			
			@keyframes hide {
			    0% {
			        opacity: 1;
			    }
						 
			    100% {
			        opacity: 0;
			    }
			} 
			
			.toast_box {
			    /* width: 100%; */
			    position: absolute;
			    bottom: 50%;
				left: 50%;
			    /* justify-content: center; */
				z-index: 10;
				transform: translate(-50%, -50%);
			    display: none;
			}
						 
			.toast_box p {
			    box-sizing: border-box;
			    padding: 10px 20px;
			    width: max-content;
				/* 提示框的背景色 */
			    background: #707070;
			    color: #fff;
			    font-size: 16px;
			    text-align: center;
			    border-radius: 6px;
			    opacity: 0.8;
			} 
			
			.toliet{
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="hotal">
			<!-- 提示框 -->
			<div class="toast_box">
			    <p id="toast"></p>
			</div>
			<button id="toliet" type="button" onclick="correct()">正常</button>
			<button id="toliet" type="button" onclick="warning()">警告</button>
			<button id="toliet" type="button" onclick="error()">报错异常</button>
		</div>
		<script type="text/javascript">
			//形参分别是: 提示内容,停留时间时间
			function toast(text, time) {
			    let toast = document.getElementById('toast');
			    let toast_box = document.getElementsByClassName('toast_box')[0];
			    toast.innerHTML = text;
			    toast_box.style.animation = 'show 1.5s'
			    toast_box.style.display = 'inline-block';
				setTimeout(function(){
					toast_box.style.animation = 'hide 1.5s'
					setTimeout(function(){
						toast_box.style.display = 'none';
					}, 1400)
				}, time)   
			}
			
			//调用
			function correct(){
				toast("is ok!",5000);
			}
			
			function warning(){
				toast("异常提醒",3000);
			}
			
			function error(){
				toast("报错",3000);
			}
			
		</script>
	</body>
</html>

效果：

(1)正常

（2）提醒

（3）错误

当你看到这种提示颜色的时候你能记得住刚刚弹出了啥提示不？？

参考二：根据提示内容和提示的字体颜色、背景色进行提示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@keyframes show {
			    0% {
			        opacity: 0;
			    }
			    			 
			    100% {
			        opacity: 1;
			    }            
			}
			
			@keyframes hide {
			    0% {
			        opacity: 1;
			    }
						 
			    100% {
			        opacity: 0;
			    }
			} 
			
			.toast_box {
			    /* width: 100%; */
			    position: absolute;
			    bottom: 50%;
				left: 50%;
			    /* justify-content: center; */
				z-index: 10;
				transform: translate(-50%, -50%);
			    display: none;
			}
						 
			.toast_box p {
			    box-sizing: border-box;
			    padding: 10px 20px;
			    width: max-content;
				/* 提示框的背景色 */
			    background: #707070;
			    color: #fff;
			    font-size: 16px;
			    text-align: center;
			    border-radius: 6px;
			    opacity: 0.8;
			} 
			
			.toliet{
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="hotal">
			<!-- 提示框 -->
			<div class="toast_box">
			    <p id="toast"></p>
			</div>
			<button id="toliet" type="button" onclick="correct()">正常</button>
			<button id="toliet" type="button" onclick="warning()">警告</button>
			<button id="toliet" type="button" onclick="error()">报错异常</button>
		</div>
		<script type="text/javascript">
			//形参分别是: 提示内容,时间,背景色,字体颜色
			function toast(text, time,bgcolor,color) {
			    let toast = document.getElementById('toast');
			    let toast_box = document.getElementsByClassName('toast_box')[0];
			    toast.innerHTML = text;
				toast.style.background = bgcolor;
				toast.style.color = color;
			    toast_box.style.animation = 'show 1.5s'
			    toast_box.style.display = 'inline-block';
				setTimeout(function(){
					toast_box.style.animation = 'hide 1.5s'
					setTimeout(function(){
						toast_box.style.display = 'none';
					}, 1400)
				}, time)   
			}
			
			//调用
			function correct(){
				toast("is ok!",5000,"#00CC00","#FFFFFF");
			}
			
			function warning(){
				toast("异常提醒",5000,"#FF6600","#FFFFFF");
			}
			
			function error(){
				toast("报错",5000,"#CC0000","#FFFFFF");
			}
			
		</script>
	</body>
</html>

效果：

扫描二维码关注公众号，回复： 11972399 查看本文章

（1）正常：

（2）警告

（3）错误

js实现toast轻提示功能

猜你喜欢