整个过程的代码如下： (function() { var title = document.querySelector
平时不知道用js写什么练手，这里就写了一个类似百度翻译的小demo。大家可以平时没事儿了看看书，写写像这种类型的小demo,挪用以下果然的api即可。对付学生党，能进入学校尝试室做项目更好。进不去的，平时写写小demo练练也不差。(我为什么没在尝试室)
2. demo前筹备事情：页面构造
了解百度翻译API，所需配置参数
筹备 MD5.js 加密算法函数（百度本身搜）
写js代码
3. 法式：1. 页面构造：
构造就不说了，直接贴图上代码：
可进行语言切换
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link type="text/css" href="http://www.mamicode.com/css/style.css"> </head> <body> <div> <div> <div> 要翻译为： <span>英文</span> <ul> <li data-lang="en">英语</li> <li data-lang="zh">中文</li> <li data-lang="jp">日语</li> <li data-lang="kor">韩语</li> <li data-lang="fra">法语</li> <li data-lang="ru">俄语</li> <li data-lang="de">德语</li> </ul> </div> <textarea placeholder="要翻译的单词/句子" value=""></textarea> </div> <div> <div>翻译功效：</div> <div></div> </div> <div> <button>断根</button> <button>翻译</button> </div> </div> <script src="http://www.mamicode.com/js/MD5.js"></script> <script src="http://www.mamicode.com/js/script.js"></script> </body> </html>css代码：
*{ margin: 0; padding: 0; font-family: "微软雅黑"; } html,body { height: 100%; } li { list-style: none; } body { overflow: hidden; } #main { width: 1000px; height: 80%; margin: 5% auto; } #main .left { float: left; width: 350px; height:330px; margin: 50px 0 0 50px; background-color: #fff; border: 1px solid #000; box-sizing: border-box; color: #fff; border-top-left-radius: 15px; border-top-right-radius: 15px; } #main .right { float: right; width: 350px; height: 330px; margin: 50px 50px 0 0; background-color: #fff; box-sizing: border-box; border: 1px solid #000; border-top-left-radius: 15px; border-top-right-radius: 15px; } #main .title { width: 100%; height: 40px; background-color: #333; line-height: 40px; text-indent: 20px; position: relative; color: #fff; border-top-left-radius: 15px; border-top-right-radius: 15px; } #main .lang { height: 40px; line-height: 40px; text-indent: 20px; letter-spacing: 2px; text-decoration: underline; color: #58a; cursor: pointer; } #main .lang:hover { text-decoration: none; color: #eee; } #main .text { width: 100%; height: 288px; padding: 20px; box-sizing: border-box; resize: none; outline: none; border: none; } #main .right .cont { width: 100%; height: 295px; padding: 20px; box-sizing: border-box; } #main .bottom { float: left; width: 100%; height: 40px; margin-top: 60px; } #main .bottom button { float: right; width: 65px; height: 35px; line-height: 35px; letter-spacing: 2px; border: none; margin-right: 50px; border-radius: 3px; outline: none; cursor: pointer; color: #eee; background-color: #333; } #main ul { width: 100%; padding: 20px 15px 0 20px; box-sizing: border-box; position: absolute; background: blue; background-color: #fff; border-bottom: 1px solid #333; display: none; } #main ul li { float:left; text-indent: 0; text-align: center; padding: 0 10px; margin: 0 10px; margin-bottom: 20px; border: 1px solid #000; border-radius: 5px; box-sizing: border-box; color: #333; cursor: pointer; } #main ul li:hover { background-color: #333; color: #fff; }2，了解百度翻译API
这只只对所配置的参数做一介绍，官方API也有做解释：
进入百度翻译，左下角如图：
点击百度翻译开放平台：
q是你要翻译的字符串
from是你在输入时的语言
to是你要翻译成什么语言
appid是你申请的百度翻译测试账号（注册后秒发）
salt是一个随机数，，这里用事件暗示
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31207.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")