JavaScript的toast

最新推荐文章于 2024-04-17 10:09:46 发布

码上暴富

最新推荐文章于 2024-04-17 10:09:46 发布

阅读量1k

点赞数 1

分类专栏： JavaScript小功能案例文章标签： javascript

本文链接：https://blog.csdn.net/weixin_53483257/article/details/122127959

版权

JavaScript小功能案例专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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>

结果
在这里插入图片描述

码上暴富

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript的toast

JavaScript的toastJavaScript的toastJavaScript的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-sc
复制链接

扫一扫