重构项目，风格与新版百度 UI 适配

README.md

@@ -1,6 +1,6 @@
 <p align="center">
-<a href="http://lab.mkblog.cn/lmbtfy/" target="_blank">
+<a href="http://tool.mkblog.cn/lmbtfy/" target="_blank">
-<img src="https://user-images.githubusercontent.com/16880885/56845297-9c49cc80-68f1-11e9-94f5-cae16c730fe5.png" alt="让我帮你百度一下">
+<img src="https://user-images.githubusercontent.com/16880885/85223529-75543100-b3f6-11ea-9eb4-6088c1199c74.jpg" alt="让我帮你百度一下">
 </a>
 </p>
 
@@ -23,12 +23,14 @@
 
 让我帮你百度一下 - 优化版
 
-创意及代码来自 lmbtfy.cn 以及 lmbtfy.retaker.me，孟坤网页实验室在原作的基础上作了一些小修改，以适应移动端浏览
+原始版本来自 bangbang(http://lmbtfy.cn/)，mengkun(https://mkblog.cn) 在原作的基础上进行了重置，风格变更为新版百度 UI，并适配了移动端
+
+交互效果参考了 不会百度么？(http://buhuibaidu.me/)
 
 ### 在线演示
 -----
 
-[http://lab.mkblog.cn/lmbtfy/](http://lab.mkblog.cn/lmbtfy/)
+[http://tool.mkblog.cn/lmbtfy/](http://tool.mkblog.cn/lmbtfy/)
 
 
 ### 相关项目
@@ -40,6 +42,11 @@
 ### 更新日志
 -----
 
+#### 2020/6/21
+- 重构项目，风格与新版百度 UI 适配。 **注意：本版本修改了参数的获取方式，与旧版不兼容！如果你曾经使用了旧版，那么不要替换为新版，否则以前生成的网址全部会失效**
+- 移除短网址模块
+- 增加点击指示特效
+
 #### 2019/10/14
 - 将网址缩短接口替换为搜狗接口，修复无法生成短网址的问题
 

api.php

@@ -1,30 +0,0 @@
-<?php 
-/**
- * 短网址 API
- * 编写：mengkun(https://mkblog.cn)
- */
-
-if(isset($_GET['url']) && $_GET['url']) {
-    $result = array(
-        'code'   => 200,
-        'msg'    => 'success',
-        'result' => shortUrl($_GET['url'])
-    );
-} else {
-    $result = array(
-        'code'   => -1,
-        'msg'    => 'url is empty',
-        'result' => null
-    );
-}
-die(json_encode($result));
-
-/**
- * 短网址生成函数
- * @param $longUrl 原始网址
- * @return 缩短后的网址
- */
-function shortUrl($longUrl) {
-    $result = @file_get_contents('http://sa.sogou.com/gettiny?url='.urlencode($longUrl));
-    return $result? $result: $longUrl;
-}

css/style.css

@@ -1,259 +1,339 @@
-@charset "utf-8";
+html, body, 
-
+div, section, header, footer,
-div, span, p, a, img, footer, html, body, button, h1, h2, h3, h4, h5, input {
+button, input, textarea,
-    font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
+p, ul, li {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    font-family: Microsoft Yahei, "微软雅黑", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
+} 
+
+img {
+    outline: none;
 }
 
-.anim-trans {
+html, body {
-    -webkit-transition: .3s ease all;
+    width: 100%;
-       -moz-transition: .3s ease all;
+    height: 100%;
-         -o-transition: .3s ease all;
+    overflow-x: hidden;
-            transition: .3s ease all;
 }
 
-/* 鼠标指针箭头 */
+
+/* 搜索框 */
+#search {
+    position: relative;
+    height: 40%;
+    min-height: 314px;
+    max-height: 510px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+#search-form {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+}
+
+.search-form-group {
+    position: relative;
+    max-width: 655px;
+    margin: 0 auto;
+}
+
+.search-form-input {
+    position: absolute;
+    left: 0;
+    right: 108px;
+    vertical-align: top;
+    overflow: hidden;
+}
+
+.search-form-input input {
+    width: 100%;
+    height: 44px;
+    padding: 12px 16px;
+    font-size: 16px;
+    outline: 0;
+    box-shadow: none;
+    border-radius: 10px 0 0 10px;
+    border: 2px solid #c4c7ce;
+    border-right: none;
+    background: #fff;
+    color: #222;
+}
+.search-form-group input:hover {
+    border-color: #9195a3;
+}
+.search-form-group input:focus {
+    border-color: #4e6ef2;
+}
+
+.search-form-group button {
+    cursor: pointer;
+    width: 108px;
+    height: 44px;
+    line-height: 45px;
+    padding: 0;
+    background: #4e6ef2;
+    border-radius: 0 10px 10px 0;
+    font-size: 17px;
+    color: #fff;
+    box-shadow: none;
+    font-weight: 400;
+    border: none;
+    outline: 0;
+    float: right;
+    z-index: 1;
+}
+.search-form-group button:active {
+    background-color: #4662d9;
+}
+.search-form-group button:hover {
+    background-color: #4662d9;
+}
+
+.search-header {
+    position: absolute;
+    bottom: 60px;
+    width: 100%;
+}
+
+.search-header h2 {
+    font-size: 24px;
+    font-weight: 900;
+}
+
+.search-header img {
+    display: inline-block;
+    width: 270px;
+    margin: 0 -12px -16px;
+}
+
+/* 功能区 */
+#function {
+    position: absolute;
+    width: 100%;
+    top: 40%;
+    text-align: center;
+    margin-top: 80px;
+}
+
+#tips {
+    color: #9195a3;
+    font-size: 16px;
+}
+
+#stop {
+    display: none;
+    border: none;
+    padding: 8px 15px;
+    border-radius: 100px;
+    color: #bababa;
+    background: #f1f1f1;
+    outline: none;
+    cursor: pointer;
+    margin-top: 50px;
+}
+
+#output {
+    display: none;
+    width: 100%;
+    max-width: 400px;
+    margin: 20px auto;
+}
+
+#output textarea {
+    width: 100%;
+    padding: 5px 8px;
+    border-radius: 3px;
+    border: 1px solid #c8c8c8;
+    outline: none;
+}
+#output textarea:focus {
+    border-color: #4285f4;
+    box-shadow: 0 0 2px #4285f4;
+}
+
+#output .tool-btns {
+    text-align: right;
+    margin-top: 8px;
+}
+
+#output button {
+    outline: none;
+    cursor: pointer;
+    color: #fff;
+    background: #3f89ec;
+    border: none;
+    margin-left: 8px;
+    padding: 6px 14px;
+    border-radius: 3px;
+}
+#output button:hover {
+    background: #4490f7;
+}
+#output button:focus {
+    background: #3a84e8;
+}
+
+
+/* 页脚 */
+#footer {
+    width: 100%;
+    position: fixed;
+    z-index: 100;
+    bottom: 0;
+    left: 0;
+    height: 40px;
+    line-height: 40px;
+    font-size: 12px;
+    overflow: hidden;
+    background-color: #fafafa;
+    padding: 0 20px;
+}
+
+#footer li {
+    list-style: none;
+    display: inline-block;
+    float: left;
+    padding: 0 10px;
+}
+
+.footer-left, .footer-left a {
+    color: #9195a3;
+    text-decoration: none;
+}
+
+.footer-right {
+    float: right;
+}
+.footer-right, .footer-right a {
+    color: #bbb;
+}
+
+
+/* 鼠标指示箭头 */
 #arrow {
     display: none;
     position: absolute;
     left: 0;
     top: 0;
