参考一：根据提示内容进行自动消失的轻提示
<!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>
效果：
（1）正常：
（2）警告
（3）错误
