必应Bing主页美化/集成百度搜索按钮，本人自用，欢迎反馈意见→知乎@电工李达康
// ==UserScript==
// @author 知乎@电工李达康
// @icon https://cn.bing.com/sa/simg/bing_p_rr_teal_min.ico
// @name 必应Bing主页美化/集成百度搜索按钮 by 电工李达康
// @namespace 必应Bing主页美化/集成百度搜索按钮
// @description 必应Bing主页美化/集成百度搜索按钮，本人自用，欢迎反馈意见→知乎@电工李达康
// @include *://cn.bing.com/
// @include *://www.bing.com/
// @include *://www.bing.com/?*
// @include *://cn.bing.com/?*
// @run-at document-start
// @version 1.4.3
// @grant none
// @supportURL https://www.zhihu.com/people/qizhenkang
// @note 更新时间 版本号 更新内容
// @note 2020/04/18 - 1.4.3 - 紧急修复52pojie坛友反馈不居中问题，时间及搜索栏已居中
// @note 2020/04/18 - 1.4.2 - 背景隐藏细节优化，当前版本为推荐使用版本
// @note 2020/04/18 - 1.4.1 - 紧急修复52pojie坛友反馈bug，当前版本为推荐使用版本
// ==/UserScript==
//
(function() {
'use strict';
// 全局变量
var focusFlag = 1;
function Element_killer(){ // 用来移除无用元素
var footer = document.querySelector('#b_footer'); // 移除下方信息栏
var top = document.querySelector('#hp_sw_hdr'); // 移除顶部信息栏
var QR = document.querySelector('#showBingAppQR'); // 移除下方二维码
var Binglogo = document.querySelector('#sbox'); // 移除搜索处Bing标志
if(footer){
footer.remove();// 移除下方信息栏
}
if(top){
top.remove();// 移除顶部信息栏
}
if(QR){
QR.nextElementSibling.remove();// 移除下方二维码
QR.remove();
}
if(Binglogo){
Binglogo.firstElementChild.remove(); // 移除搜索处Bing标志
Binglogo.firstElementChild.remove();
}
}
window.setTimeout(Element_killer,200);//移除下方信息栏
//获得当前时间字符串str
function GetTimeStr(){
var today = new Date();
//分别取出年、月、日、时、分、秒
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
//如果是单个数，则前面补0
month = month<10 ? "0"+month : month;
day = day <10 ? "0"+day : day;
hours = hours<10 ? "0"+hours : hours;
minutes = minutes<10 ? "0"+minutes : minutes;
seconds = seconds<10 ? "0"+seconds : seconds;
//构建要输出的字符串
// var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
var str = "TIME "+hours+":"+minutes+":"+seconds;
return str;
}
//
// **********************************************************************************************
//
// 初始化函数 - 时间显示初始化 - 百度搜索功能
//
// **********************************************************************************************
//
function Function_init(){ // 各附加功能初始化函数
// 选择元素指定
var sbox = document.querySelector('#sbox'); // 设置搜索框属性
var searchbox= document.querySelector('#sb_form_q'); // 搜索框
var BaiduButton = document.createElement('button'); // 创建“百度一下”按钮
var BaiduSearchTag = sbox.appendChild(BaiduButton); // 添加“百度一下”按钮
var hp_container = document.getElementById("hp_container");
var TimeDiv = document.createElement("div");
//
// **********************************************************
//
// 时间显示模块
//
// **********************************************************
//
if(TimeDiv){
var str = GetTimeStr(); // 获得当前时间
TimeDiv.innerHTML = str;// 内容信息
TimeDiv.id = "TimeDiv";// 标签id
TimeDiv.style.fontWeight = '400'; // 字体粗细
TimeDiv.style.position = "absolute"; // 位置信息
TimeDiv.style.zIndex = '100'; // 窗口置顶
TimeDiv.style.top = "19%"; // 位置信息
// TimeDiv.style.left = "38.5%"; // 位置信息
TimeDiv.style.fontSize = "5em";// 字体大小
// TimeDiv.style.fontFamily = 'Times New Roman';
TimeDiv.style.color = "#F1F1F1E0";//字体白色
TimeDiv.style.textAlign = "center";//居中
TimeDiv.style.userSelect = "none";//鼠标无法选中
TimeDiv.style.backgroundColor = '#000000B0'; //背景黑色
// TimeDiv::after{
// 'content': '';
// 'width': '100%'';
// 'height': '1px'; // 元素高度
// 'position': 'absolute';
// 'top': '100%'';
// 'left': '0';
// 'background-color': 'currentColor';
// 'transform': 'scale(0)'';
// }
// 鼠标悬停效果
function TimeDivMouseEnter(){ //鼠标进入
TimeDiv.style.color = "#00002BE0";//字体黑色
TimeDiv.style.backgroundColor = '#FFFFFF60'; //背景白色
TimeDiv.style.fontWeight = '400'; // 字体粗细
// TimeDiv.style.textDecoration = "underline";
}
// 鼠标悬停效果
function TimeDivMouseLeave(){ //鼠标离开
TimeDiv.style.color = "#F1F1F1E0";//字体白色
TimeDiv.style.backgroundColor = '#000000B0'; //背景黑色
TimeDiv.style.fontWeight = '400'; // 字体粗细
// TimeDiv.style.textDecoration = "none";
}
function TimeDivDblClick(){
var temp = TimeDiv.onmouseenter;
TimeDiv.onmouseenter = TimeDiv.onmouseleave;
TimeDiv.onmouseleave = temp;
}
TimeDiv.onmouseenter = TimeDivMouseEnter;
TimeDiv.onmouseleave = TimeDivMouseLeave;
TimeDiv.ondblclick = TimeDivDblClick;
TimeDiv.style.transition = "all 0.25s";
// TimeDiv.style.backgroundImage = '-webkit-gradient(linear, left top, right top,color-stop(0, #f22), color-stop(0.9, #ff2))';
// TimeDiv.style.webkitBackgroundClip = 'text';
// TimeDiv.style.webkitTextFillColor = 'transparent';
TimeDiv.style.padding = '0.2em'; //边框设置
TimeDiv.style.borderRadius = '0.35em';//背景圆角
if(hp_container){
hp_container.insertBefore(TimeDiv,hp_container.firstChild);// 添加元素
if(TimeDiv){
var hpWidth = hp_container.offsetWidth; // 设置居中
TimeDiv.style.left = ((hpWidth - TimeDiv.offsetWidth) * 100 / (2 * hpWidth)) +"%";
}
}
}
//
// **********************************************************************************************
//
// 百度搜索功能
//
// **********************************************************************************************
//
// 添加百度搜索按钮元素
if(BaiduSearchTag){
// 百度按钮功能及快捷键设置
if(BaiduButton){
function BaiduSearch(){ // 提交百度搜索函数
if(searchbox){
var keywords = searchbox.value.trim();
var url = "https://www.baidu.com/s?ie=UTF-8&wd=" + encodeURIComponent(keywords);
window.open(url, "_self");
}
}
function BaiduSearch_KeyDown(){//百度搜索快捷键
if(window.event.keyCode == 13 && window.event.ctrlKey){ // ctrl + Enter 快捷键 百度搜索
BaiduSearch();
}
}
// document.querySelector('#sb_go_par').onclick = BaiduSearch; // 设置百度搜索（借用定时器）
BaiduButton.innerHTML = '百度一下'; // 按钮文字
BaiduButton.onclick = BaiduSearch; //绑定点击事件
if(searchbox){
searchbox.onkeydown = BaiduSearch_KeyDown;//百度搜索快捷键设置
}
}
// 以下为“百度”按钮样式设置
// var BaiduSearchTag = document.querySelector('#BaiduSearchTag');
BaiduSearchTag.style.position = "inherit"; // 位置跟随sbox
BaiduSearchTag.style.zIndex = '100'; // 窗口置顶
BaiduSearchTag.id = "BaiduSearchTag";// 标签id
BaiduSearchTag.style.fontWeight = '400'; // 字体粗细
// BaiduSearchTag.style.position = "fixed"; // 位置信息
// BaiduSearchTag.style.top = "40.2%"; // 位置信息
// BaiduSearchTag.style.left = "75.75%"; // 位置信息
BaiduSearchTag.style.fontSize = "1.50em";// 字体大小
// BaiduSearchTag.style.fontFamily = 'Times New Roman';
BaiduSearchTag.style.color = "#000000";//字体颜色
BaiduSearchTag.style.textAlign = "center";//居中
BaiduSearchTag.style.backgroundColor = '#FFFFFFB0'; //背景颜色
BaiduSearchTag.style.border = 'none';
BaiduSearchTag.style.userSelect = "none";//鼠标无法选中
// 鼠标点击效果
function BaiduSearchTagMouseDown(){ //鼠标进入
BaiduSearchTag.style.color = "#FFFFFF";//字体白色
BaiduSearchTag.style.backgroundColor = '#000000B0'; //背景黑色
}
// 鼠标点击效果
function BaiduSearchTagMouseUp(){ //鼠标离开
BaiduSearchTag.style.color = "#000000";//字体黑色
BaiduSearchTag.style.backgroundColor = '#FFFFFFB0'; //背景白色
}
// 鼠标进入效果
function BaiduSearchTagMouseEnter(){ //鼠标进入
BaiduSearchTag.style.color = "#DFDFDF";//字体白色
BaiduSearchTag.style.backgroundColor = '#5F5F5FE0'; //背景白色略深
BaiduSearchTag.style.boxShadow = "1px 0px 5px #DFDFDF, -1px 0px 5px #DFDFDF, 0px -1px 5px #DFDFDF, 0px 1px 5px #DFDFDF";//阴影效果
}
// 鼠标离开效果
function BaiduSearchTagMouseLeave(){ //鼠标离开
BaiduSearchTag.style.color = "#000000";//字体黑色
BaiduSearchTag.style.backgroundColor = '#FFFFFFB0'; //背景白色
BaiduSearchTag.style.boxShadow = "";
}
BaiduSearchTag.onmousedown = BaiduSearchTagMouseDown;
BaiduSearchTag.onmouseup = BaiduSearchTagMouseUp;
BaiduSearchTag.onmouseleave = BaiduSearchTagMouseLeave;
BaiduSearchTag.onmouseenter = BaiduSearchTagMouseEnter;
BaiduSearchTag.style.transition = 'box-shadow 0.25s';// 效果变换时间
}
// 搜索框属性设置
if(searchbox){
var SearchBoxForm = searchbox.parentElement;
searchbox.style.backgroundColor = "#FFFFFF00";// 搜索框透明
SearchBoxForm.style.backgroundColor = "#FFFFFFa0";// 搜索框透明
function FindFocus(){
var focus_ovr = document.getElementById('focus_ovr');
if(focus_ovr){
focus_ovr.style.height = hp_container.clientHeight + 'px';
console.log("提示：SearchboxFocus已找到focus_ovr。");
}
else{
console.log("提示：SearchboxFocus未找到focus_ovr。");
}
}
// 获得焦点时透明度减小效果
function SearchboxFocus(){ // 获得焦点
SearchBoxForm.style.backgroundColor = "#FFFFFFF0";// 搜索框透明
setTimeout(FindFocus,150); // 此处延时是因focus_ovr需时间生成，否则找不到元素
}
// 失去焦点恢复
function SearchboxBlur(){ // 失去焦点
SearchBoxForm.style.backgroundColor = "#FFFFFF15";// 搜索框透明
}
// 鼠标滑过效果
function SearchboxMouseOver(){ // 鼠标滑过
if(document.activeElement.id == "sb_form_q"){
// 焦点仍在搜索框 搜索框保持原样
}
else{
SearchBoxForm.style.backgroundColor = "#FFFFFF65";// 搜索框透明
}
}
// 鼠标离开效果
function SearchboxMouseLeave(){ //鼠标离开
if(document.activeElement.id == "sb_form_q"){
// 焦点仍在搜索框 搜索框保持原样
}
else{
SearchBoxForm.style.backgroundColor = "#FFFFFF15";// 搜索框恢复透明
}
}
// searchbox.onmouseover = SearchboxMouseOver;
searchbox.onblur = SearchboxBlur; // 失去焦点 - 这里需要注意Focus是针对searchbox的
searchbox.onfocus = SearchboxFocus; // 获得焦点
searchbox.onclick = SearchboxFocus;// 点击事件
SearchBoxForm.onclick = SearchboxFocus; // 点击事件
SearchBoxForm.onmouseover = SearchboxMouseOver; // 鼠标滑过
SearchBoxForm.onmouseleave = SearchboxMouseLeave; // 鼠标离开 = 失去焦点
}
else{
console.log("提示：未找到searchbox");
}
BaiduSearchTag.style.height = sbox.clientHeight + 'px'; // 按钮框高度
BaiduSearchTag.style.width = "120px"; // 按钮框宽度
// 搜索框位置设置
if(sbox){
sbox.style.top = "45%"; // 设置位置
sbox.style.left = "31%";
if(hp_container){
var hpWidth = hp_container.offsetWidth;
sbox.style.left = (hpWidth - sbox.offsetWidth - BaiduSearchTag.offsetWidth) * 100 / (2 *hpWidth) +"%";
}
// sbox.style.height = "2.45em"; // 按钮框高度
// sbox.bind('DOMNodeInserted',function(){});
}
}
//
// **********************************************************************************************
//
// 定时器函数，用以更新时间
//
// **********************************************************************************************
//
function showTime(){
var str = GetTimeStr();
var TimeDiv = document.getElementById("TimeDiv");
if(TimeDiv){
TimeDiv.innerHTML = str;
}
}
// 窗口大小改变
window.onresize = function(){
if(BaiduSearchTag && sbox){
BaiduSearchTag.style.height = sbox.clientHeight + 'px'; // 按钮框高度适配
}
// if(hp_container){
// var hpWidth = hp_container.offsetWidth; // 设置居中
// if(TimeDiv){
// TimeDiv.style.left = ((hpWidth - TimeDiv.offsetWidth) * 100 / (2 * hpWidth)) +"%";
// }
// if(sbox){
// sbox.style.left = ((hpWidth - sbox.offsetWidth) * 100 / (2 * hpWidth)) +"%";
// }
// }
}
window.setTimeout(Function_init,200); // 初始化函数
window.setInterval(showTime,1000); // 定时更新时间
})();