+    width: 50px;
+    height: 50px;
     z-index: 999;
+    background: url(../img/arrow.png) no-repeat;
 }
 
-/* 关于按钮 */
+#arrow::after {
-.about {
+    content: '';
     position: absolute;
-    top: 1em;
+    top: -13px;
-    right: 1em;
+    left: -15px;
-    height: 1.5em;
-    line-height: 1.5em;
-    width: 1.5em;
-    border-radius: .75em;
-    font-size: 16px;
-    text-align: center;
-    color: #fff;
-    background-color: #000;
-    background-color: rgba(0,0,0,.05);
-    cursor: pointer;
-}
-.about:hover {
-    background-color: #000;
-    background-color: rgba(0, 0, 0, 0.26);
-}
-
-/*弹窗层*/  
-.mk-pop-box {   
-    z-index: 9999;
-    margin-bottom: 2px;   
-    display: none;   
-    position: fixed;
-    font-size: 14px;
-    width: 100%;
-    max-width: 350px;
-}
-.mk-pop-box-inner {
-    background: #fff;
-    border-radius: 3px;
-    border-top: 2px solid #fa7f40;
-    padding: 18px;
-}
-/* 弹窗标题 */
-.mk-pop-box-title {
-    font-size: 18px;
-    text-align: center;
-    font-weight: normal;
-    color: #333;
-    margin-bottom: 10px;
-}
-/* 弹窗主体内容 */
-.mk-pop-box-content {
-    margin-bottom: 13px;
-}
-.mk-pop-box-content p, .mk-pop-box-content p a {
-    font-size: 14px;
-    color: #808080;
-    text-decoration: none;
-    line-height: 20px;
-    line-height: 1.6em;
-    margin-bottom: 10px;
-}
-.mk-pop-box-content p a:hover { 
-    color: #fa7f40;
-}
-/* 弹窗中的按钮 */
-.mk-pop-box-btn {
-    cursor: pointer;
-    margin: 0 auto;
-    min-width: 50px;
-    outline: none;
-    text-align: center;
-    border-radius: 2px;
-    display: block;
-    height: 34px;
-    line-height: 35px;
-    padding: 0 40px;
-    font-size: 14px;
-    background: #ff8140;
-    border: 1px solid #f77c3d;
-    color: #fff;
-    box-shadow: 0px 1px 2px rgba(0,0,0,0.25);
-}
-.mk-pop-box-btn:hover {
-    background: #f7671d;
-    border: 1px solid #f06923;
-}
-/* 弹窗遮罩层 */  
-.mk-pop-box:before {
-    content: "";
-    color: #C7EDCC;
-    background-color: #000;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0.59;
-    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 59);
-    filter: alpha(opacity = 59);
     z-index: -1;
