BOM

// 获取视口尺寸
console.log(`视口宽度: ${window.innerWidth}px, 高度: ${window.innerHeight}px`);

// 获取滚动位置
window.addEventListener('scroll', () => {
  console.log(`已滚动: X-${window.scrollX}, Y-${window.scrollY}`);
});

// 定时器
const timeoutId = setTimeout(() => {
  console.log('这条消息将在 2 秒后显示一次');
}, 2000);

const intervalId = setInterval(() => {
  console.log('这条消息每秒都会显示');
}, 1000);

// 5 秒后停止循环
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

// 确认对话框
if (window.confirm('你确定要继续吗？')) {
  console.log('用户点击了确定');
} else {
  console.log('用户点击了取消');
}

// 打开一个新窗口（通常会被浏览器拦截，需要用户触发）
document.getElementById('myButton').addEventListener('click', () => {
  const newWindow = window.open('https://www.example.com', 'exampleWindow', 'width=600,height=400');
  // 2秒后关闭它
  setTimeout(() => newWindow.close(), 2000);
});

// 平滑滚动到页面顶部
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

// 获取浏览器和系统信息
console.log(`用户代理: ${navigator.userAgent}`);
console.log(`操作系统: ${navigator.platform}`);
console.log(`浏览器语言: ${navigator.language}`);
console.log(`Cookie 是否启用: ${navigator.cookieEnabled}`);
console.log(`是否在线: ${navigator.onLine}`);

// 地理定位（需要 HTTPS 环境或在 localhost 下）
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => { // 成功回调
      console.log(`纬度: ${position.coords.latitude}`);
      console.log(`经度: ${position.coords.longitude}`);
      console.log(`精度: ${position.coords.accuracy} 米`);
    },
    (error) => { // 失败回调
      console.error(`获取位置失败 (${error.code}): ${error.message}`);
    },
    { // 选项
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    }
  );
} else {
  console.error('该浏览器不支持地理定位功能');
}

// 解析当前 URL
console.log(`完整 URL: ${location.href}`);
console.log(`协议: ${location.protocol}`);
console.log(`主机: ${location.host}`);
console.log(`路径: ${location.pathname}`);
console.log(`查询参数: ${location.search}`);
console.log(`哈希: ${location.hash}`);

// 解析查询字符串 (例如: ?name=John&age=30)
const urlParams = new URLSearchParams(location.search);
const name = urlParams.get('name'); // "John"
const age = urlParams.get('age');   // "30"
console.log(`参数 name: ${name}, age: ${age}`);

// 页面导航
// location.assign('https://www.newsite.com'); // 跳转到新页面，可回退

// 重定向（替换当前历史记录）
// location.replace('https://www.newsite.com'); // 跳转到新页面，不可回退

// 刷新页面
// location.reload();      // 可能从缓存 reload
// location.reload(true); // 从服务器强制 reload

// 历史记录长度
console.log(`历史记录数: ${history.length}`);

// 导航
// history.back();    // 后退一页
// history.forward(); // 前进一页
// history.go(-2);    // 后退两页

// 添加和修改历史记录（用于单页面应用 SPA）
// 假设当前 URL 是 /page1.html
history.pushState({userId: 123}, '', '/page2.html'); // URL 变为 /page2.html，但不加载它
// 此时可以手动更新页面内容为“page2”的内容

// 监听 popstate 事件，当用户点击前进/后退按钮时触发
window.addEventListener('popstate', (event) => {
  // event.state 是 pushState 时传入的 state 对象
  console.log('位置变化了', event.state);
  // 根据 event.state 或 location 更新页面内容
});

// 获取屏幕信息
console.log(`屏幕分辨率: ${screen.width}x${screen.height}`);
console.log(`可用区域: ${screen.availWidth}x${screen.availHeight}`);
console.log(`色彩深度: ${screen.colorDepth} 位`);

// 可以根据屏幕信息调整窗口位置或大小
const left = (screen.width - 600) / 2; // 居中一个 600px 宽的窗口
const top = (screen.height - 400) / 2; // 居中一个 400px 高的窗口
// window.open('popup.html', '_blank', `width=600,height=400,left=${left},top=${top}`);

const userPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;