序言

昨天我在微信群里面看了一个很有趣的网站，就是输入自己想要输入的问题，然后再帮你生成一个链接，你访问后就自动给你跳转到相应的百度链接上去，这个网站实现并不是很难，只是很有趣而已，所以在这里分享一个自己纯手写的，原生js写出来的“让我帮你百度一下”这个站点，先看看效果图吧！

github地址：https://github.com/wangluozhe/baiduyx/tree/master

zip源码：https://codeload.github.com/wangluozhe/baiduyx/zip/master

源码展示效果地址：https://wangluozhe.github.io/baiduyx/

上面就是这个网站的效果图，怎么样简单吧。

HTML页面

<!DOCTYPE html>
<!--作者：LeeGene
-->
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"><title>让我帮你百度一下</title></head><body><img id="arrow" src="img/arrow.png" alt="arrow"><span class="about">?</span><div class="container"><h1 class="title">需要我帮你<img class="baidu" src="img/baidu_logo.png" alt="百度">么</h1><span class="search-container"><input type="text" id="search" /><input type="button" id="get" class="button" value="百度一下" /></span><div id="instrcutions">输入一个问题，然后按百度一下</div><div id="link"><input type="text" readonly="readonly" id="url" /><div><input style="margin: 0 10px;" type="button" class="button" id="copy" value="复制" /><input style="margin: 0 10px;" type="button" class="button" id="skip" value="预览" /></div></div></div></body>
</html>

页面没有CSS样式：

这个样子是不是很丑，给他加上css样式。

CSS样式

<style type="text/css">*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}html,body{width: 100%;height: 100%;}img{font-size: 0;}#arrow{display: none;position: absolute;top: 0;left: 0;transition: transform 2s ease-in-out;-webkit-transition: transform 2s ease-in-out;-moz-transition: transform 2s ease-in-out;}.about{position: absolute;width: 25px;height: 25px;display: inline-block;text-align: center;line-height: 25px;background-color: rgba(0,0,0,.5);border-radius: 50%;float: right;color: white;top: 15px;right: 15px;cursor: pointer;}.container{height: 500px;margin: auto;text-align: center;}.title{text-align: center;padding-top: 100px;margin-bottom: 20px;}.baidu{height: 100px;margin-bottom: -20px;}#search{width: 537px;height: 40px;padding: 9px 7px;outline: 0;border: 1px solid #d8d8d8;vertical-align: top;font-size: 16px;}.button{width: 102px;height: 40px;background-color: #38f;border: 0;padding: 0;color: white;cursor: pointer;margin-left: -10px;}#instrcutions{color: #999;margin-top: 70px;font-size: 1.1em;margin-bottom: 40px;}#url{width: 300px;height: 40px;margin-bottom: 20px;outline: 0;border: 1px solid #D8D8D8;font-size: 20px;}#link{display: none;}@media screen and (max-width:668px) {.container{padding: 15px;}.title{font-size: 1em;font-weight: normal;}.baidu{height: 50px;margin-bottom: -8px;}.search-container{width: 100%;}#search{width: calc(100% - 102px);}}
</style>

页面带有CSS样式：

是不是效果完全不一样了，但是仅仅有这两个还不行，还得有鼠标移动动画以及文字一一输出动画和跳转链接动画，所以还得依靠js来实现这几个功能，这样就能完成咱们的这个项目了。

JS实现功能

