首页 > 代码库 > Javascript Base64 Encode & Decode
Javascript Base64 Encode & Decode
html代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Page Title</title> 5 <style type="text/css"> 6 *{font-family: Consolas;font-style: italic} 7 .responsebox{width:900px;margin:10px auto;padding:10px;border:2px solid #366;border-radius: 10px 0 10px 0; text-align: center} 8 .responsebox input,.responsebox button{font-size: 30px;margin:5px;padding:5px;} 9 .spansuper{vertical-align: super;font-size: 14px}10 .spanbottom{vertical-align: text-bottom;font-size: 12px;margin-left: -110px}11 #showbox{width:900px;height:430px;border:5px solid #663;border-radius: 0 20px 0 20px;margin:10px auto;padding:8px;font-size: 20px}12 </style>13 </head>14 <body>15 <div class="responsebox">16 <h1>Javascript Base64 Encode & Decode<span class="spansuper">veinyf@gmail.com</span><span class="spanbottom">2014-12-27 17:44</span></h1>17 <input type="text" id="input">18 <input type="checkbox" id="checkbox" checked="checked">Base64</input>19 <button id="btn">Convert done !</button>20 </div>21 <div id="showbox"></div>22 </body>23 <script type="text/javascript">24 /*javascript知识：25 *函数：window.atob() window.btoa() unescape() escape() encodeURIComponent() decodeURIComponent()26 *正则表达式清除首位空格：_string.replace(/(^\s*)|(\s*$)/g,"");27 *28 *CovertBase64orString自执行函数29 *inputid 输入框id30 *checkboxid 选择框id31 *btnid 按钮id32 *showid html显示容器id，这里是一个div#showbox33 */34 (function CovertBase64orString(inputid, checkboxid, btnid, showid) {35 var checkbox = document.getElementById(checkboxid); //html dom select checkbox36 var chkvalue = checkbox.getAttribute("checked"); //html dom select checkedvalue37 var btn = document.getElementById(btnid); //html dom select button id38 var isbase64; //base64toString or StringtoBase64 bool39 var returnval = null; //Converted string40 chkvalue == "checked" ? isbase64 = true : isbase64 = false; //判断check按钮初始化状态 赋值isbase6441 checkbox.addEventListener("click", function(e) { //checkbox 点击事件注册42 var _ckvak = checkbox.getAttribute("checked"); //点击事件发生时，改变check状态，赋值isbase6443 if (_ckvak == "checked") {44 checkbox.setAttribute("checked", null);45 isbase64 = false;46 } else {47 checkbox.setAttribute("checked", "checked");48 isbase64 = true;49 }50 }, true);51 btn.addEventListener("click", function(e) { //button 点击事件注册52 var _show = document.getElementById(showid); //html dom select showbox id53 var _inputvalue = document.getElementById(inputid).value; //文本框取值54 //_inputvalue=http://www.mamicode.com/_inputvalue.replace(/(^/s*)|(/s*$)/g,""); //正则表达式去除首位空格，似乎btoa，abob已经做了这些工作55 var _showlength = _show.childNodes.length; //遍历showbox，清除showbox内容56 while (_showlength > 0) {57 _show.removeChild(_show.childNodes[_showlength - 1]);58 _showlength--;59 }60 if (isbase64) { //string to base64，支持中文编码，unescape，encodeURIComponent61 returnval = window.btoa(unescape(encodeURIComponent(_inputvalue)));62 } else { //base64 to string63 returnval = decodeURIComponent(escape(window.atob(_inputvalue)));64 }65 _show.appendChild(document.createTextNode(returnval)); //add context to showbox66 }, true);67 })("input", "checkbox", "btn","showbox");68 //CovertBase64orString("input", "checkbox", "btn","showbox");69 </script>70 </html>
效果：
推荐一个Javascript IDE 比Aptana还好用。Komodo IDE（免费版：Komodo Edit，基本功能一样）支持语法高亮，智能感知，还支持perl，python，ruby，nodejs语法等。
Javascript Base64 Encode & Decode
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。