创造你的浏览器主页（二）

博主： zhiwei
发布时间：2021 年 08 月 31 日
1400次浏览
暂无评论
9603字数
分类：分享

## 前言

> 上次我们讲了基础的搜索框和按钮，今天我们来给她加上 JavaScript。

[创造你的浏览器主页（一）](https://zhiwei.zone/index.php/archives/12/)

## 关于 JavaScript

> JavaScript 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发 Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
>
> ~摘自百度百科~

## 原来的代码

```
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
    <style>
        *{
            font-family: "Microsoft Yahei","Inconsolata","Courier";
            font-weight: 400;
            outline: none;
            border: none;
        }
        body{
            margin: 0;
            padding: 0;
        }
        #main-holder{
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            z-index: 1;
        }
        #main-over-top{
            height: 72px;
            box-sizing: border-box;
        }
        #main-header{
            font-weight: 100;
            color: rgb(0,181,173);
            font-size: 2em;
            text-align: center;
            margin: auto;
        }
        #main-large-search{
            height: 180px;
            box-sizing: border-box;
        }
        #search_form{
            position: relative;
            top: 1px;
            transition: ease-out top .2s;
            height: 42px;
            min-width: 580px;
            width: 40%;
            margin: auto;
            text-align: center;
        }
        #search_box{
            height: 42px;
            width: 100%;
            display: block;
            margin-top: .6em;
            border-radius: 12px;
            border: 1.5px solid rgb(0,181,173);
            color: rgb(0,181,173);
            padding-left: 12px;
            padding-right: 96px;
            box-sizing: border-box;
            font-weight: 400;
            outline: none;
            transition: ease-out padding-right .2s,ease-out border-radius .2s;
            z-index: 1;
        }
        #search_btn{
            background-color: rgb(0,181,173);
            border-color: rgb(0,181,173);
            color: rgb(248,248,248);
            height: 42px;
            width: 88px;
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            border: 1.5px solid rgb(0,181,173);
            box-sizing: border-box;
            font-weight: 400;
            border-radius: 0px 12px 12px 0px;
            transition: ease-out background-color .1s,ease-out width .2s,ease-out border-radius .2s;
            z-index: 2;
            cursor: pointer;
        }
        #search_btn:hover{
            background-color: rgb(10,191,183);
            border-color: rgb(10,191,183);
            color: rgb(248,248,248);
            width: 108px;
        }
        #search_form:focus-within{
            top: -2px;
        }
        #search_form:focus-within>#search_btn{
            width: 108px;
            border-radius: 0px 21px 21px 0px;
        }
        #search_form:focus-within>#search_box{
            padding-right: 116px;
            border-radius: 21px;
        }
        #search_btn:hover+#search_box{
            padding-right: 116px;
        }
        #search_btn:active{
            background-color: rgb(0,171,163)!important;
        }
        #search_box::-moz-placeholder{
            color: rgb(117,117,117);
        }
    </style>
</head>
<body>
    <div id="main-holder">
        <div id="main-large-search">
            <div id="main-over-top"></div>
            <h1 id="main-header">搜索！</h1>
            <div class="holders" id="search_form">
                <button id="search_btn">搜索</button>
                <input id="search_box" name="search_box" placeholder="搜索..." autocomplete="off" />
            </div>
        </div>
    </div>
</body>
</html>
```

## 我们要添加的内容

```
BASE_URL = 'https://www.baidu.com/s?wd=%KW%&ie=UTF-8';
var encode = function (url) {
    return url.replace(/%/g, '%25')
        .replace(/#/g, '%23')
        .replace(/\$/g, '%24')
        .replace(/&/g, '%26')
        .replace(/\+/g, '%2B')
        .replace(/,/g, '%2C')
        .replace(/\//g, '%2F')
        .replace(/:/g, '%3A')
        .replace(/=/g, '%3D')
        .replace(/\?/g, '%3F')
        .replace(/@/g, '%40')
        .replace(/\[/g, '%5B')
        .replace(/\\/g, '%5C')
        .replace(/\]/g, '%5D')
        .replace(/\^/g, '%5E')
        .replace(/`/g, '%60')
        .replace(/{/g, '%7B')
        .replace(/}/g, '%7D');
}
var redirect = function () {
    window.open(
        BASE_URL.replace(
            /%KW%/g,
            encode(
                document.getElementById(
                    'search_box'
                ).value
            )
        )
    );
};
document.getElementById('search_btn').onclick = redirect;
document.body.onkeypress = function () {
    if (event.keyCode == 13) {
        redirect();
    }
};
```

## 然后来看看效果

```
<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
    <style>
        * {
            font-family: "Microsoft Yahei", "Inconsolata", "Courier";
            font-weight: 400;
            outline: none;
            border: none;
        }