<script type="text/javascript">// 获取链接并显示在网页上function getLink(){document.getElementById('link').style.display = "block";var value = document.getElementById('search').value;var base_url = location.href;url = base_url + "?" + value;document.getElementById('url').value = url;document.getElementById('url').select();document.getElementById('instrcutions').innerText = "复制下面的地址,然后发给伸手党吧！";}// 将链接自动拷贝到剪切板中function copyLink(){document.execCommand('copy');}// 跳转网页到所生成的链接上function skipLink(){location.href = url;}// 获取网页顶部get传递的参数,如:http://127.0.0.1/?123,问号后面的123就是get传递的参数function getVariable(){var link = location.href;var variable = link.split('?')[1];return variable;}// 自动执行(function(window){var variable = getVariable(); // 获取网页链接的get参数// 实现点击"百度一下"按钮就获取链接并显示在网页上document.getElementById('get').addEventListener('click',function(){getLink();});// 实现点击"复制"按钮就将生成的链接复制到剪切板上document.getElementById('copy').addEventListener('click',function(){copyLink();});// 实现点击"预览"按钮就跳转到生成的链接上document.getElementById('skip').addEventListener('click',function(){skipLink();});// 实现点击"?"文本就弹出提示声明document.getElementsByClassName('about')[0].addEventListener('click',function(){alert('*本站与百度公司没有任何联系，baidu以及本站出现的百度公司Logo是百度公司的商标。');});if(variable){  // 判断有没有get传递的参数,有就进入动画效果,没有就保持不变var arrow = document.getElementById('arrow');var search = document.getElementById('search');var instrcutions = document.getElementById('instrcutions');var search_offsetX = search.offsetLeft + 8;  // 获取搜索框的X轴位置var search_offsetY = search.offsetTop + 10;  // 获取搜索框的Y轴位置arrow.style.display = "block";instrcutions.innerText = "1、找到输入框并选中"; // 鼠标进行第一层动画的提示语setTimeout(function(){  // 鼠标进行第一层动画arrow.style.transform = "translate(" + search_offsetX + "px," + search_offsetY + "px)";},0);(function(){setTimeout(function(){   // 鼠标进行第二层动画var variable = decodeURIComponent(getVariable());var index = 0;   // 给与一个下标号arrow.style.display = "none";instrcutions.innerText = "2、输入你的问题";   // 鼠标进行第二层动画的提示语var a = setInterval(function(){    // 文字一一输入的特效if(index == variable.length){ // 判断输出字符串是否到达极限,并且鼠标进行第三层动画clearInterval(a);   // 到达极限删除自身,避免死循环浪费内存instrcutions.innerText = "3、按下“百度一下”按钮";    // 鼠标进行第三层动画的提示语arrow.style.display = "block";var get = document.getElementById('get');var get_offsetX = get.offsetLeft + 51;   //获取"百度一下"按钮的X轴位置var get_offsetY = get.offsetTop + 20;  //获取"百度一下"按钮的Y轴位置arrow.style.transform = "translate("+ get_offsetX +"px," + get_offsetY + "px)";setTimeout(function(){instrcutions.innerText = "这对你而言就是这么困难么？";      // 第三层动画结束语},2000);setTimeout(function(){location.href = "https://www.baidu.com/s?ch=3&ie=utf-8&wd=" + variable; // 自动跳转到百度搜索界面},3000);}search.value = variable.substr(0,index++);    // 没达到极限继续输出字符串},200);},2000);})();}})(window);
</script>

页面带有JS功能：

整个结构就是这个样子，js文件中有解释，所以这里就不一一解释了

完整页面源码

