提示功能（纯原生）"/>
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>
效果：
（1）正常：
（2）警告
（3）错误
更多推荐
js实现toast轻提示功能（纯原生）
发布评论