代码
<div class="search-widget">
<div class="banner">
<span>搜索引擎</span>
<select id="searchEngine" class="engine-selector">
<option value="bing">必应</option>
<option value="baidu">百度</option>
</select>
<span class="banner-text">协助本站SEO</span>
</div>
<div class="search-container">
<input type="text" id="searchInput" placeholder="微笑百宝库" value="微笑百宝库">
<button onclick="handleSearch()">搜索</button>
</div>
</div>
<style>
.search-widget{width:100%;margin:10px 0;transition:all 0.3s;}
.banner{background:#FE3459;color:white;padding:12px;text-align:left;border-radius:4px 4px 0 0;font-size:14px;display:flex;align-items:center;gap:12px;}
.engine-selector{padding:4px 8px;border-radius:4px;border:none;background:white;color:#333;font-size:14px;cursor:pointer;}
.banner-text{margin-left:auto;}
.search-container{display:flex;gap:8px;padding:12px;background:inherit;border-radius:0 0 4px 4px;border:1px solid #dfe1e5;}
#searchInput{flex:1;padding:8px 12px;border:1px solid #dfe1e5;border-radius:4px;font-size:14px;background:inherit;color:inherit;}
button{padding:8px 16px;background:#0066FF;color:white;border:none;border-radius:4px;cursor:pointer;transition:background 0.3s;}
button:hover{background:#0047B3;}
body.dark-mode .search-container{border-color:#5f6368;background:#202124;}
body.dark-mode #searchInput{background:#303134;border-color:#5f6368;color:#e8eaed;}
body.dark-mode button{background:#8ab4f8;color:#202124;}
body.dark-mode button:hover{background:#aecbfa;}
body.dark-mode .engine-selector{background:#303134;color:#e8eaed;border-color:#5f6368;}
</style>
<script>
// 初始化搜索引擎选择器,读取本地存储的用户偏好
document.addEventListener('DOMContentLoaded', function() {
const savedEngine = localStorage.getItem('preferredSearchEngine');
const engineSelector = document.getElementById('searchEngine');
// 如果有保存的偏好,应用它
if (savedEngine) {
engineSelector.value = savedEngine;
}
// 监听搜索引擎选择变化,保存到本地存储
engineSelector.addEventListener('change', function() {
localStorage.setItem('preferredSearchEngine', this.value);
});
});
function handleSearch(){
const keyword = document.getElementById('searchInput').value;
const selectedEngine = document.getElementById('searchEngine').value;
let searchUrl = '';
// 根据选择的搜索引擎构建相应的搜索URL
switch(selectedEngine) {
case 'baidu':
searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`;
break;
case 'bing':
default:
searchUrl = `https://www.bing.com/search?q=${encodeURIComponent(keyword)}`;
break;
}
window.open(searchUrl, '_blank');
}
</script>
记得自行修改一下内容,这个就是加了一个必应和百度的选项





没有回复内容