<!DOCTYPE html>
<!--作者：LeeGene
-->
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"><title>让我帮你百度一下</title><style type="text/css">*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}html,body{width: 100%;height: 100%;}img{font-size: 0;}#arrow{display: none;position: absolute;top: 0;left: 0;transition: transform 2s ease-in-out;-webkit-transition: transform 2s ease-in-out;-moz-transition: transform 2s ease-in-out;}.about{position: absolute;width: 25px;height: 25px;display: inline-block;text-align: center;line-height: 25px;background-color: rgba(0,0,0,.5);border-radius: 50%;float: right;color: white;top: 15px;right: 15px;cursor: pointer;}.container{height: 500px;margin: auto;text-align: center;}.title{text-align: center;padding-top: 100px;margin-bottom: 20px;}.baidu{height: 100px;margin-bottom: -20px;}#search{width: 537px;height: 40px;padding: 9px 7px;outline: 0;border: 1px solid #d8d8d8;vertical-align: top;font-size: 16px;}.button{width: 102px;height: 40px;background-color: #38f;border: 0;padding: 0;color: white;cursor: pointer;margin-left: -10px;}#instrcutions{color: #999;margin-top: 70px;font-size: 1.1em;margin-bottom: 40px;}#url{width: 300px;height: 40px;margin-bottom: 20px;outline: 0;border: 1px solid #D8D8D8;font-size: 20px;}#link{display: none;}@media screen and (max-width:668px) {.container{padding: 15px;}.title{font-size: 1em;font-weight: normal;}.baidu{height: 50px;margin-bottom: -8px;}.search-container{width: 100%;}#search{width: calc(100% - 102px);}}</style></head><body><img id="arrow" src="img/arrow.png" alt="arrow"><span class="about">?</span><div class="container"><h1 class="title">需要我帮你<img class="baidu" src="img/baidu_logo.png" alt="百度">么</h1><span class="search-container"><input type="text" id="search" /><input type="button" id="get" class="button" value="百度一下" /></span><div id="instrcutions">输入一个问题，然后按百度一下</div><div id="link"><input type="text" readonly="readonly" id="url" /><div><input style="margin: 0 10px;" type="button" class="button" id="copy" value="复制" /><input style="margin: 0 10px;" type="button" class="button" id="skip" value="预览" /></div></div></div><script type="text/javascript">// 获取链接并显示在网页上function getLink(){document.getElementById('link').style.display = "block";var value = document.getElementById('search').value;var base_url = location.href;url = base_url + "?" + value;document.getElementById('url').value = url;document.getElementById('url').select();document.getElementById('instrcutions').innerText = "复制下面的地址,然后发给伸手党吧！";}// 将链接自动拷贝到剪切板中function copyLink(){document.execCommand('copy');}// 跳转网页到所生成的链接上function skipLink(){location.href = url;}// 获取网页顶部get传递的参数,如:http://127.0.0.1/?123,问号后面的123就是get传递的参数function getVariable(){var link = location.href;var variable = link.split('?')[1];return variable;}// 自动执行(function(window){var variable = getVariable();   // 获取网页链接的get参数// 实现点击"百度一下"按钮就获取链接并显示在网页上document.getElementById('get').addEventListener('click',function(){getLink();});// 实现点击"复制"按钮就将生成的链接复制到剪切板上document.getElementById('copy').addEventListener('click',function(){copyLink();});// 实现点击"预览"按钮就跳转到生成的链接上document.getElementById('skip').addEventListener('click',function(){skipLink();});// 实现点击"?"文本就弹出提示声明document.getElementsByClassName('about')[0].addEventListener('click',function(){alert('*本站与百度公司没有任何联系，baidu以及本站出现的百度公司Logo是百度公司的商标。');});if(variable){  // 判断有没有get传递的参数,有就进入动画效果,没有就保持不变var arrow = document.getElementById('arrow');var search = document.getElementById('search');var instrcutions = document.getElementById('instrcutions');var search_offsetX = search.offsetLeft + 8;  // 获取搜索框的X轴位置var search_offsetY = search.offsetTop + 10;  // 获取搜索框的Y轴位置arrow.style.display = "block";instrcutions.innerText = "1、找到输入框并选中"; // 鼠标进行第一层动画的提示语setTimeout(function(){  // 鼠标进行第一层动画arrow.style.transform = "translate(" + search_offsetX + "px," + search_offsetY + "px)";},0);(function(){setTimeout(function(){   // 鼠标进行第二层动画var variable = decodeURIComponent(getVariable());var index = 0;   // 给与一个下标号arrow.style.display = "none";instrcutions.innerText = "2、输入你的问题";   // 鼠标进行第二层动画的提示语var a = setInterval(function(){    // 文字一一输入的特效if(index == variable.length){ // 判断输出字符串是否到达极限,并且鼠标进行第三层动画clearInterval(a);   // 到达极限删除自身,避免死循环浪费内存instrcutions.innerText = "3、按下“百度一下”按钮";    // 鼠标进行第三层动画的提示语arrow.style.display = "block";var get = document.getElementById('get');var get_offsetX = get.offsetLeft + 51;   //获取"百度一下"按钮的X轴位置var get_offsetY = get.offsetTop + 20;  //获取"百度一下"按钮的Y轴位置arrow.style.transform = "translate("+ get_offsetX +"px," + get_offsetY + "px)";setTimeout(function(){instrcutions.innerText = "这对你而言就是这么困难么？";      // 第三层动画结束语},2000);setTimeout(function(){location.href = "https://www.baidu.com/s?ch=3&ie=utf-8&wd=" + variable; // 自动跳转到百度搜索界面},3000);}search.value = variable.substr(0,index++);    // 没达到极限继续输出字符串},200);},2000);})();}})(window);</script></body>
</html>

