<! DOCTYPE html>
<title>page title</title>
<style type= "Text/css" >
*{font-family:consolas;font-style:italic}
. responsebox{width:900px;margin:10px auto;padding:10px;border:2px solid #366; border-radius:10px 0 10px 0; text-align: Center
. Responsebox Input,.responsebox button{font-size:30px;margin:5px;padding:5px;
. spansuper{vertical-align:super;font-size:14px}
. Spanbottom{vertical-align:text-bottom;font-size:12px;margin-left: -110px}
#showbox {width:900px;height:430px;border:5px solid #663; border-radius:0 20px 0 20px;margin:10px auto;padding:8px; font-size:20px}
</style>
<body>
<div class= "Responsebox" >
<input type= "text" id= "input" >
<input type= "checkbox" id= "checkbox" checked= "Checked" >Base64</input>
<button id= "btn" >convert done!</button>
</div>
<div id= "Showbox" ></div>
</body>
<script type= "Text/javascript" >
/*javascript Knowledge:
* Function: Window.atob () Window.btoa () unescape () Escape () encodeURIComponent () decodeuricomponent ()
* Regular expression clears the first space: _string.replace (^\s*) | ( \s*$)/g, "");
*
*covertbase64orstring Self-execution function
*inputid Input Box ID
*CHECKBOXID selection Box ID
*btnid Button ID
*showid HTML display Container ID, here is a div#showbox
*/
(function covertbase64orstring (inputID, Checkboxid, Btnid, Showid) {
var checkbox = document.getElementById (CHECKBOXID); HTML DOM Select checkbox
var chkvalue = Checkbox.getattribute ("checked"); HTML DOM Select CheckedValue
var btn = document.getElementById (Btnid); HTML DOM Select button ID
var isbase64; Base64tostring or StringtoBase64 bool
var returnval = null; Converted String
Chkvalue = "Checked"? Isbase64 = True:isbase64 = false; To determine the Check button initialization state assignment isbase64
Checkbox.addeventlistener ("click", Function (e) {//checkbox Click event Registration
var _ckvak = Checkbox.getattribute ("checked"); When the Click event occurs, change the check state and assign the value isbase64
if (_ckvak = = "Checked") {
Checkbox.setattribute ("checked", null);
Isbase64 = false;
} else {
Checkbox.setattribute ("Checked", "checked");
Isbase64 = true;
}
}, True);
Btn.addeventlistener ("click", Function (e) {//button Click event Registration
var _show = document.getElementById (Showid); HTML DOM Select Showbox ID
var _inputvalue = document.getElementById (inputID). value; text Box value
_inputvalue=_inputvalue.replace (/(^\s*) | ( \s*$)/g, ""); The regular expression removes the first space, and it seems that Btoa,abob has done the work
var _showlength = _show.childnodes.length; Traverse Showbox, clear showbox content
while (_showlength > 0) {
_show.removechild (_show.childnodes[_showlength-1]);
_showlength--;
}
if (isbase64) {//string to Base64, support Chinese encoding, unescape,encodeuricomponent
ReturnVal = Window.btoa (unescape (encodeURIComponent (_inputvalue)));
else {//base64 to string
ReturnVal = decodeURIComponent (Escape (Window.atob (_inputvalue)));
}
_show.appendchild (document.createTextNode (returnval)); Add context to Showbox
}, True);
}) ("Input", "checkbox", "btn", "Showbox");
Covertbase64orstring ("Input", "checkbox", "btn", "Showbox");
</script>
It is better to recommend a JavaScript IDE than Aptana. Komodo IDE (free version: Komodo Edit, basic function) Support syntax highlighting, IntelliSense, and support Perl,python,ruby,nodejs syntax.
