html代码恶搞｜前端趣味代码实验与技术文化深度解析

// 注入自定义右键菜单
const menu = document.createElement('div');
menu.id = 'custom-context-menu';
menu.style.cssText = 'position:fixed;background:#fff;border:1px solid #ccc;box-shadow:2px 2px 8px rgba(0,0,0,0.2);padding:0.5rem;min-width:150px;display:none;z-index:9999';
document.body.appendChild(menu);
document.oncontextmenu = e => {
  e.preventDefault();
  menu.innerHTML = `
    📋 复制当前URL
    ↗️ 新窗口打开
    📄 复制整页HTML
    🔍 控制台打印
  `;
  menu.style.left = e.clientX + 'px';
  menu.style.top = e.clientY + 'px';
  menu.style.display = 'block';
};
document.addEventListener('click', () => menu.style.display = 'none');

p, span, div, li, a, h1, h2, h3, h4, h5, h6, button, input, label {
  font-family: 'Comic Sans MS', 'Comic Sans', cursive !important;
  font-size: 1.2em !important;
}
p:not(.nav-item):not(.form-control),
span:not(.nav-item):not(.form-control) {
  font-family: 'Comic Sans MS', 'Comic Sans', cursive !important;
}

// 替换所有H2标题
document.querySelectorAll('h2').forEach(h2 => {
  const originalText = h2.textContent;
  if (originalText.includes('重要通知')) {
    h2.innerHTML = '⚠️ 重要通知（伪装成公告的营销软文）';
  }
});
// 安全替换（保留事件监听器）
function safeReplaceText(element, map) {
  const clone = element.cloneNode(true);
  clone.childNodes.forEach(node => {
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = node.textContent.replace(
        new RegExp(Object.keys(map).join('|'), 'g'),
        match => map[match]
      );
    }
  });
  element.parentNode.replaceChild(clone, element);
}

console.log(
  `%c 🌐 欢迎来到 html代码恶搞实验室
%c 本页面共加载 ${document.images.length} 张图片
%c DOM深度：${document.body.querySelectorAll('*').length} 个节点
%c 提示：右键菜单已劫持，请尝试新功能`,
  'color:#3b82f6;font-weight:bold;font-size:16px;',
  'color:#4a5568;font-size:12px;',
  'color:#2d3748;font-size:12px;',
  'color:#718098;font-size:12px;'
);
// 动态获取页面信息
console.table(
  Array.from(document.links).map(a => ({
    文本: a.textContent.trim().slice(0, 30),
    链接: a.href,
    目标: a.target || '_self'
  })),
  ['文本', '链接', '目标']
);

// 写入“黑话”
localStorage.setItem('secret_code', '韭菜永不倒');
// 读取并显示
const code = localStorage.getItem('secret_code');
if (code === '韭菜永不倒') {
  document.body.style.backgroundColor = '#f56565';
  alert('发现同道中人！加群暗号：永不倒');
}

body {
  filter: invert(1) !important;
  transform: rotate(180deg) !important;
}
body * {
  transform: rotate(-180deg) !important;
  display: inline-block !important;
}

document.addEventListener('copy', e => {
  const selection = window.getSelection().toString();
  if (!selection) return;
  e.preventDefault();
  e.clipboardData.setData('text/plain',
    selection + '\n\n—— 来源：html代码恶搞实验室（https://www.minivandaily.com）'
  );
  e.clipboardData.setData('text/html',
    selection + '

—— 来源：html代码恶搞实验室'
  );
  alert('内容已自动添加来源说明');
});

function buildDOMTimeline(root = document.body, depth = 0) {
  const timeline = [];
  function traverse(node, depth) {
    if (node.nodeType === Node.ELEMENT_NODE) {
      timeline.push({
        标签: node.tagName,
        ID: node.id || '-',
        类名: node.className || '-',
        深度: depth
      });
      Array.from(node.children).forEach(child => traverse(child, depth + 1));
    }
  }
  traverse(root, 0);
  return timeline;
}
// 在控制台显示
console.table(buildDOMTimeline(), ['深度', '标签', 'ID', '类名']);
// 页面内渲染（示例）
const timelineEl = document.createElement('div');
timelineEl.style.cssText = 'position:fixed;bottom:0;right:0;width:300px;height:400px;overflow-y:auto;background:#fff;border:1px solid #ccc;z-index:9999';
document.body.appendChild(timelineEl);
const list = document.createElement('ul');
list.style.cssText = 'margin:0;padding:0.5rem';
buildDOMTimeline().forEach(item => {
  const li = document.createElement('li');
  li.textContent = `${'─'.repeat(item.深度 * 2)}<${item.标签}>`;
  li.style.cssText = 'font-family:monospace;font-size:12px;';
  list.appendChild(li);
});
timelineEl.appendChild(list);

// 劫持navigator.userAgent
Object.defineProperty(navigator, 'userAgent', {
  get: () => 'Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko'
});
// 强制刷新页面
location.reload();

// 注册Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js').then(() => console.log('SW已注册'));
}
// sw.js 内容
self.addEventListener('fetch', e => {
  // 模拟慢速网络（2秒延迟）
  e.respondWith(
    new Promise(resolve => setTimeout(() => {
      resolve(fetch(e.request));
    }, 2000))
  );
});

function generateWordCloud() {
  const text = document.body.innerText.toLowerCase();
  const words = text.replace(/[^\u4e00-\u9fa5a-z0-9]/g, ' ').split(/\s+/);
  const freq = {};
  words.forEach(w => {
    if (w.length > 1 && !/^\d+$/.test(w)) freq[w] = (freq[w] || 0) + 1;
  });
  const maxFreq = Math.max(...Object.values(freq));
  const cloud = document.createElement('div');
  cloud.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;height:60vh;overflow:hidden;';
  Object.entries(freq).forEach(([word, count], i) => {
    const span = document.createElement('span');
    span.textContent = word;
    span.style.cssText = `
      position:absolute;
      font-size: ${1 + (count / maxFreq) * 4}rem;
      opacity: ${0.3 + (count / maxFreq) * 0.7};
      transform: rotate(${Math.random() * 40 - 20}deg);
      left: ${Math.random() * 80}%;
      top: ${Math.random() * 60}%;
    `;
    cloud.appendChild(span);
  });
  document.body.appendChild(cloud);
}
// 执行
generateWordCloud();

function createProgressIndicator() {
  const indicator = document.createElement('div');
  indicator.style.cssText = `
    position:fixed;top:0;left:0;height:4px;background:#3b82f6;
    transition:width 0.2s ease;transform-origin:left;
  `;
  document.body.appendChild(indicator);
  let progress = 0;
  const update = () => {
    if (document.readyState === 'loading') {
      progress = Math.min(progress + 15, 70);
    } else if (document.readyState === 'interactive') {
      progress = Math.min(progress + 20, 90);
    } else if (document.readyState === 'complete') {
      progress = 100;
      setTimeout(() => indicator.remove(), 500);
    }
    indicator.style.width = progress + '%';
  };
  document.addEventListener('DOMContentLoaded', update);
  window.addEventListener('load', update);
  setInterval(update, 100);
}
createProgressIndicator();