以上就是整个项目的具体介绍了，源代码可以随意使用和更改，但请保留作者著作。

“让我帮你百度一下”源码相关推荐

php 第三方认证中心框架,仿百度钱包源码红色优享钱包网贷借款源码/接入第三方认证,去后门修复缺陷ThinkPHP开发...
源码说明非常漂亮红色网贷借款源码,接入第三方认证,ThinkPHP框架,无加密,无授权,可封装APP 已集成支付.短信.查询借款,支持购买会员.签到,状态短信通知看上去挺好看的这UI就发出来给大家 ...
百度Apollo源码学习之Bazel编译介绍
image.png 什么是Bazel Bazel是一个类似于Make的编译工具,是Google为其内部软件开发的特点量身定制的工具,如今Google使用它来构建内部大多数的软件.(怪不得看起来很像An ...
数值分析北航第八题第三次计算实习任务（附百度云源码java版）
先上干货 ,包含word报告与源码. 链接:https://pan.baidu.com/s/1piPSQIqsBcLH_pHAYog5tw 提取码:55jo 稍加说明,这是java版的源码以及上交作业 ...
LSTM处理图像分类（RGB彩图，自训练长条图，百度云源码，循环神经网络）
为了探究更多网络图像分类的效果,尝试LSTM网络处理,顺便谈一谈对循环神经网络的简单理解.最终效果:7M模型85%准确率,单层网络.对比之间做的CNN效果(7M模型,95%准确率,但存在过拟合问题), ...
android百度输入法源码,Android内置第三方输入法
Android内置第三方输入法本篇讲诉如何再安卓源码中内置第三方输入法,并设为默认输入法启动,以及过程中可能引起的一些其他系统Bug处理: 内置输入法关联源码各第三方输入法ID 以讯飞为例内置方法 ...
在线获取百度BDUSS源码支持5种登录方式
简介: 这个是模拟百度登录获取BDUSS的源码,更新总共5种获取方式,分别是普通登录.扫码登录.短信验证码登录和第三方登录(包括QQ登录和微信登录),可无视异地和登录保护. 网盘下载地址: http: ...
最新ThinkPHP开发仿百度钱包源码红色优享钱包源码/接入第三方认证,去后门修复缺陷
介绍: 提示:我调试的这个源码是已经去除了请放心使用,以下是这次调试修正的列表: 去除js后门修复无法上传证件的错误修正表的空值问题标注短信接口防止大家找不到短信商是谁 5.对接码支付平台(接口 ...
手把手教你Python+selenium爬虫百度文库源码+解析
免费资源猫-爱分享的猫. 最近小编在弄python爬虫项目,可能大家一听爬虫,就觉得高大上,其实爬虫并没有多难,只要你稍微研究一下,掌握了基础的东西,后续爬虫就是重复利用的事情了.今天给大家来一下普及 ...
android百度输入法源码,百度输入法V1.1.0.19 For Android发布
[IT168 资讯]"享受流畅的手机输入体验"是百度手机输入法一直以来贯彻的产品理念,此次专门针对Android手机的触屏操作特点,结合百度手机输入法自身产品"超强词库. ...
java 仿百度文库源码_java开发_模仿百度文库_OpenOffice2PDF_源码下载
这几天在研究模仿着做类似于百度文库的东西,在这里给大家分享一下我自己做的东西. 由于需要做这样的项目,我查阅了很多资料,最后选定一下方案去做: Txt/Word/Excel/PPT=>PDF(O ...

“让我帮你百度一下”源码

序言

HTML页面

CSS样式

JS实现功能

完整页面源码

“让我帮你百度一下”源码相关推荐

最新文章

热门文章