修复因 CDN 失效导致无法使用的问题

修复因 CDN 失效导致无法使用的问题重构部分代码，界面更美观
2019-04-27 13:50:38 +08:00
parent 6fcd55bef0
commit 85a33bb3c3
9 changed files with 377 additions and 330 deletions
--- a/README.md
+++ b/README.md
@@ -1,6 +1,42 @@
-# lmbtfy
-让我帮你百度一下-优化版
+<p align="center">
+<img src="https://user-images.githubusercontent.com/16880885/56845297-9c49cc80-68f1-11e9-94f5-cae16c730fe5.png" alt="让我帮你百度一下">
+</p>

-创意及代码来自lmbtfy.cn 以及lmbtfy.retaker.me，孟坤网页实验室完善了其前端界面。
+<h3 align="center"> 「Let Me Baidu That For You」</h3>

-在线演示地址：http://lab.mkblog.cn/lmbtfy/
+<p align="center">
+<a href="https://github.com/mengkunsoft/mk-letter-avatar/stargazers" target="_blank">
+<img src="https://img.shields.io/github/stars/mengkunsoft/mk-letter-avatar.svg" alt="GitHub stars">
+</a> 
+<a href="https://github.com/mengkunsoft/mk-letter-avatar/network" target="_blank">
+<img src="https://img.shields.io/github/forks/mengkunsoft/mk-letter-avatar.svg" alt="GitHub forks">
+</a> 
+<a href="https://github.com/mengkunsoft/mk-letter-avatar/issues" target="_blank">
+<img src="https://img.shields.io/github/issues/mengkunsoft/mk-letter-avatar.svg" alt="GitHub issues">
+</a> 
+<a href="https://github.com/mengkunsoft/mk-letter-avatar/blob/master/LICENSE" target="_blank">
+<img src="https://img.shields.io/github/license/mengkunsoft/mk-letter-avatar.svg" alt="GitHub license">
+</a>
+</p>
+
+让我帮你百度一下 - 优化版
+
+创意及代码来自 lmbtfy.cn 以及 lmbtfy.retaker.me，孟坤网页实验室在原作的基础上作了一些小修改，以适应移动端浏览
+
+### 在线演示
+-----
+
+[http://lab.mkblog.cn/lmbtfy/](http://lab.mkblog.cn/lmbtfy/)
+
+### 更新日志
+-----
+
+#### 2019/4/27
+- 修复因 CDN 失效导致无法使用的问题
+- 重构部分代码，界面更美观
+
+#### 2017/3/16
+- 将界面修改为响应式，以适应移动端访问
+
+#### 更早的版本
+- 原始代码来自 bangbang(http://lmbtfy.cn/)
--- a/api.php
+++ b/api.php
@@ -0,0 +1,38 @@
+<?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) {
+    $url = 'http://api.weibo.com/2/short_url/shorten.json?source=2849184197&url_long=' . $longUrl;
+    $ch = curl_init($url);  // 初始化
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // curl请求有返回的值
+    curl_setopt($ch, CURLOPT_HEADER, 0);
+    curl_setopt($ch, CURLOPT_ENCODING, '');
+    $output = curl_exec($ch);
+    curl_close($ch);
+    $obj = json_decode($output);
+    $output = isset($obj->urls[0]->url_short)? $obj->urls[0]->url_short: '';    // 取出短网址的值
+    return $output? $output: $longUrl;
+}
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,30 @@
-*{
+@charset "utf-8";
+
+div, span, p, a, img, footer, html, body, button, h1, h2, h3, h4, h5, input {
    font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }

-/*关于 按钮*/
-.about{
+.anim-trans {
+    -webkit-transition: .3s ease all;
+       -moz-transition: .3s ease all;
+         -o-transition: .3s ease all;
+            transition: .3s ease all;
+}
+
+/* 鼠标指针箭头 */
+#arrow {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 999;
+}
+
+/* 关于按钮 */
+.about {
    position: absolute;
    top: 1em;
    right: 1em;
@@ -14,235 +35,222 @@
    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);
+}

 /*弹窗层*/  
-
-.pop-box {   
-    z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/  
+.mk-pop-box {   
+    z-index: 9999;
    margin-bottom: 2px;   
    display: none;   
    position: fixed;
-    background: #FFF;   
-    text-align: center;
-    font-size: 16px;
-    width: 300px;
-}   
-.pop-box .caption{
-    font-size: 23px;
-    display: block;
-    text-align: left;
-    border-left: 4px solid #563d7c;
-    margin: 10px 0 10px 5px;
-    background: #eee;
-    padding: 3px;
-    color: #666;
-}  
-.pop-box .thanks{
-    /*text-indent: 30px;*/
-    padding: 0 10px;
-    text-align: left;
-    line-height: 25px;
-    color: #555;
-}
-.pop-box .copyBaidu{
-    font-size: 12px;
-    /*text-indent: 30px;*/
-    padding: 0 10px;
-    text-align: left;
-    line-height: 18px;
-    color: #999;
-}  
-.pop-box .thanks a{
-    margin: 0 2px;
-    color: #666;
-    text-decoration: none;
-} 
-.pop-box .thanks a:hover{
-    margin: 0 2px;
-    color: #666;
-    text-decoration: underline;
-} 
-
-.pop-box .readit{   /* “我知道了” */
    font-size: 14px;
-    line-height: 40px;
+    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;
-    transition: all 0.5s ease;
-	-webkit-transition: all 0.5s ease;
-	-moz-transition: all 0.5s ease;
-	-o-transition: all 0.5s ease;
-	-ms-transition: all 0.5s ease;
+    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);
 }
-.pop-box .readit:hover{   /* “我知道了” */
-    color: #666;
+.mk-pop-box-btn:hover {
+    background: #f7671d;
+    border: 1px solid #f06923;
 }
-
-.mask {   /*遮罩层*/  
-    color:#C7EDCC;
-    background-color:#000;
-    position:absolute;
+/* 弹窗遮罩层 */  
+.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;
 } 

-/*页面主体部分*/  
-.container{
+/* 页面主体部分 */  
+.container {
    height: 500px;
    width: 100%;
    text-align: center;
+    padding: 10px;
 }
-.title{
+
+/* 大标题 */
+.title {
    padding-top: 100px;
+    padding-bottom: 26px;
 }
-#kw {
-    width: 521px;
-    height: 20px;
-    padding: 9px 7px;
-    font: 16px arial;
-    border: 1px solid #d8d8d8;
-    border-bottom: 1px solid #ccc;
-    vertical-align: top;
-    outline: none;
-    margin-right: 0;
-}
-#kw:focus{
-    border-top: 1px solid #38f !important;
-    border-left: 1px solid #38f !important;
-    border-bottom: 1px solid #38f !important;
-}
-/*百度一下*/
-.btn {
-    cursor: pointer;
-    width: 102px;
-    height: 40px;
-    padding: 0;
-    border: 0;
-    background-color: #38f;
-    font-size: 16px;
-    color: white;
-    margin-left: -10px;
-}
-.logo {
+.baidu-logo {
    height: 100px;
    margin-bottom: -20px;
 }
-#instructions { /*提示语*/
+
+/* 搜索表单 */
+.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: 1.1em;
+    font-size: 20px;
 }
-.link {
-    /*margin-top: 100px;*/
-    display: block;
+
+/* 生成输出框 */
+#output-box {
+    display: none;
 }
-a.link_button {
+.btn {
    display: inline-block;
    width: 100px;
    height: 35px;
    line-height: 38px;
    margin: 0 10px;
-    background-color: #38f;
+    background-color: #3385ff;
    color: white;
    text-align: center;
    font-size: 0.8em;
-    text-decoration: none;
+    border: none;
+    cursor: pointer;
 }
+.btn:hover {
+    opacity: 0.8;
+}
+
 /*链接框*/
-.copyable{
+#output-link {
    width: 300px;
    height: 30px;
    font-size: 25px;
    margin-bottom: 20px;
    vertical-align: middle;
 }
-#arrow{
-    display: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-}
-footer{
-    color: gray;
+
+/* 页脚 */
+.copyright, .copyright a {
+    color: #999;
    text-align: center;
-}
-footer a{
-    color: gray;
    text-decoration: none;
+    font-size: 14px;
 }

-@media screen and (max-width: 666px) {  /*针对小屏幕的优化*/
-    
-    .title{
+/* 响应式优化 */
+@media screen and (max-width: 666px) {  
+    .title {
        font-size: 16px;
        font-weight: 400;
        padding-top: 100px;
    }
    
-    .logo {
+    .baidu-logo {
        height: 50px;
-        margin-bottom: -8px;
+        margin: 0 5px -8px;
+    }
+
+    .mk-search-form {
+        font-size: 14px;
    }
    
-    .search-box{
-        padding-top: 10px;
-        display: block;
-        width: 100%;
+    #instructions {
+        font-size: 14px;
    }
-    
-    #kw {
-        height: 20px;
-        font: 16px arial;
-        border: 1px solid #d8d8d8;
-        border-bottom: 1px solid #ccc;
-        vertical-align: top;
-        outline: none;
-        
-        float:left; 
-        width: 95%;
-        margin-right: -200px;
-    }
-    
-    /*百度一下*/
-    .btn {
-        height: 40px;
-        padding: 0;
-        border: 0;
-        background-color: #38f;
-        font-size: 16px;
-        color: white;
-        margin-left: -10px;
-        float: right; 
-        width: 100px;
-        z-index: 999999;
-    }
-    
-    .link{
+
+    #output-box {
        margin-top: 30px;
    }
-    
-    a.link_button {
-        display: inline-block;
-        width: 100px;
-        height: 35px;
-        line-height: 38px;
-        margin: 0 10px;
-        background-color: #38f;
-        color: white;
-        text-align: center;
-        font-size: 0.8em;
-        text-decoration: none;
-    }
-    /*链接框*/
-    .copyable{
-        width: 80%;
+    /* 链接框 */
+    #output-link {
+        width: 100%;
        height: 30px;
        font-size: 20px;
        margin-bottom: 20px;
--- a/favicon.ico
+++ b/favicon.ico
--- a/get.php
+++ b/get.php
@@ -1,51 +0,0 @@
-<?php 
-// 新浪短网址api
-// 编写：mengkun(http://mkblog.cn)
-
-echoJson(shortUrl(getParam('longUrl','http://lab.mkblog.cn/lmbtfy/')));
-
-/**
- * 短网址函数
- * @param $longUrl 原始网址
- * @return 缩短后的网址
- */
-function shortUrl($longUrl) {
-    $url = "http://api.weibo.com/2/short_url/shorten.json?source=2849184197&url_long=" . urlencode($longUrl);
-    $ch = curl_init($url);  //初始化
-    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // curl请求有返回的值
-    curl_setopt($ch, CURLOPT_HEADER, 0);
-    curl_setopt($ch, CURLOPT_ENCODING, "");
-    $output = curl_exec($ch);   //执行并获取HTML文档内容
-    curl_close($ch);    //释放curl句柄
-    // $obj = json_decode($output);
-    // $output = isset($obj->urls[0]->url_short)? $obj->urls[0]->url_short: '';    // 取出短网址的值
-    return $output;
-}
-
-/**
- * 获取GET或POST过来的参数
- * @param $key 键值
- * @param $default 默认值
- * @return 获取到的内容（没有则为默认值）
- */
-function getParam($key,$default='')
-{
-    return trim($key && is_string($key) ? (isset($_POST[$key]) ? $_POST[$key] : (isset($_GET[$key]) ? $_GET[$key] : $default)) : $default);
-}
-
-/**
- * 输出返回结果，支持输出 json和jsonp 格式
- * @param $data 输出的内容(json格式)
- */
-function echoJson($data)    //json和jsonp通用
-{
-    $callback = getParam('callback');
-    if($callback != '') //输出jsonp格式
-    {
-        die($callback.'('.$data.')');
-    }
-    else
-    {
-        die($data);
-    }
-}
--- a/index.html
+++ b/index.html
@@ -1,57 +1,61 @@
-<!DOCTYPE html>
-<html>
-<head lang="cn">
-    <meta charset="UTF-8">
-    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
+<!doctype html> 
+<html> 
+<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">
+    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>让我帮你百度一下|Let Me Baidu That For You</title>
+    
+    <title>让我帮你百度一下 | Let Me Baidu That For You</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
 </head>
 <body>
-    <img src="img/arrow.png" id="arrow">
-    <div class="about" title="点我点我！" onclick="showAbout()">?</div>
-    <div id="msgbox" class="pop-box">
-        <span class="caption"> 专治各种伸手党</span>
-        <div class="thanks">
-            创意及代码来自<a href="http://lmbtfy.cn/" target="_blank">lmbtfy.cn</a>
-            以及<a href="http://lmbtfy.retaker.me/" target="_blank">lmbtfy.retaker.me</a>，孟坤网页实验室完善了其前端界面。
-        </div>
-        <div class="thanks copyBaidu">
-            *本站与百度公司没有任何联系，baidu以及本站出现的百度公司Logo是百度公司的商标。
-        </div>
-        
-        <div class="readit" onclick="hideAbout();">我知道了</div>
-        
-    </div>
-	<div id="mask" class="mask"></div>
-
    <div class="container">
        <div>
-            <h1 class="title">需要我帮你<img src="img/baidu_logo.png" class="logo">么</h1>
-            <span class="search-box">
-                <input type="text" class="search-text" id="kw">
-                <button class="btn" id="search">百度一下</button>
-            </span>
+            <h1 class="title">让我帮你 <img src="img/baidu_logo.png" class="baidu-logo" alt="百度" title="让我帮你百度一下"> 一下</h1>
+            <div class="mk-search-form">
+                <input type="text" id="kw">
+                <button id="search" class="anim-trans">百度一下</button>
+            </div>
        </div>
-        <div id="instructions">
-            输入一个问题，然后按百度一下
-        </div>
-        <div class="link" style="display: none" id="link">
-            <input type="text" readonly id="lmbtfyLink" class="copyable">
+        
+        <div id="instructions">输入一个问题，然后点击百度一下</div>
+        
+        <div id="output-box">
+            <input type="text" id="output-link" readonly>
            <div>
-                <a class="link_button" href="javascript:void(0);" id="copy" data-clipboard-target="lmbtfyLink">复制</a>
-                <a class="link_button" href="javascript:void(0);" id="go" target="_blank">预览</a>
+                <button class="btn btn-copy anim-trans" data-clipboard-target="#output-link">复制</button>
+                <button class="btn anim-trans" id="btn-preview">预览</button>
            </div>
        </div>
    </div>
-    <footer>
-        Copyright &copy;&nbsp;<a href="http://mkblog.cn" target="_blank">mkblog.cn</a>
+    
+    <footer class="copyright">
+        Copyright &copy; <a href="https://mkblog.cn" target="_blank">mkblog.cn</a>
    </footer>
+    
+    <!-- 关于弹窗 -->
+    <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>
-<script src="//cdnjscn.b0.upaiyun.com/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
-<script src="//cdnjscn.b0.upaiyun.com/libs/jquery/2.1.1/jquery.min.js"></script>
-<script src="js/lmbtfy.js"></script>
-<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan  style='display:none;'  id='cnzz_stat_icon_1257545628'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1257545628%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
-
 </html>
--- a/js/clipboard.min.js
+++ b/js/clipboard.min.js
--- a/js/jquery.min.js
+++ b/js/jquery.min.js
--- a/js/lmbtfy.js
+++ b/js/lmbtfy.js
@@ -1,82 +1,88 @@
 /**
- * Created by bangbang on 14/10/10.
- * Revised by mengkun on 17/03/16
+ * 原始代码来自 bangbang(http://lmbtfy.cn/)，mengkun(https://mkblog.cn) 在原作的基础上作了一些小修改，以适应移动端浏览
+ * Github 地址：https://github.com/mengkunsoft/lmbtfy
+ * 
+ * 转载或使用时，还请保留以上信息，谢谢！
 */
- 
-function urlEncode(String) {
-    return encodeURIComponent(String).replace(/'/g,"%27").replace(/"/g,"%22");	
-}
- 
-$(document).ready(function (){
-    ZeroClipboard.config({swfPath: '//cdnjscn.b0.upaiyun.com/libs/zeroclipboard/2.1.6/ZeroClipboard.swf'});
-    var clip = new ZeroClipboard($('#copy'));
-    $('#search').on('click', function (){
-        var link = window.location.origin + window.location.pathname + '?' + urlEncode($('#kw').val());
-        $.ajax({ 
-            url: 'get.php?longUrl='+link,  
-            type: "GET",
-            dataType: "jsonp", //使用JSONP方法进行AJAX
-            cache: false,
-            success: function (data) {
-                if (data){
-                    if(!(typeof data.urls === undefined || typeof data.urls == "undefined"))   //防止短网址失败
-                    {
-                        link = data.urls[0].url_short;
-                    }
-                }
-                $('#go').attr("href",link);
-                $('#link').show();
-                $('#instructions').text('复制下面的地址,然后发给伸手党吧！');
-                $('#lmbtfyLink').val(link).focus().select();
-            }
-        })
-    });
-    var $container = $('.container');
-    $container.on('click', '#go', function (){  //点击预览
-        var link = $('#lmbtfyLink').val();
-        if (!!link){
-            //window.open(link); //新窗口打开
-            //window.location = link;
+$(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){
+        if (e.keyCode == 13) {
            $('#search').trigger('click');
        }
    });
-    if (!!window.location.search){
+    
+    if (!!window.location.search) {
        var kw = decodeURIComponent(window.location.search.substr(1));
-        var $instructions = $('#instructions');
        var $arrow = $('#arrow');
-        setTimeout(function (){
-            $instructions.text('1、找到输入框并选中');
+        
+        showTips('让我来帮你百度一下');
+        setTimeout(function() {
+            showTips('1、找到输入框并选中');
            $arrow.show().animate({
                left: $kw.offset().left + 10 + 'px',
                top: ($kw.offset().top + $kw.height()/2) + 'px'
-            }, 2000, function (){
-                $instructions.text('2、输入你的问题');
+            }, 2000, function () {
+                showTips('2、输入你的问题');
                $arrow.hide();
                var $kw = $('#kw');
                $kw.focus();
                var i = 0;
-                var interval = setInterval(function (){
+                var interval = setInterval(function () {
                    $kw.val(kw.substr(0,i));
                    i++;
-                    if (i > kw.length){
+                    if (i > kw.length) {
                        clearInterval(interval);
-                        $instructions.text('3、按下“百度一下”按钮');
+                        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 () {
-                            $instructions.html('<strong>这对你而言就是这么困难么？</strong>');
-                            setTimeout(function (){
-                                window.location = 'http://www.baidu.com/s?ch=3&ie=utf-8&wd=' + encodeURIComponent(kw);
+                            showTips('<strong>这对你而言就是这么困难么？</strong>');
+                            setTimeout(function () {
+                                window.location = 'https://www.baidu.com/s?ch=3&ie=utf-8&wd=' + encodeURIComponent(kw);
                            }, 2000);
-                        })
+                        });
                    }
                }, 200);
            });
@@ -84,21 +90,21 @@ $(document).ready(function (){
    }
 });

-
-function showAbout()  //弹出消息
-{
-    var windowWidth = $(window).width();
-    var windowHeight = $(window).height();
-   
-   var popupHeight = $("#msgbox").height();       
-    var popupWidth = $("#msgbox").width(); 
-        //添加并显示遮罩层   
-    $("#mask").width(windowWidth).height(windowHeight).click(function() {hideAbout(); }).fadeIn(200); 
-    $("#msgbox").css({"position": "absolute","left":windowWidth/2-popupWidth/2,"top":windowHeight/2-popupHeight/2}).fadeIn(200); 
+/* 显示提示信息 */ 
+function showTips(tips) {
+    $('#instructions').html(tips);
 }

-function hideAbout()  //隐藏弹出的提示框
-{
-    $("#mask").fadeOut(200);
-    $("#msgbox").fadeOut(200); 
+/* 弹出关于信息 */ 
+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); 
 }