html 代码 :
复制代码代码如下:
<! Doctype html>
<html>
<голова>
<title> заголовок страницы </title>
<стиль типа = "text/css">
*{font-family: consolas; стиль Font: Italic}
.Responsebox {ширина: 900px; маржа: 10px Auto; Padding: 10px; граница: 2px solid #366; граница-радиус: 10px 0 10px 0; Text-Align: Center}
.Responsebox вход,.-Responsebox {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 {ширина: 900px; высота: 430px; граница: 5px sold #663; граница-радий: 0 20px 0 20px; маржа: 10px Auto; Padding: 8px; Font-Size: 20px}
</style>
</head>
<тело>
<div>
<h1> javaScript base64 Encode & Decode <pan> [email protected] </span> <pan> 2014-12-27 17:44 </span> </h1>
<input type = "text" id = "input">
<input type = "fackbox" id = "fackbox" fected = "ferced"> base64 </input>
<button id = "btn"> конвертировать Doder! </button>
</div>
<div id = "showbox"> </div>
</body>
<script type = "text/javascript">
/*javascript 知识 :
*: : Window.atob () window.btoa () unescape () escape () encodeuricomponent () decodeuricomponent ()
*正则表达式清除首位空格 : _String.Replace (/(^/s*) | (/s*$)/g, "");
*
*CovertBase64orstring 自执行函数
*inputId 输入框 ID
*FaceboxId 选择框 ID
*btnid 按钮 id
*SHOWID HTML 显示容器 ID , 这里是一个 Div#ShowBox
*/
(Function CovertBase64orString (InputId, FaceboxId, Btnid, ShowId) {
var facebox = document.getElementbyId (fackboxid); // HTML DOM Выбор флажки
var chkvalue = factbox.getAttribute ("cherced"); // html dom select checkedvalue
var btn = document.getElementbyId (btnid); // HTML DOM идентификатор кнопки выбора
var iSbase64; // base64toString или stringtobase64 bool
var returnVal = null; // преобразованная строка
chkvalue == "проверено"? ISBASE64 = TRUE: ISBASE64 = false; // 判断 Проверьте 按钮初始化状态 赋值 isbase64
Facebox.AddeventListener ("click", function (e) {// флажок 点击事件注册
var _ckvak = factbox.getAttribute ("cherced"); // 点击事件发生时 , 改变 Проверьте 状态 , 赋值 isbase64
if (_ckvak == "проверено") {
fackbox.setattribute ("cherced", null);
iSbase64 = false;
} еще {
factbox.setattribute («проверен», «проверено»);
iSbase64 = true;
}
}, истинный);
btn.addeventlistener ("click", function (e) {// кнопка 点击事件注册
var _show = document.getElementById (ShowId); // HTML DOM SELECT SHOWBOX ID
var _inputValue = document.getElementById (inputId) .value; // 文本框取值
//_InputValue=_InputValue.replace(/(^/s*))(/s*$)/g, ""); // 正则表达式去除首位空格 , 似乎 btoa , abob 已经做了这些工作
var _showlength = _show.childnodes.length; // 遍历 Showbox , Showbox 内容
while (_showwlength> 0) {
_show.removechild (_show.childnodes [_showlength - 1]);
_showlength-;
}
if (iSbase64) {// string to base64 , 支持中文编码 , unescape , encodeuricomponent
returnVal = window.btoa (unescape (encodeuricomponent (_inputvalue)));
} else {// base64 на строку
returnVal = decodeuricomponent (escap (window.atob (_inputvalue))));
}
_show.appendchild (document.createTextNode (returnVal)); // Добавить контекст в Showbox
}, истинный);
}) («Вход», «Флажок», «btn», «Showbox»);
// covertbase64orstring («Вход», «Флажок», «btn», «Showbox»);
</script>
</html>
效果 :
推荐一个 javascript ide 比 aptana 还好用。komodo ide (免费版 : : komodo edit , 基本功能一样) 支持语法高亮 智能感知 , 还支持 Perl , Python , Ruby , Nodejs 语法等。