-} 
+    border-radius: 9em;
-
+    box-shadow: 0 0 0 7px rgba(0,0,0,.4);
-/* 页面主体部分 */  
+    width: 30px;
-.container {
-    height: 500px;
-    width: 100%;
-    text-align: center;
-    padding: 10px;
-}
-
-/* 大标题 */
-.title {
-    padding-top: 100px;
-    padding-bottom: 26px;
-}
-.baidu-logo {
-    height: 100px;
-    margin-bottom: -20px;
-}
-
-/* 搜索表单 */
-.mk-search-form {
-    max-width: 650px;
-    margin: 0 auto;
-    font-size: 16px;
-}
-.mk-search-form input {
-    float: left;
-    padding: 0 6px;
-    width: 77%;
-    height: 37px;
-    border: 1px solid #d8d8d8;
-    border-right-color: transparent;
-    line-height: 37px;
-    font-size: 1em;
-}
-.mk-search-form input:focus {
-    border: 1px solid #3385ff;
-    border-right-color: transparent;
-    outline: none;
-}
-.mk-search-form button {
-    cursor: pointer;
-    border: none;
-    background-color: #3385ff;
-    color: white;
-    position: relative;
-    overflow: visible;
-    width: 23%;
-    height: 37px;
-    text-transform: uppercase;
-    font-size: 1em;
-}
-.mk-search-form button:hover {
-    background-color: #317ef3;
-    box-shadow: 1px 1px 1px #ccc;
-}
-
-/* 提示语 */
-#instructions { 
-    display: inline-block;
-    margin-top: 40px;
-    padding: 30px 2px;
-    color: #999999;
-    font-size: 20px;
-}
-
-/* 生成输出框 */
-#output-box {
-    display: none;
-}
-.btn {
-    display: inline-block;
-    width: 100px;
-    height: 35px;
-    line-height: 38px;
-    margin: 0 10px;
-    background-color: #3385ff;
-    color: white;
-    text-align: center;
-    font-size: 0.8em;
-    border: none;
-    cursor: pointer;
-}
-.btn:hover {
-    opacity: 0.8;
-}
-
-/*链接框*/
-#output-link {
-    width: 300px;
     height: 30px;
