master

分支 (1)

管理

管理

master

axios_test
/
弹窗.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dialog {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="dialog" class="dialog">
        <p>这是一个弹窗</p>
        <button class="ok">确认</button>
        <button class="no">取消</button>
    </div>
</body>
<script>
    setTimeout(() => {
        document.getElementById("dialog").style.display = "block";
        document.querySelector(".ok").addEventListener('click', () => {
            document.getElementById("dialog").style.display = "none";
        })
        document.querySelector(".no").addEventListener('click', () => {

            document.getElementById("dialog").style.display = "block";
            // 定义一个名为getRandomInt的函数，用于生成指定范围min到max之间的随机整数
            function getRandomInt(min, max) {
                min = Math.ceil(min); // 向上取整，确保最小值为整数
                max = Math.floor(max); // 向下取整，确保最大值为整数
                return Math.floor(Math.random() * (max - min + 1)) + min; // 生成随机数
            }

            var randomRange = getRandomInt(-200, 200); // 调用随机整数


            var element = document.querySelector('.dialog'); // 根据类名选择元素

            var styles = window.getComputedStyle(element); // 获取计算样式对象

            var top = styles.getPropertyValue('top'); // 获取top属性的值
            var topNum = parseInt(top); // 将top属性值转换为整数
            var left = styles.getPropertyValue('left');
            var leftNum = parseInt(left);
            topNum += randomRange; // 执行加法操作，假设randomRange是一个变量或数字
            leftNum += randomRange;
            if(topNum<=50 || leftNum<=50 ){
                return
            }else{
                element.style.top = topNum + 'px'; // 将新的top值赋给元素的样式属性
                element.style.left = leftNum + 'px';
            }
            console.log(topNum,leftNum);


        })

    }, 100)

</script>

</html>