解析百度文库

发布于 2021-12-29  568 次阅读 

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <title>rick百度文库助手</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            /* background-image: linear-gradient(to bottom right, #bdbef8, #b9a3fd); */
        }
        
        .shell {
            width: 640px;
            height: 400px;
            display: flex;
        }
        
        .box-left {
            background-color: #fff;
            height: 440px;
            top: -20px;
            position: relative;
            width: 50%;
        }
        
        .box-left h3 {
            font: 900 30px '';
            margin: 50px 40px 40px;
        }
        
        .box-left span {
            display: block;
            color: #999;
            font-style: 14px;
            margin: 40px;
        }
        
        .box-right {
            background-color: #474a59;
            box-shadow: 0 0 40px 16px rgba(0, 0, 0, .2);
            color: #f1f1f2;
            width: 50%;
        }
        
        .form {
            margin: 40px;
            position: absolute;
        }
        
        label {
            color: #c2c2c5;
            display: block;
            font-size: 14px;
            height: 16px;
            margin-top: 20px;
            margin-bottom: 5px;
            position: relative;
        }
        
        input {
            background: transparent;
            border: 0;
            color: #f2f2f2;
            font-style: 20px;
            height: 30px;
            line-height: 30px;
            width: 100%;
            outline: none !important;
        }
        
        label::before {
            content: '';
            display: block;
            position: absolute;
            top: 52px;
            width: 100%;
            height: 3px;
            background-image: linear-gradient(to right, #44ffff, #b888ff);
        }
        
        #submit {
            color: #fff;
            margin-top: 40px;
            width: 100px;
            height: 35px;
            background-color: rgba(255, 255, 255, .1);
            border-radius: 20px;
            float: right;
            transition: .3s;
        }
        
        #submit:hover {
            letter-spacing: 2px;
            color: #000;
            background-color: #fff;
        }
    </style>
    <link rel="shortcut icon" href="https://rick.icu/images/favicon.png" />
</head>

<body>

    <body background="https://api.r10086.com/%E7%81%AB%E5%BD%B1%E5%BF%8D%E8%80%851.php">
    </body>
    <div class="shell">
        <div class="box-left" id="div1">
            <h3>rick blog</h3>
            <span>
                <ul>
                    <li>www.rick.icu</li>
                </ul>
            </span>
        </div>
        <div class="box-right">
            <div class="form">
                <label for="email">输入百度文库链接</label>
                <input type="email" id="email">
                <input type="submit" id="submit" value="打开" onclick="test()">
            </div>
        </div>
    </div>
    <script>
        function test() {
            var lin = document.getElementById("email").value + "?width=800&share_api=1";
            var y = lin.replace(/view/g, "share");
            alert("正在处理");
            window.open(y);
        }
    </script>
</body>

</html>