-    font-size: 25px;
+    opacity: 0;
-    margin-bottom: 20px;
-    vertical-align: middle;
 }
 
-/* 页脚 */
+#arrow.active::after {
-.copyright, .copyright a {
+    -webkit-animation: bubble-scale 1s ease;
-    color: #999;
+            animation: bubble-scale 1s ease;
-    text-align: center;
-    text-decoration: none;
-    font-size: 14px;
 }
 
+@-webkit-keyframes bubble-scale {
+    from {
+        transform: scale(0);
+        opacity: 1
+    }
+    to {
+        transform:scale(2);
+        opacity: 0
+    }
+}
+
+@keyframes bubble-scale {
+    from {
+        transform: scale(0);
+        opacity: 1
+    }
+    to {
+        transform: scale(2);
+        opacity: 0
+    }
+}
+
+
+
 /* 响应式优化 */
-@media screen and (max-width: 666px) {  
+@media screen and (max-width: 650px) {  
-    .title {
+    #search {
+        margin: 0 10px;
+        height: auto;
+        min-height: 200px;
+    }
+    
+    .search-header img {
+        width: 180px;
+        margin: 0 -16px -12px;
+    }
+    
+    #search-form {
+        bottom: 10px;
+        border: 1px solid #363636;
+    }
+    
+    .search-form-input {
+        right: 81px;
+    }
+    
+    .search-form-input input {
+        border: none;
+        border-radius: 0;
+        padding: 12px;
+    }
+    
+    .search-form-group button {
+        width: 81px;
+        height: 44px;
+        padding: 0 10px;
+        border: none;
+        border-left: 1px solid #e8e8e8;
+        border-radius: 0;
         font-size: 16px;
-        font-weight: 400;
+        font-weight: 700;
-        padding-top: 100px;
+        line-height: 46px;
+        white-space: nowrap;
+        letter-spacing: -1px;
+        color: #38f;
+        background: #fff;
     }
     
-    .baidu-logo {
+    .search-form-group button:active {
-        height: 50px;
+        background-color: #fdfafa;
-        margin: 0 5px -8px;
     }
-
+    .search-form-group button:hover {
-    .mk-search-form {
+        background-color: #fdfafa;
-        font-size: 14px;
     }
     
-    #instructions {
+    #function {
-        font-size: 14px;
+        position: relative;
+        top: 0;
+        margin-top: 50px;
+        padding: 0 10px;
     }
-
+    
-    #output-box {
+    #stop {
         margin-top: 30px;
     }
-    /* 链接框 */
+    
-    #output-link {
+    #footer {
-        width: 100%;
+        padding: 0;
-        height: 30px;
+    }
-        font-size: 20px;
+    
-        margin-bottom: 20px;
+    #arrow {
-        vertical-align: middle;
+        background: url(../img/hand.png) no-repeat;
     }
 }

index.html

@@ -1,7 +1,6 @@
-<!doctype html> 
+<!DOCTYPE html>
-<html> 
+<html xmlns="http://www.w3.org/1999/xhtml">
-<head> 
+<head>
-    <meta charset="utf-8">
     <meta name="renderer" content="webkit">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="Cache-Control" content="no-transform">
@@ -9,53 +8,59 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     
     <title>让我帮你百度一下 | Let Me Baidu That For You</title>
-    <link href="css/style.css" rel="stylesheet" type="text/css">
+    
+    <link rel="stylesheet" href="css/style.css" />
+    
+    <script src="js/jquery.min.js"></script>
+    <script src="js/base64.min.js"></script>
+    <script src="js/clipboard.min.js"></script>
+    <script src="js/script.js"></script>
 </head>
 <body>
-    <div class="container">
+    <section id="search">
-        <div>
+        <div class="search-header">
-            <h1 class="title">让我帮你 <img src="img/baidu_logo.png" class="baidu-logo" alt="百度" title="让我帮你百度一下"> 一下</h1>
+            <h2>
-            <div class="mk-search-form">
+                <span class="let-me">让我帮你</span> 
-                <input type="text" id="kw">
+                <img src="img/baidu_logo.png" alt="百度" title="让我帮你百度一下"> 
-                <button id="search" class="anim-trans">百度一下</button>
+                <span class="for-you">一下</span>
-            </div>
+            </h2>
         </div>
         
