Javascript Base64 Encode &amp; Decode

2024-04-27 14:14:42

字体：大中小

来源：转载

供稿：网友

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=_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>

View Code

效果：