未命名 5vwbay，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <button onclick="showWindowSize()">显示窗口大小</button>
<button onclick="redirectAfter3Sec('https://example.com')">3秒后跳转</button>
<p id="browser-info">浏览器信息</p>
<div id="random-bg" style="width: 100%; height: 100px;"></div>
  
  <script src="./index.js"></script>
</body>

</html>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            body {
  background-color: #fefefe;
}

.title {
  margin-top: 95px;
  text-align: center;
}

.desc {
  color: #777;
  text-align: center;
}

.icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 30px auto;
}

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

            
            function showWindowSize() {
  alert(`窗口尺寸：${window.innerWidth} x ${window.innerHeight}`);
}

function redirectAfter3Sec(url) {
  setTimeout(() => {
    window.location.href = url;
  }, 3000);
}

function detectBrowser() {
  const ua = navigator.userAgent;
  let browser = "未知浏览器";

  if (ua.includes("Firefox")) {
    browser = "Mozilla Firefox";
  } else if (ua.includes("Edg")) {
    browser = "Microsoft Edge";
  } else if (ua.includes("Chrome")) {
    browser = "Google Chrome";
  }

  document.getElementById("browser-info").innerText = `你正在使用：${browser}`;
}

function randomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

function changeBackgroundColor() {
  const div = document.getElementById("random-bg");
  div.style.backgroundColor = randomColor();
}

// 页面加载时检测浏览器
window.onload = detectBrowser;