-        <div id="instructions">输入一个问题，然后点击百度一下</div>
+        <form id="search-form">
-        
+            <div class="search-form-group">
-        <div id="output-box">
+                <div class="search-form-input">
-            <input type="text" id="output-link" readonly>
+                    <input type="search" id="kw" maxlength="255" autocomplete="off" required>
-            <div>
+                </div>
-                <button class="btn btn-copy anim-trans" data-clipboard-target="#output-link">复制</button>
+                <button id="search-submit">百度一下</button>
-                <button class="btn anim-trans" id="btn-preview">预览</button>
             </div>
-        </div>
+        </form>
-    </div>
+    </section>
     
-    <footer class="copyright">
+    <section id="function">
-        Copyright &copy; <a href="https://mkblog.cn" target="_blank">mkblog.cn</a>
+        <p id="tips">输入一个问题，然后点击百度一下</p>
+        
+        <button id="stop">快停下！我是自己人</button>
+        
+        <div id="output">
+            <textarea id="url-output" rows="3" readonly></textarea>
+            <div class="tool-btns">
+                <button data-clipboard-target="#url-output">复制</button>
+                <button id="preview">预览</button>
+            </div>
+        </div>
+    </section>
+    
+    <footer id="footer">
+        <ul class="footer-left">
+            <li><a href="https://github.com/mengkunsoft/lmbtfy" target="_blank">源码下载</a></li>
+            <li><a href="http://lab.mkblog.cn/" target="_blank">更多好玩</a></li>
+        </ul>
+        
+        <ul class="footer-right">
+            <li>* 本站与百度公司没有任何联系，baidu 以及本站出现的百度公司 Logo 是百度公司的商标</li>
+        </ul>
     </footer>
     
-    <!-- 关于弹窗 -->
+    <div id="arrow"></div>
-    <div id="about-box" class="mk-pop-box">
-        <div class="mk-pop-box-inner">
-            <h3 class="mk-pop-box-title">专治各种伸手党</h3>
-            
-            <div class="mk-pop-box-content">
-                <p>创意及原始代码来自 <a href="http://lmbtfy.cn/" target="_blank" rel="nofollow">lmbtfy.cn</a>，<a href="http://lab.mkblog.cn" target="_blank">孟坤网页实验室</a>完善了其前端界面。</p>
-                <p>须知：本站与百度公司没有任何联系，baidu 以及本站出现的百度公司 Logo 是百度公司的商标。</p>
-            </div>
-            
-            <button class="mk-pop-box-btn anim-trans" onclick="$('#about-box').fadeOut(200);">我知道了</button>
-        </div>
-    </div>
-	
-    <div class="about anim-trans" title="点击查看帮助信息" onclick="showAbout()">?</div>
-    
-    <img src="img/arrow.png" id="arrow">
-    
-    <script src="js/clipboard.min.js"></script>
-    <script src="js/jquery.min.js"></script>
-    <script src="js/lmbtfy.js"></script>
 </body>
-</html>
+</html>

js/base64.min.js

