Search搜索导航

项目描述：

简洁的浏览器主页，采用原生js编写，可选择不同的搜索引擎，展示网址收藏，查看天气，本地设置，无聊时玩玩小游戏以及小工具合集...

偏向练手，代码中可能会出现风格混乱、命名不规范、每次推送代码变动过多等问题，欢迎给我提意见优化代码

支持二次开发，如果你觉得不错的话请添加上项目地址

最近更换了新设备，可能有助于更新

近期计划：

• 搜索历史
• 搜索引擎自定义
• 侧边栏默认标签支持删除
• 诗词隐藏

近期更新：

待办事项功能更新！！！

版本：

• master：主分支/后续仅同步稳定版本代码

  当前版本：1.1.0（更新待办事项）

• dev：开发分支

  当前版本：1.1.x（更新待办事项）

在线地址：

https://search.virs.xyz

页面展示：

主页：

侧边栏：

设置：

每日更换壁纸：

弹窗添加数据：

以及更多... ...

使用说明：

建议使用 VS Code（Visual Studio Code） 并安装 Live Server 插件，否则无法处理json文件

部署服务器无其他要求

联系方式：

qq群： 859791575

邮箱： [email protected]

功能：

1. 多引擎搜索（默认必应）

2. 常用网址导航

3. 网站主题色

4. 天气

   调用第三方接口❎

5. 设置

   本地设置（导入，导出）

   • 配色❎

   • 背景❎

   • ......

6. 随机名言✅

7. 启动动画✅，细节动画❎

8. 响应式布局❎

9. 侧边栏返回顶部按钮❎

10. 随机更换Logo❎

11. 多彩样式✅

后续计划：

2. 使用vue重写代码（有生之年系列）
3. 使用nodejs部署服务器（有生之年系列）
4. 账号登陆同步书签设置及其他信息功能（有生之年系列）

模块说明：

方便二次开发，尽量保持与代码内容同步

all.data.js

模块	说明	参数
jsonData	获取index.json中所有数据	无

animation.func.js

模块	说明	参数
toggle	淡出动画	elemt：DOM元素 speed：速度
setStorageBefore	加载动画	set：匿名函数 name：本地存储名 href：链接/本地存储内容

bg.func.js

模块	说明	参数
setBingImage	设置必应壁纸作为背景	status：状态
setCustomizeImage	设置自定义图片作为背景	setBackGround：上传图片DOM元素
setdefault	恢复默认壁纸	type：状态
globalImage	设置背景	url：图片链接
WoolGlass	设置毛玻璃效果	url：图片链接

dialog.func.js

模块	说明	参数
openDialog	开启模态框	data.id：模态框className data.html：是否显示自定义html内容 data.title：模态框标题 data.content：模态框内容数组 name：label名 value：label名 type：格式（input：输入框、text：文本） defaultValue：默认值 data.button：模态框按钮 name：按钮名 value：按钮id
closeDialog	关闭模态框	无

global.func.js

模块	说明	参数
stopPropagation	阻止事件冒泡	无
findSettingInfo	查找选中设置项对应值	value：选中项
getRandomColor	返回随机颜色值	无
removeElement	删除元素	element：元素名

message.func.js

模块	说明	参数
openMessage	开启消息提示	value.title：提示标题 value.type：提示类型（success/error） value.content：提示内容
closeMessage	关闭消息提示	elemt：弹窗元素

search.func.js

模块	说明	参数
goSearch	跳转搜索	无
setEngine	渲染搜索引擎选择	engineValue：搜索引擎数据

setting.func.js

模块	说明	参数
createSetting	创建设置项	无

sideBar.func.js

模块	说明	参数
renderSideBarContent	根据id渲染侧边栏内容	id：选项id

skin.func.js

模块	说明	参数
changeSkin	更改配色	skinName：配色名 value：配色文件路径

storage.func.js

模块	说明	参数
setStorage	设置本地存储	name：本地存储名 value：本地存储值
getStorage	获取本地存储内容	key：本地存储名
removeStorage	删除本地存储	key：本地存储名

sug.func.js

模块	说明	参数
getSugValue	获取备选项内容	无
sugValue	备选项内容	href：搜索引擎链接 value：备选项数组
changeSug	按键选择备选项	keyCode：按键值

ui.func.js

模块	说明	参数
changeUI	更改UI风格	uiName：ui名 value：ui文件路径

website.func.js

模块	说明	参数
createWebsite	创建侧边栏内网址	无
commonWebsite	记录常用网址	json.thisWebsite.id：指定网址id json.thisWebsite.name：指定网站名 json.thisWebsite.url：指定网址链接 json.thisWebsite.color：指定网址颜色 json.commonData：数据源 json.status：状态 json.add：添加网址 json.change：修改网址 json.del：删除网址
setCommonUse	渲染常用网址	data：数据源 status：状态

配色方案：

• 落日海滩 在以灰色作为主色调的画面中加入高纯度的色彩，这种配色方法非常常见，也很容易搭配出出人意料的效果，这个的搭配方法可以使设计主题突出，并其他吸引观者的效果。 HEX：FFFFFF RGB：255,255,255 HEX：F0F0F0 RGB：240,240,240 HEX：E7E7E7 RGB：231,231,231 HEX：FFC549 RGB：255,197,73 HEX：FF59AC RGB：255,89,172
• 办公室故事 十分素雅的配色，带有一定的日式风格的颜色搭配，当然现在在很多地方都有使用，如商业场合，家庭家居，即使在网页设计中也屡见不鲜，同时也多见于男性服装的色彩搭配上。 HEX：7C7C7E RGB：124,124,126 HEX：E9E9E9 RGB：233,233,233 HEX：90AFC3 RGB：144,175,195 HEX：303052 RGB：48,48,82 HEX：A4A7D2 RGB：164,167,210
• 风的色彩 风是什么颜色？只有最无聊的人会去考虑这个问题，的确——我很无聊，但是这个色彩带给我们的感觉和微风拂面时候带来的感觉是相似的，同样清凉，舒适，如果你能享受这样简单的愉悦，就能体会这个色彩搭配带来的乐趣。HEX：88C6E5 RGB：136,198,229 HEX：A6D3E8 RGB：166,211,232 HEX：C3DFEA RGB：195,223,235 HEX：E1ECED RGB：225,236,237 HEX：FEF9EF RGB：254,249,239