当前位置：网站首页>DOM案例：10秒倒计时-写跳转页面相关的知识

DOM案例：10秒倒计时-写跳转页面相关的知识

2022-07-26 18:26:00 【前端小草籽】

1.弹窗(有点类似于 alert )

window.confirm()方法显示一个具有一个可选消息和两个按钮 (确定和取消) 的模态对话框。

因为是window方法，不写window ，只写 confirm也可以出现的弹框，点击确定就返回true，取消就返回false

语法：

result = window.confirm(message);

message 是要在对话框中显示的可选字符串。
result 是一个布尔值，表示是选择确定还是取消（true 表示 OK）。

<body>
    <style>
        *{margin: 0;padding: 0;}
        /* 设置外部的大盒子样式 */
        .box{
            width: 200px;
            height: 300px;
            background-color: rgb(238, 238, 238);
            /* 居中 */
            margin: 100px auto;   
        }
        /* 设置每一项的样式 */
        li{
            /* 清除小圆点 */
            list-style: none;
            /* 设置内边距 上下为10px,左右为10px*/
            padding: 10px 10px;
        }
        /* 设置按钮那一项的样式 */
        #btn{
            /* 设置弹性布局，里面的元素为弹性子元素 */
            display:flex;
            /* 距离li部分的距离 */
            margin-top: 30px;
            /* 设置弹性子元素的排布 */
            /* 每个项目两侧的间隔相等 */
            justify-content: space-around;
        }
    </style>
    <div class="box">
        <ul>
            <li>商品:Web前端课程</li>
            <li>原价:1980元</li>
            <li>现价:1.98元</li>
            <li>内容:HTML,CSS,JS</li>
            <li>地址:重庆市垫江县</li>
        </ul>
        <div id="btn">
            <button id="btn1">取消</button>
            <button id="btn2">支付</button>
        </div>
    </div>
    <script>
        //业务需求，一点击支付按钮，弹出“谢谢你的选择”，页面跳转到支付成功的页面
        //给支付按钮绑定点击事件
        let zF = document.querySelector('#btn2');
        zF.onclick = function(){
            let res = window.confirm('你确定要支付么？');
            if(res){
                console.log('点击了确定,返回true');
            }else{
                console.log('点击了取消,返回了false');
            }
        }
    </script>
</body>