🏠 Home 

必应Bing主页美化/集成百度搜索按钮 by 电工李达康

必应Bing主页美化/集成百度搜索按钮,本人自用,欢迎反馈意见→知乎@电工李达康


安装此脚本?
  1. // ==UserScript==
  2. // @author 知乎@电工李达康
  3. // @icon https://cn.bing.com/sa/simg/bing_p_rr_teal_min.ico
  4. // @name 必应Bing主页美化/集成百度搜索按钮 by 电工李达康
  5. // @namespace 必应Bing主页美化/集成百度搜索按钮
  6. // @description 必应Bing主页美化/集成百度搜索按钮,本人自用,欢迎反馈意见→知乎@电工李达康
  7. // @include *://cn.bing.com/
  8. // @include *://www.bing.com/
  9. // @include *://www.bing.com/?*
  10. // @include *://cn.bing.com/?*
  11. // @run-at document-start
  12. // @version 1.4.3
  13. // @grant none
  14. // @supportURL https://www.zhihu.com/people/qizhenkang
  15. // @note 更新时间 版本号 更新内容
  16. // @note 2020/04/18 - 1.4.3 - 紧急修复52pojie坛友反馈不居中问题,时间及搜索栏已居中
  17. // @note 2020/04/18 - 1.4.2 - 背景隐藏细节优化,当前版本为推荐使用版本
  18. // @note 2020/04/18 - 1.4.1 - 紧急修复52pojie坛友反馈bug,当前版本为推荐使用版本
  19. // ==/UserScript==
  20. //
  21. (function() {
  22. 'use strict';
  23. // 全局变量
  24. var focusFlag = 1;
  25. function Element_killer(){ // 用来移除无用元素
  26. var footer = document.querySelector('#b_footer'); // 移除下方信息栏
  27. var top = document.querySelector('#hp_sw_hdr'); // 移除顶部信息栏
  28. var QR = document.querySelector('#showBingAppQR'); // 移除下方二维码
  29. var Binglogo = document.querySelector('#sbox'); // 移除搜索处Bing标志
  30. if(footer){
  31. footer.remove();// 移除下方信息栏
  32. }
  33. if(top){
  34. top.remove();// 移除顶部信息栏
  35. }
  36. if(QR){
  37. QR.nextElementSibling.remove();// 移除下方二维码
  38. QR.remove();
  39. }
  40. if(Binglogo){
  41. Binglogo.firstElementChild.remove(); // 移除搜索处Bing标志
  42. Binglogo.firstElementChild.remove();
  43. }
  44. }
  45. window.setTimeout(Element_killer,200);//移除下方信息栏
  46. //获得当前时间字符串str
  47. function GetTimeStr(){
  48. var today = new Date();
  49. //分别取出年、月、日、时、分、秒
  50. var year = today.getFullYear();
  51. var month = today.getMonth()+1;
  52. var day = today.getDate();
  53. var hours = today.getHours();
  54. var minutes = today.getMinutes();
  55. var seconds = today.getSeconds();
  56. //如果是单个数,则前面补0
  57. month = month<10 ? "0"+month : month;
  58. day = day <10 ? "0"+day : day;
  59. hours = hours<10 ? "0"+hours : hours;
  60. minutes = minutes<10 ? "0"+minutes : minutes;
  61. seconds = seconds<10 ? "0"+seconds : seconds;
  62. //构建要输出的字符串
  63. // var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
  64. var str = "TIME "+hours+":"+minutes+":"+seconds;
  65. return str;
  66. }
  67. //
  68. // **********************************************************************************************
  69. //
  70. // 初始化函数 - 时间显示初始化 - 百度搜索功能
  71. //
  72. // **********************************************************************************************
  73. //
  74. function Function_init(){ // 各附加功能初始化函数
  75. // 选择元素指定
  76. var sbox = document.querySelector('#sbox'); // 设置搜索框属性
  77. var searchbox= document.querySelector('#sb_form_q'); // 搜索框
  78. var BaiduButton = document.createElement('button'); // 创建“百度一下”按钮
  79. var BaiduSearchTag = sbox.appendChild(BaiduButton); // 添加“百度一下”按钮
  80. var hp_container = document.getElementById("hp_container");
  81. var TimeDiv = document.createElement("div");
  82. //
  83. // **********************************************************
  84. //
  85. // 时间显示模块
  86. //
  87. // **********************************************************
  88. //
  89. if(TimeDiv){
  90. var str = GetTimeStr(); // 获得当前时间
  91. TimeDiv.innerHTML = str;// 内容信息
  92. TimeDiv.id = "TimeDiv";// 标签id
  93. TimeDiv.style.fontWeight = '400'; // 字体粗细
  94. TimeDiv.style.position = "absolute"; // 位置信息
  95. TimeDiv.style.zIndex = '100'; // 窗口置顶
  96. TimeDiv.style.top = "19%"; // 位置信息
  97. // TimeDiv.style.left = "38.5%"; // 位置信息
  98. TimeDiv.style.fontSize = "5em";// 字体大小
  99. // TimeDiv.style.fontFamily = 'Times New Roman';
  100. TimeDiv.style.color = "#F1F1F1E0";//字体白色
  101. TimeDiv.style.textAlign = "center";//居中
  102. TimeDiv.style.userSelect = "none";//鼠标无法选中
  103. TimeDiv.style.backgroundColor = '#000000B0'; //背景黑色
  104. // TimeDiv::after{
  105. // 'content': '';
  106. // 'width': '100%'';
  107. // 'height': '1px'; // 元素高度
  108. // 'position': 'absolute';
  109. // 'top': '100%'';
  110. // 'left': '0';
  111. // 'background-color': 'currentColor';
  112. // 'transform': 'scale(0)'';
  113. // }
  114. // 鼠标悬停效果
  115. function TimeDivMouseEnter(){ //鼠标进入
  116. TimeDiv.style.color = "#00002BE0";//字体黑色
  117. TimeDiv.style.backgroundColor = '#FFFFFF60'; //背景白色
  118. TimeDiv.style.fontWeight = '400'; // 字体粗细
  119. // TimeDiv.style.textDecoration = "underline";
  120. }
  121. // 鼠标悬停效果
  122. function TimeDivMouseLeave(){ //鼠标离开
  123. TimeDiv.style.color = "#F1F1F1E0";//字体白色
  124. TimeDiv.style.backgroundColor = '#000000B0'; //背景黑色
  125. TimeDiv.style.fontWeight = '400'; // 字体粗细
  126. // TimeDiv.style.textDecoration = "none";
  127. }
  128. function TimeDivDblClick(){
  129. var temp = TimeDiv.onmouseenter;
  130. TimeDiv.onmouseenter = TimeDiv.onmouseleave;
  131. TimeDiv.onmouseleave = temp;
  132. }
  133. TimeDiv.onmouseenter = TimeDivMouseEnter;
  134. TimeDiv.onmouseleave = TimeDivMouseLeave;
  135. TimeDiv.ondblclick = TimeDivDblClick;
  136. TimeDiv.style.transition = "all 0.25s";
  137. // TimeDiv.style.backgroundImage = '-webkit-gradient(linear, left top, right top,color-stop(0, #f22), color-stop(0.9, #ff2))';
  138. // TimeDiv.style.webkitBackgroundClip = 'text';
  139. // TimeDiv.style.webkitTextFillColor = 'transparent';
  140. TimeDiv.style.padding = '0.2em'; //边框设置
  141. TimeDiv.style.borderRadius = '0.35em';//背景圆角
  142. if(hp_container){
  143. hp_container.insertBefore(TimeDiv,hp_container.firstChild);// 添加元素
  144. if(TimeDiv){
  145. var hpWidth = hp_container.offsetWidth; // 设置居中
  146. TimeDiv.style.left = ((hpWidth - TimeDiv.offsetWidth) * 100 / (2 * hpWidth)) +"%";
  147. }
  148. }
  149. }
  150. //
  151. // **********************************************************************************************
  152. //
  153. // 百度搜索功能
  154. //
  155. // **********************************************************************************************
  156. //
  157. // 添加百度搜索按钮元素
  158. if(BaiduSearchTag){
  159. // 百度按钮功能及快捷键设置
  160. if(BaiduButton){
  161. function BaiduSearch(){ // 提交百度搜索函数
  162. if(searchbox){
  163. var keywords = searchbox.value.trim();
  164. var url = "https://www.baidu.com/s?ie=UTF-8&wd=" + encodeURIComponent(keywords);
  165. window.open(url, "_self");
  166. }
  167. }
  168. function BaiduSearch_KeyDown(){//百度搜索快捷键
  169. if(window.event.keyCode == 13 && window.event.ctrlKey){ // ctrl + Enter 快捷键 百度搜索
  170. BaiduSearch();
  171. }
  172. }
  173. // document.querySelector('#sb_go_par').onclick = BaiduSearch; // 设置百度搜索(借用定时器)
  174. BaiduButton.innerHTML = '百度一下'; // 按钮文字
  175. BaiduButton.onclick = BaiduSearch; //绑定点击事件
  176. if(searchbox){
  177. searchbox.onkeydown = BaiduSearch_KeyDown;//百度搜索快捷键设置
  178. }
  179. }
  180. // 以下为“百度”按钮样式设置
  181. // var BaiduSearchTag = document.querySelector('#BaiduSearchTag');
  182. BaiduSearchTag.style.position = "inherit"; // 位置跟随sbox
  183. BaiduSearchTag.style.zIndex = '100'; // 窗口置顶
  184. BaiduSearchTag.id = "BaiduSearchTag";// 标签id
  185. BaiduSearchTag.style.fontWeight = '400'; // 字体粗细
  186. // BaiduSearchTag.style.position = "fixed"; // 位置信息
  187. // BaiduSearchTag.style.top = "40.2%"; // 位置信息
  188. // BaiduSearchTag.style.left = "75.75%"; // 位置信息
  189. BaiduSearchTag.style.fontSize = "1.50em";// 字体大小
  190. // BaiduSearchTag.style.fontFamily = 'Times New Roman';
  191. BaiduSearchTag.style.color = "#000000";//字体颜色
  192. BaiduSearchTag.style.textAlign = "center";//居中
  193. BaiduSearchTag.style.backgroundColor = '#FFFFFFB0'; //背景颜色
  194. BaiduSearchTag.style.border = 'none';
  195. BaiduSearchTag.style.userSelect = "none";//鼠标无法选中
  196. // 鼠标点击效果
  197. function BaiduSearchTagMouseDown(){ //鼠标进入
  198. BaiduSearchTag.style.color = "#FFFFFF";//字体白色
  199. BaiduSearchTag.style.backgroundColor = '#000000B0'; //背景黑色
  200. }
  201. // 鼠标点击效果
  202. function BaiduSearchTagMouseUp(){ //鼠标离开
  203. BaiduSearchTag.style.color = "#000000";//字体黑色
  204. BaiduSearchTag.style.backgroundColor = '#FFFFFFB0'; //背景白色
  205. }
  206. // 鼠标进入效果
  207. function BaiduSearchTagMouseEnter(){ //鼠标进入
  208. BaiduSearchTag.style.color = "#DFDFDF";//字体白色
  209. BaiduSearchTag.style.backgroundColor = '#5F5F5FE0'; //背景白色略深
  210. BaiduSearchTag.style.boxShadow = "1px 0px 5px #DFDFDF, -1px 0px 5px #DFDFDF, 0px -1px 5px #DFDFDF, 0px 1px 5px #DFDFDF";//阴影效果
  211. }
  212. // 鼠标离开效果
  213. function BaiduSearchTagMouseLeave(){ //鼠标离开
  214. BaiduSearchTag.style.color = "#000000";//字体黑色
  215. BaiduSearchTag.style.backgroundColor = '#FFFFFFB0'; //背景白色
  216. BaiduSearchTag.style.boxShadow = "";
  217. }
  218. BaiduSearchTag.onmousedown = BaiduSearchTagMouseDown;
  219. BaiduSearchTag.onmouseup = BaiduSearchTagMouseUp;
  220. BaiduSearchTag.onmouseleave = BaiduSearchTagMouseLeave;
  221. BaiduSearchTag.onmouseenter = BaiduSearchTagMouseEnter;
  222. BaiduSearchTag.style.transition = 'box-shadow 0.25s';// 效果变换时间
  223. }
  224. // 搜索框属性设置
  225. if(searchbox){
  226. var SearchBoxForm = searchbox.parentElement;
  227. searchbox.style.backgroundColor = "#FFFFFF00";// 搜索框透明
  228. SearchBoxForm.style.backgroundColor = "#FFFFFFa0";// 搜索框透明
  229. function FindFocus(){
  230. var focus_ovr = document.getElementById('focus_ovr');
  231. if(focus_ovr){
  232. focus_ovr.style.height = hp_container.clientHeight + 'px';
  233. console.log("提示:SearchboxFocus已找到focus_ovr。");
  234. }
  235. else{
  236. console.log("提示:SearchboxFocus未找到focus_ovr。");
  237. }
  238. }
  239. // 获得焦点时透明度减小效果
  240. function SearchboxFocus(){ // 获得焦点
  241. SearchBoxForm.style.backgroundColor = "#FFFFFFF0";// 搜索框透明
  242. setTimeout(FindFocus,150); // 此处延时是因focus_ovr需时间生成,否则找不到元素
  243. }
  244. // 失去焦点恢复
  245. function SearchboxBlur(){ // 失去焦点
  246. SearchBoxForm.style.backgroundColor = "#FFFFFF15";// 搜索框透明
  247. }
  248. // 鼠标滑过效果
  249. function SearchboxMouseOver(){ // 鼠标滑过
  250. if(document.activeElement.id == "sb_form_q"){
  251. // 焦点仍在搜索框 搜索框保持原样
  252. }
  253. else{
  254. SearchBoxForm.style.backgroundColor = "#FFFFFF65";// 搜索框透明
  255. }
  256. }
  257. // 鼠标离开效果
  258. function SearchboxMouseLeave(){ //鼠标离开
  259. if(document.activeElement.id == "sb_form_q"){
  260. // 焦点仍在搜索框 搜索框保持原样
  261. }
  262. else{
  263. SearchBoxForm.style.backgroundColor = "#FFFFFF15";// 搜索框恢复透明
  264. }
  265. }
  266. // searchbox.onmouseover = SearchboxMouseOver;
  267. searchbox.onblur = SearchboxBlur; // 失去焦点 - 这里需要注意Focus是针对searchbox的
  268. searchbox.onfocus = SearchboxFocus; // 获得焦点
  269. searchbox.onclick = SearchboxFocus;// 点击事件
  270. SearchBoxForm.onclick = SearchboxFocus; // 点击事件
  271. SearchBoxForm.onmouseover = SearchboxMouseOver; // 鼠标滑过
  272. SearchBoxForm.onmouseleave = SearchboxMouseLeave; // 鼠标离开 = 失去焦点
  273. }
  274. else{
  275. console.log("提示:未找到searchbox");
  276. }
  277. BaiduSearchTag.style.height = sbox.clientHeight + 'px'; // 按钮框高度
  278. BaiduSearchTag.style.width = "120px"; // 按钮框宽度
  279. // 搜索框位置设置
  280. if(sbox){
  281. sbox.style.top = "45%"; // 设置位置
  282. sbox.style.left = "31%";
  283. if(hp_container){
  284. var hpWidth = hp_container.offsetWidth;
  285. sbox.style.left = (hpWidth - sbox.offsetWidth - BaiduSearchTag.offsetWidth) * 100 / (2 *hpWidth) +"%";
  286. }
  287. // sbox.style.height = "2.45em"; // 按钮框高度
  288. // sbox.bind('DOMNodeInserted',function(){});
  289. }
  290. }
  291. //
  292. // **********************************************************************************************
  293. //
  294. // 定时器函数,用以更新时间
  295. //
  296. // **********************************************************************************************
  297. //
  298. function showTime(){
  299. var str = GetTimeStr();
  300. var TimeDiv = document.getElementById("TimeDiv");
  301. if(TimeDiv){
  302. TimeDiv.innerHTML = str;
  303. }
  304. }
  305. // 窗口大小改变
  306. window.onresize = function(){
  307. if(BaiduSearchTag && sbox){
  308. BaiduSearchTag.style.height = sbox.clientHeight + 'px'; // 按钮框高度适配
  309. }
  310. // if(hp_container){
  311. // var hpWidth = hp_container.offsetWidth; // 设置居中
  312. // if(TimeDiv){
  313. // TimeDiv.style.left = ((hpWidth - TimeDiv.offsetWidth) * 100 / (2 * hpWidth)) +"%";
  314. // }
  315. // if(sbox){
  316. // sbox.style.left = ((hpWidth - sbox.offsetWidth) * 100 / (2 * hpWidth)) +"%";
  317. // }
  318. // }
  319. }
  320. window.setTimeout(Function_init,200); // 初始化函数
  321. window.setInterval(showTime,1000); // 定时更新时间
  322. })();