body {
            margin: 0;
            padding: 0;
        }

#main-holder {
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            z-index: 1;
        }

#main-over-top {
            height: 72px;
            box-sizing: border-box;
        }

#main-header {
            font-weight: 100;
            color: rgb(0, 181, 173);
            font-size: 2em;
            text-align: center;
            margin: auto;
        }

#main-large-search {
            height: 180px;
            box-sizing: border-box;
        }

#search_form {
            position: relative;
            top: 1px;
            transition: ease-out top .2s;
            height: 42px;
            min-width: 580px;
            width: 40%;
            margin: auto;
            text-align: center;
        }

#search_box {
            height: 42px;
            width: 100%;
            display: block;
            margin-top: .6em;
            border-radius: 12px;
            border: 1.5px solid rgb(0, 181, 173);
            color: rgb(0, 181, 173);
            padding-left: 12px;
            padding-right: 96px;
            box-sizing: border-box;
            font-weight: 400;
            outline: none;
            transition: ease-out padding-right .2s, ease-out border-radius .2s;
            z-index: 1;
        }

#search_btn {
            background-color: rgb(0, 181, 173);
            border-color: rgb(0, 181, 173);
            color: rgb(248, 248, 248);
            height: 42px;
            width: 88px;
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            border: 1.5px solid rgb(0, 181, 173);
            box-sizing: border-box;
            font-weight: 400;
            border-radius: 0px 12px 12px 0px;
            transition: ease-out background-color .1s, ease-out width .2s, ease-out border-radius .2s;
            z-index: 2;
            cursor: pointer;
        }

#search_btn:hover {
            background-color: rgb(10, 191, 183);
            border-color: rgb(10, 191, 183);
            color: rgb(248, 248, 248);
            width: 108px;
        }

#search_form:focus-within {
            top: -2px;
        }

#search_form:focus-within>#search_btn {
            width: 108px;
            border-radius: 0px 21px 21px 0px;
        }

#search_form:focus-within>#search_box {
            padding-right: 116px;
            border-radius: 21px;
        }

#search_btn:hover+#search_box {
            padding-right: 116px;
        }

#search_btn:active {
            background-color: rgb(0, 171, 163) !important;
        }

#search_box::-moz-placeholder {
            color: rgb(117, 117, 117);
        }
    </style>
</head>

<body>
    <div id="main-holder">
        <div id="main-large-search">
            <div id="main-over-top"></div>
            <h1 id="main-header">搜索！</h1>
            <div class="holders" id="search_form">
                <button id="search_btn">搜索</button>
                <input id="search_box" name="search_box" placeholder="搜索..." autocomplete="off" />
            </div>
        </div>
    </div>
</body>
<script>
    BASE_URL = 'https://www.baidu.com/s?wd=%KW%&ie=UTF-8';
    var encode = function (url) {
        return url.replace(/%/g, '%25')
            .replace(/#/g, '%23')
            .replace(/\$/g, '%24')
            .replace(/&/g, '%26')
            .replace(/\+/g, '%2B')
            .replace(/,/g, '%2C')
            .replace(/\//g, '%2F')
            .replace(/:/g, '%3A')
            .replace(/=/g, '%3D')
            .replace(/\?/g, '%3F')
            .replace(/@/g, '%40')
            .replace(/\[/g, '%5B')
            .replace(/\\/g, '%5C')
            .replace(/\]/g, '%5D')
            .replace(/\^/g, '%5E')
            .replace(/`/g, '%60')
            .replace(/{/g, '%7B')
            .replace(/}/g, '%7D');
    }
    var redirect = function () {
        window.open(
            BASE_URL.replace(
                /%KW%/g,
                encode(
                    document.getElementById(
                        'search_box'
                    ).value
                )
            )
        );
    };
    document.getElementById('search_btn').onclick = redirect;
    document.body.onkeypress = function () {
        if (event.keyCode == 13) {
            redirect();
        }
    };
</script>

</html>
```

> 目前的代码

![](https://s1.ax1x.com/2020/07/19/UWrlx1.png)

> 经过测试可以看到，通过单击 `搜索` 按钮和键入 `enter/return` 都可以跳转到目标 URL。
>
> 收工！

## 小结

> 代码就先写到这里，目前搜索框已经可以使用，之后还需要加上设置才能更人性化。

**[完整 Demo 链接](https://pisearch.cn/)**

**[GitHub 开源仓库](https://github.com/bohanjun/PiSearch/)**

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

创造你的浏览器主页（二）

zhiwei • 2021 年 08 月 31 日