@@ -0,0 +1,10 @@
+/*
+ *  base64.js
+ *
+ *  Licensed under the BSD 3-Clause License.
+ *    http://opensource.org/licenses/BSD-3-Clause
+ *
+ *  References:
+ *    http://en.wikipedia.org/wiki/Base64
+ */
+!function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b(a):"function"==typeof define&&define.amd?define(b):b(a)}("undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:this,function(a){"use strict";var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z;return a=a||{},b=a.Base64,c="2.6.1",d="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",e=function(a){var c,d,b={};for(c=0,d=a.length;d>c;c++)b[a.charAt(c)]=c;return b}(d),f=String.fromCharCode,g=function(a){var b;return a.length<2?(b=a.charCodeAt(0),128>b?a:2048>b?f(192|b>>>6)+f(128|63&b):f(224|15&b>>>12)+f(128|63&b>>>6)+f(128|63&b)):(b=65536+1024*(a.charCodeAt(0)-55296)+(a.charCodeAt(1)-56320),f(240|7&b>>>18)+f(128|63&b>>>12)+f(128|63&b>>>6)+f(128|63&b))},h=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g,i=function(a){return a.replace(h,g)},j=function(a){var b=[0,2,1][a.length%3],c=a.charCodeAt(0)<<16|(a.length>1?a.charCodeAt(1):0)<<8|(a.length>2?a.charCodeAt(2):0),e=[d.charAt(c>>>18),d.charAt(63&c>>>12),b>=2?"=":d.charAt(63&c>>>6),b>=1?"=":d.charAt(63&c)];return e.join("")},k=a.btoa&&"function"==typeof a.btoa?function(b){return a.btoa(b)}:function(a){if(a.match(/[^\x00-\xFF]/))throw new RangeError("The string contains invalid characters.");return a.replace(/[\s\S]{1,3}/g,j)},l=function(a){return k(i(String(a)))},m=function(a,b){return b?l(String(a)).replace(/[+\/]/g,function(a){return"+"==a?"-":"_"}).replace(/=/g,""):l(String(a))},n=function(a){return m(a,!0)},o=function(a){return k(Array.from(a,function(a){return String.fromCharCode(a)}).join(""))},p=/[\xC0-\xDF][\x80-\xBF]|[\xE0-\xEF][\x80-\xBF]{2}|[\xF0-\xF7][\x80-\xBF]{3}/g,q=function(a){switch(a.length){case 4:var b=(7&a.charCodeAt(0))<<18|(63&a.charCodeAt(1))<<12|(63&a.charCodeAt(2))<<6|63&a.charCodeAt(3),c=b-65536;return f((c>>>10)+55296)+f((1023&c)+56320);case 3:return f((15&a.charCodeAt(0))<<12|(63&a.charCodeAt(1))<<6|63&a.charCodeAt(2));default:return f((31&a.charCodeAt(0))<<6|63&a.charCodeAt(1))}},r=function(a){return a.replace(p,q)},s=function(a){var b=a.length,c=b%4,d=(b>0?e[a.charAt(0)]<<18:0)|(b>1?e[a.charAt(1)]<<12:0)|(b>2?e[a.charAt(2)]<<6:0)|(b>3?e[a.charAt(3)]:0),g=[f(d>>>16),f(255&d>>>8),f(255&d)];return g.length-=[0,0,2,1][c],g.join("")},t=a.atob&&"function"==typeof a.atob?function(b){return a.atob(b)}:function(a){return a.replace(/\S{1,4}/g,s)},u=function(a){return t(String(a).replace(/[^A-Za-z0-9\+\/]/g,""))},v=function(a){return r(t(a))},w=function(a){return v(String(a).replace(/[-_]/g,function(a){return"-"==a?"+":"/"}).replace(/[^A-Za-z0-9\+\/]/g,""))},x=function(a){return Uint8Array.from(u(a),function(a){return a.charCodeAt(0)})},y=function(){var c=a.Base64;return a.Base64=b,c},a.Base64={VERSION:c,atob:u,btoa:k,fromBase64:w,toBase64:m,utob:i,encode:m,encodeURI:n,btou:r,decode:w,noConflict:y,fromUint8Array:o,toUint8Array:x},"function"==typeof Object.defineProperty&&(z=function(a){return{value:a,enumerable:!1,writable:!0,configurable:!0}},a.Base64.extendString=function(){Object.defineProperty(String.prototype,"fromBase64",z(function(){return w(this)})),Object.defineProperty(String.prototype,"toBase64",z(function(a){return m(this,a)})),Object.defineProperty(String.prototype,"toBase64URI",z(function(){return m(this,!0)}))}),a["Meteor"]&&(Base64=a.Base64),"undefined"!=typeof module&&module.exports?module.exports.Base64=a.Base64:"function"==typeof define&&define.amd&&define([],function(){return a.Base64}),{Base64:a.Base64}});

js/lmbtfy.js

@@ -1,110 +0,0 @@
-/**
- * 原始代码来自 bangbang(http://lmbtfy.cn/)，mengkun(https://mkblog.cn) 在原作的基础上作了一些小修改，以适应移动端浏览
- * Github 地址：https://github.com/mengkunsoft/lmbtfy
- * 
- * 转载或使用时，还请保留以上信息，谢谢！
- */
-$(document).ready(function () {
-    /* 复制结果 */ 
-    var clipboard = new ClipboardJS('.btn-copy');
-    clipboard.on('success', function(e) {
-        if (e.trigger.disabled === false || e.trigger.disabled === undefined) {
-            showTips('<span style="color: #4caf50">复制成功！赶紧把链接甩给伸手党们！</span>');
-        }
-    });
-    clipboard.on('error', function(e) {
-        showTips('<span style="color: red">复制失败，请手动复制</span>');
-    });
-    
-    var $outputLink = $('#output-link');
-    $('#search').on('click', function () {
-        var link = window.location.origin + window.location.pathname + '?' + encodeURIComponent($('#kw').val());
-        $('#output-box').fadeIn();
-        showTips('复制下面的地址');
-        $outputLink.val(link).focus().select();
-        
-        /* 尝试缩短网址 */ 
-        $.ajax({
-            url: 'api.php?url=' + encodeURIComponent(link),
-            dataType: 'json',
-            success: function (data) {
-                if(data.code == 200) $outputLink.val(data.result).focus().select();
-            }
-        });
-    });
-    
-    /* 预览 */ 
-    var $container = $('.container');
-    $container.on('click', '#btn-preview', function () {
-        var link = $outputLink.val();
-        if (!!link) {
-            window.open(link);
-        }
-    });
-    
-    /* 回车搜索 */ 
-    var $kw = $('#kw');
-    $kw.on('keydown', function (e) {
-        if (e.keyCode == 13) {
-            $('#search').trigger('click');
-        }
-    });
-    
-    if (!!window.location.search) {
-        var kw = decodeURIComponent(window.location.search.substr(1));
-        var $arrow = $('#arrow');
-        
-        showTips('让我来帮你百度一下');
-        setTimeout(function() {
-            showTips('1、找到输入框并选中');
-            $arrow.show().animate({
-                left: $kw.offset().left + 10 + 'px',
-                top: ($kw.offset().top + $kw.height()/2) + 'px'
-            }, 2000, function () {
-                showTips('2、输入你的问题');
-                $arrow.hide();
-                var $kw = $('#kw');
-                $kw.focus();
-                var i = 0;
-                var interval = setInterval(function () {
-                    $kw.val(kw.substr(0,i));
-                    i++;
-                    if (i > kw.length) {
-                        clearInterval(interval);
-                        showTips('3、点击下“百度一下”按钮');
-                        $arrow.show();
-                        var $search = $('#search');
-                        $arrow.animate({
-                            left: $search.offset().left + $search.width()/2 + 'px',
-                            top: $search.offset().top + $search.height()/2 + 'px'
-                        }, 1000, function () {
-                            showTips('<strong>这对你而言就是这么困难么？</strong>');
-                            setTimeout(function () {
-                                window.location = 'https://www.baidu.com/s?ch=3&ie=utf-8&wd=' + encodeURIComponent(kw);
-                            }, 2000);
-                        });
-                    }
-                }, 200);
-            });
-        }, 1000);
-    }
-});
-
-/* 显示提示信息 */ 
-function showTips(tips) {
-    $('#instructions').html(tips);
-}
-
-/* 弹出关于信息 */ 
-function showAbout() {
-    var windowWidth = $(window).width(),
-       windowHeight = $(window).height(),
-        popupHeight = $("#about-box").height(),     
-         popupWidth = $("#about-box").width(); 
-    
-    $("#about-box").css({
-        "position": "absolute",
-            "left": windowWidth / 2 - popupWidth / 2,
-             "top": windowHeight / 2 - popupHeight / 2
-    }).fadeIn(200); 
-}

js/script.js

@@ -0,0 +1,124 @@
+/**
+ * 让我帮你百度一下【重置版】
+ * GitHub 开源地址：https://github.com/mengkunsoft/lmbtfy
+ **
+ * 原始版本来自 bangbang(http://lmbtfy.cn/)，mengkun(https://mkblog.cn) 在原作的基础上进行了重置，风格变更为新版百度 UI，并适配了移动端
+ * 交互效果参考了 不会百度么？(http://buhuibaidu.me/)
+ **
+ * 转载或使用时，还请保留以上信息，谢谢！
+ */ 
+
+/* 扩展一个getUrlParam的方法 */
+$.getUrlParam = function(name){
+    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
+    var r = window.location.search.substr(1).match(reg);
+    if (r !== null) return unescape(r[2]); return null;
+};
+
+$(function() {
+    var $kw = $('#kw'),
+        $searchSubmit = $('#search-submit');
+        $urlOutput = $('#url-output'),
+        $tips = $('#tips'),
+        $stop = $('#stop'),
+        $arrow = $('#arrow');
+    
+    var stepTimeout, typeInterval;
+    
+    /* 获取并解析查询参数 */ 
+    var query = $.getUrlParam('q');
+    if(!!query) {
+        try {
+            query = Base64.decode(query);
+        } catch(e) {
+            console.log(e);
+        }
+    }
+    
+    if(!!query) {
+        $tips.html('让我来教你正确的打开方式');
+        $stop.fadeIn();
+        
+        stepTimeout = setTimeout(function() {
+            $tips.html('1、找到输入框并选中');
+            
+            $arrow.removeClass('active').show().animate({
+                left: $kw.offset().left + 20 + 'px',
+                top: ($kw.offset().top + $kw.outerHeight() / 2) + 'px'
+            }, 2000, function () {
+                $tips.html('2、输入你要找的内容');
+                $arrow.addClass('active');
+                
+                stepTimeout = setTimeout(function() {
+                    $arrow.fadeOut();
+                    
+                    var i = 0;
+                    typeInterval = setInterval(function () {
+                        $kw.val(query.substr(0, i));
+                        if (++i > query.length) {
+                            clearInterval(typeInterval);
+                            $tips.html('3、点击下“百度一下”按钮');
+                            
+                            $arrow.removeClass('active').show().animate({
+                                left: $searchSubmit.offset().left + $searchSubmit.width()  / 2 + 'px',
+                                top:  $searchSubmit.offset().top  + $searchSubmit.height() / 2 + 'px'
+                            }, 1000, function () {
+                                $tips.html('<strong>怎么样，学会了吗？</strong>');
+                                $arrow.addClass('active');
+                                
+                                stepTimeout = setTimeout(function () {
+                                    window.location = 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURIComponent(query);
+                                }, 1000);
+                            });
+                        }
+                    }, 200);
+                }, 500);
+            });
+        }, 1000);
+    }
+    
+    /* 自己人，停下 */ 
+    $stop.click(function() {
+        clearTimeout(stepTimeout);
+        clearInterval(typeInterval);
+        $stop.hide();
+        $arrow.stop().hide();
+        $kw.val(query);
+        query = false;
+        $tips.html('输入一个问题，然后点击百度一下');
+    });
+    
+    /* 提交 */
+    $('#search-form').submit(function() {
+        if(!!query) return false;
+        
+        var question = $.trim($kw.val());
+        if(!question) {
+            $kw.val('');
+            $tips.html('<span style="color: red">搜了个寂寞？</span>');
+        } else {
+            $tips.html('↓↓↓ 复制下面的链接，教伸手党使用百度');
+            
+            $('#output').fadeIn();
+            $urlOutput.val(window.location.origin + window.location.pathname + '?q=' + Base64.encode(question)).focus().select();
+        }
+        return false;
+    });
+    
+    /* 复制结果 */ 
+    var clipboard = new ClipboardJS('[data-clipboard-target]');
+    clipboard.on('success', function(e) {
+        $tips.html('<span style="color: #4caf50">复制成功！赶紧把链接甩给伸手党们！</span>');
+    });
+    clipboard.on('error', function(e) {
+        $tips.html('<span style="color: red">复制失败，请手动复制...</span>');
+    });
+    
+    /* 预览 */ 
+    $('#preview').click(function() {
+        var link = $urlOutput.val();
+        if (!!link) {
+            window.open(link);
+        }
+    });
+});