帮我写几行html的js部分

collinchen1218 · 发表于 2024-5-24 21:33

要求：打开网页，进行检测，如果发现问题，自动置顶一个弹窗（或者图片），要全覆盖网页，红色加粗显示：你好，你的行为被发现，现已拦截
然后，等待3秒，跳转回上一级网页

cattie · 发表于 2024-5-24 21:48

单纯的js无法做到置顶弹窗这一点，可以配合css加上模糊以及遮罩效果（初始为display：none状态，后续再通过js修改style）。

CycleKid · 发表于 2024-5-24 21:49

// 监测网页出现问题时弹出警告
function detectAndAlert() {
  // 检测到问题时
  if (/* 在此处检测到问题 */) {
// 创建一个全屏覆盖的弹窗
var popup = document.createElement('div');
popup.style.position = 'fixed';
popup.style.top = 0;
popup.style.left = 0;
popup.style.width = '100%';
popup.style.height = '100%';
popup.style.backgroundColor = 'rgba(255, 0, 0, 0.8)';
popup.style.zIndex = '9999';
popup.style.display = 'flex';
popup.style.justifyContent = 'center';
popup.style.alignItems = 'center';
popup.style.color = 'white';
popup.style.fontSize = '24px';
popup.style.fontWeight = 'bold';
popup.innerHTML = '你好，你的行为被发现，现已拦截';
document.body.appendChild(popup);

// 等待3秒后返回上一级网页
setTimeout(function() {
   window.history.go(-1);
}, 3000);
  }
}

collinchen1218 · 发表于 2024-5-24 21:52

cattie 发表于 2024-5-24 21:48
单纯的js无法做到置顶弹窗这一点，可以配合css加上模糊以及遮罩效果（初始为display：none状态，后续再通过 ...

没事，那配合css怎么做？

XDXT · 发表于 2024-5-24 22:01

找个GPT帮你生成下不就结了？

你还可以要求它进行简单的样式修改。

hbe · 发表于 2024-5-24 22:25

是全屏的弹窗吧

collinchen1218 · 发表于 2024-5-24 22:26

hbe 发表于 2024-5-24 22:25
是全屏的弹窗吧

对的，最好，实在不行可以降低要求

小兴818 · 发表于 2024-5-24 22:35

用提示弹窗就毫无难度alert

Delevin · 发表于 2024-5-24 22:38

2楼的那个不是就可以吗？你只需要改一下setTimeout 那一段。

cfnm123 · 发表于 2024-5-24 23:09

本帖最后由 cfnm123 于 2024-5-24 23:10 编辑

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>检测与响应示例</title>
    <style>
        /* 背景遮罩层样式 */
        #mask {
            position: fixed;
            display: none;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景作为遮罩 */
            z-index: 9998; /* 在覆盖层之下 */
        }

        /* 全屏覆盖层样式 */
        #overlay {
            position: fixed;
            display: none;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 0, 0, 0.5); /* 半透明红色背景 */
            z-index: 9999; /* 确保覆盖在遮罩之上 */
            backdrop-filter: blur(5px); /* 添加背景模糊效果 */
            text-align: center;
            padding-top: 15%;
        }
        
        /* 弹窗内容样式 */
        #overlay > div {
            font-size: 24px;
            color: white;
            font-weight: bold;
            text-shadow: 1px 1px 2px black;
        }
    </style>
</head>
<body>

<!-- 背景遮罩层 -->
<div id="mask"></div>

<!-- 全屏覆盖层 -->
<div id="overlay">
    <div>你好，你的行为被发现，现已拦截</div>
</div>

<script>
    window.onload = function() {
        var problemDetected = true; // 实际应用中，根据实际情况设置这个值

        if (problemDetected) {
            var mask = document.getElementById('mask');
            var overlay = document.getElementById('overlay');
            mask.style.display = 'block'; // 显示遮罩层
            overlay.style.display = 'block'; // 显示覆盖层

            setTimeout(function() {
                window.history.back(); // 返回上一页
            }, 3000);
        }
    };
</script>

</body>
</html>

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 帮我写几行html的js部分

免费评分