JavaScript实现类似alert（）函数的效果，传入不同的值，显示状态不同。

★何处繁华笙歌落♡

已于 2022-02-22 12:34:31 修改

阅读量588

点赞数

文章标签： css javascript html

于 2022-02-22 12:28:03 首次发布

本文链接：https://blog.youkuaiyun.com/Dgjcrhjnbfgjj/article/details/123065392

版权

本文介绍了如何使用HTML、CSS和JavaScript实现网页上的按钮点击事件，展示了四个不同类型的提示消息（成功、警告、消息和错误），并使用定时器控制消息显示和隐藏的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1 {
            height: 70px;
            width: 200px;
            border: 1px solid darkorchid;
            background-color: deepskyblue;
        }

        .box1 {
            display: inline-block;
            margin-top: 20px;
            margin-left: 5px;
        }

        .modal {
            display: none;
            /* 默认隐藏 */
            position: fixed;
            /* 根据浏览器定位 */
            right: 3px;
            width: 200px;
            /* 全宽 */
            height: 50px;
            /* 全高 */
            border: 1px solid cornflowerblue;
            text-align: center;
        }

        #news1 {
            top: 2px;
            background-color: chartreuse;
        }

        #news2 {
            top: 50px;
            background-color: crimson;
        }

        #news3 {
            margin-top: 22px;
            background-color: cyan;
        }

        #news4 {
            margin-top: 73px;
            background-color: darkorange;
        }
    </style>
</head>

<body>
    <div id="div1" class="box">
        <div class="box1">
            <button id="but1" onclick="but1()">成功</button>
            <button id="but2" onclick="but2()">警告</button>
            <button id="but3" onclick="but3()">消息</button>
            <button id="but4" onclick="but4()">错误</button>
        </div>
    </div>
    <div class="modal" id="news1">这是一条成功的提示消息</div>
    <div class="modal" id="news2">这是一条警告的提示消息</div>
    <div class="modal" id="news3">这是一条消息的提示消息</div>
    <div class="modal" id="news4">这是一条错误的提示消息</div>
    <script>
        function but1() {
            var a = document.getElementById('news1');
            a.style.display = "block";
            setTimeout("document.getElementById('news1').style.display='none'",2000);
        }
        function but2() {
            var b = document.getElementById('news2')
            b.style.display = "block";
            setTimeout("document.getElementById('news2').style.display='none'",2000);
        }
        function but3() {
            var c= document.getElementById('news3');
            c.style.display = "block";
            setTimeout("document.getElementById('news3').style.display='none'",2000);
        }
        function but4() {
            var d = document.getElementById('news4');
            d.style.display = "block";
            setTimeout("document.getElementById('news4').style.display='none'",2000);
        }
    </script>
</body>

</html>