原生轻提示框

css部分

<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>

html

<div class="toast_box">

            <p id="toast"></p>

        </div>

js

   <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);

            }    

        </script>