html 代码 ：
复制代码代码如下::
<! DocType html>
<html>
<kopf>
<title> Seitentitel </title>
<style type = "text/css">
*{Schriftfamilie: Konsolas; Schriftstil: Italic}
.Responsebox {Breite: 900px; Margin: 10px Auto; Padding: 10px; Rand: 2px Feststoff #366; Border-Radius: 10px 0 10px 0; Text-Align: Mitte}
.Responsebox-Eingabe, .Responsextast {Schriftgröße: 30px; Margin: 5px; Padding: 5px;}
.spansuper {vertikal-align: super; Schriftgröße: 14px}
.spanbottom {Vertical-Align: Textboden; Schriftgröße: 12px; Margin-Links: -110px}
#Showbox {Breite: 900px; Höhe: 430px; Rand: 5px Feststoff #663; Border-Radius: 0 20px 0 20px; Margin: 10px Auto; Padding: 8px; Schriftgröße: 20px}
</style>
</head>
<body>
<div>
<h1> Javascript Base64 Encodes & Decode <Pan> [email protected] </span> <span> 2014-12-27 17:44 </span> </h1>
<Eingabe type = "text" id = "input">
<Eingabe type = "CheckBox" id = "Kontrollkästchen" checked = "checked"> base64 </input>
<button id = "btn"> DEVENTEN! </button>
</div>
<div id = "showBox"> </div>
</body>
<script type = "text/javaScript">
/*JavaScript 知识 ：
*函数 ： Fenster.atob () Fenster.Btoa () unescape () Escape () codoRicomponent () decodeuricomponent ()
*正则表达式清除首位空格 ： _string.replace (/(^/s*) | (/s*$)/g, "");
*
*CovertBase64orString 自执行函数
*InputID 输入框 ID
*CheckBoxid 选择框 ID
*Btnid 按钮 id
*ShowID html 显示容器 id ， 这里是一个 Div#showbox
*/
(Funktion CoverTBase64orString (InputID, CheckBoxID, Btnid, ShowID) {
var Checkbox = document.getElementById (CheckBoxId); // HTML DOM Wählen Sie das Kontrollkästchen aus
var chkvalue = cupcheBox.getAttribute ("geprüft"); // HTML DOM Wählen Sie CheckedValue aus
var btn = document.getElementById (btnid); // HTML DOM -Wählen Sie die Schaltfläche ID
var isbase64; // Base64ToString oder StringTobase64 bool
var returnVal = null; // Konvertierte Zeichenfolge
chkValue == "geprüft"? isbase64 = true: isbase64 = false; // 判断 prüfen 按钮初始化状态 赋值 isbase64
CheckBox.AdDeVentListener ("Click", Funktion (e) {// CheckBox 点击事件注册
var _ckvak = CheckBox.getAttribute ("geprüft"); // 点击事件发生时 ， 改变 改变 状态 ， 赋值 isbase64
if (_ckvak == "checked") {
CheckBox.SetatTribute ("geprüft", null);
isbase64 = false;
} anders {
CheckBox.SetatTribute ("geprüft", "geprüft");
isbase64 = true;
}
}, WAHR);
btn.addeventListener ("klicken", Funktion (e) {// Schaltfläche 点击事件注册 点击事件注册
var _show = document.getElementById (showId); // HTML DOM Wählen Sie die Showbox -ID aus
var _inputValue = document.getElementById (inputID) .Value; // 文本框取值
//_inputValue=_inputValue.replace(/(^/S*)|(/s*$)/g, ""); // 正则表达式去除首位空格 ， 似乎 btoa ， aboB 已经做了这些工作
var _showlength = _show.childnodes.length; // 遍历 showBox ， 清除 showBox 内容
while (_Showlength> 0) {
_show.removechild (_show.childnodes [_showlength - 1]);
_Showlength--;
}
if (isbase64) {// String to base64 ， 支持中文编码 ， Unscape ， codouricomponent
returnVal = window.Btoa (unemmerkape (codericomponent (_inputValue)));
} else {// Base64 bis String
returnVal = decodeuricomponent (Escape (Fenster.atob (_InputValue)));
}
_show.appendChild (document.CreateTextNode (returnVal)); // showBox Kontext hinzufügen
}, WAHR);
}) ("input", "CheckBox", "btn", "showBox");
// CovertBase64orString ("Eingabe", "Kontrollkästchen", "BTN", "Showbox");
</script>
</html>
效果 ：
推荐一个 JavaScript ide 比 aptana 还好用。komodo ide （免费版 ： Komodo edit ， 基本功能一样）支持语法高亮 ， 智能感知 ， 还支持 perl ， Python ， Ruby ， Nodejs 语法等。