JavaScript的toast

Posted 2022-01-31 码上暴富

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript的toast相关的知识，希望对你有一定的参考价值。

javascript的toast

JavaScript的toast

JavaScript的toast

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js的toast</title>
</head>
<!-- toast的css -->
<style type="text/css">
    @keyframes show 
        0% 
            opacity: 0;
        

        100% 
            opacity: 1;
        
    
    @keyframes hide 
        0% 
            opacity: 1;
        

        100% 
            opacity: 0;
        
    
    .toast_box 
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /*background-color: rgba(0,0,0,0.5);*/
        overflow: hidden;
        display: none;
    
    .toast_box p 
        position: absolute;
        bottom: 50%;
        left: 50%;
        z-index: 10;
        transform: translate(-50%, -50%);

        box-sizing: border-box;
        padding: 10px 20px;
        width: 150px;
        /* 提示框的背景色 */
        background: #707070;
        color: #fff;
        font-size: 16px;
        text-align: center;
        border-radius: 6px;
        opacity: 0.8;
    
</style>
<body>
    <button class="btn">click me</button>
    <!-- 提示 -->
    <div class="toast_box">
        <p id="toast"></p>
    </div>
</body>
<!--JQuery-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    // toast 形参分别是: 提示内容,停留时间
    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)
    
    $('.btn').click(function () 
        toast("hello", 1000)
    )
</script>
</html>

结果

以上是关于JavaScript的toast的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript的toast

Toast Javascript关闭定义

TypeScript(JavaScript)封装一个Toast组件