我决定要用自己开发的搜索了
2025/09/26 15:06:43
我让ai写了一个，记得那时候满大街都是这种源码。。哈哈
- <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>一起搜</title> <style> body { font-family: "Microsoft YaHei", sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } .container { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 90%; max-width: 600px; text-align: center; } h1 { font-size: 32px; color: #2c3e50; margin-bottom: 20px; } #searchInput { width: 100%; padding: 12px 20px; font-size: 16px; border: 1px solid #ccc; border-radius: 24px; box-sizing: border-box; outline: none; margin-bottom: 20px; } .engine-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; } .engine-btn { padding: 8px 16px; font-size: 14px; border: 1px solid #ddd; background: #f9f9f9; border-radius: 20px; cursor: pointer; transition: all 0.2s; } .engine-btn:hover, .engine-btn.active { background: #e0e0e0; border-color: #bbb; } #searchButton { margin-top: 15px; padding: 10px 24px; font-size: 16px; background: #4285f4; color: white; border: none; border-radius: 24px; cursor: pointer; transition: background 0.3s; } #searchButton:hover { background: #3367d6; } </style></head><body> <div class="container"> <h1>一起搜</h1> <input type="text" id="searchInput" placeholder="请输入搜索关键词" autofocus> <div class="engine-list"> <div class="engine-btn active" data-engine="baidu">百度</div> <div class="engine-btn" data-engine="sogou">搜狗</div> <div class="engine-btn" data-engine="bing">必应</div> <div class="engine-btn" data-engine="google">谷歌</div> </div> <button id="searchButton">搜索</button> </div> <script> let selectedEngine = 'baidu'; document.querySelectorAll('.engine-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.engine-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); selectedEngine = btn.dataset.engine; }); }); document.getElementById('searchButton').addEventListener('click', performSearch); document.getElementById('searchInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') performSearch(); }); function performSearch() { const keyword = document.getElementById('searchInput').value.trim(); if (!keyword) { alert('请输入搜索关键词'); return; } const engines = { baidu: `https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`, sogou: `https://www.sogou.com/web?query=${encodeURIComponent(keyword)}`, bing: `https://www.bing.com/search?q=${encodeURIComponent(keyword)}`, google: `https://www.google.com/search?q=${encodeURIComponent(keyword)}` }; const url = engines[selectedEngine]; if (url) { window.open(url, '_blank'); } } </script></body></html>