html 代码 ：
复制代码代码如下 :
<! doctype html>
<html>
<헤드>
<title> 페이지 제목 </title>
<스타일 유형 = "텍스트/CSS">
*{Font-Family : Consolas; 글꼴 스타일 : Italic}
.Responsebox {너비 : 900px; 마진 : 10px 자동; 패딩 : 10px; 테두리 : 2px 솔리드 #366; Border-Radius : 10px 0 10px 0; 텍스트 정렬 : 센터}
.Responsebox Input, .Responsebox 버튼 {font-size : 30px; 마진 : 5px; 패딩 : 5px;}
.spansuper {수직-정상 : Super; font-size : 14px}
.spanbottom {수직-정체 : 텍스트-바닥; 글꼴 크기 : 12px; 마진-왼쪽 : -110px}
#showbox {너비 : 900px; 높이 : 430px; 테두리 : 5px 고체 #663; 테두리-라디우스 : 0 20px 0 20px; 마진 : 10px 자동; 패딩 : 8px; font-size : 20px}
</스타일>
</head>
<body>
<div>
<H1> JavaScript Base64 Encode & Decode <Span> [email protected] </span> <span> 2014-12-27 17:44 </span> </h1>
<입력 유형 = "텍스트"id = "입력">
<input type = "checkbox"id = "checkbox"checked = "checked"> base64 </input>
<button id = "btn"> convert! </button>
</div>
<div id = "showbox"> </div>
</body>
<script type = "text/javaScript">
/*JavaScript av ：
*at ： window.atob () window.btoa () unescape () Escape () encodeUricomponent () decodeUricomponent ()
*str ： _string.replace (/(^/s*) | (/s*$)/g, "");
*
*CovertBase64Orstring 自执行函数
*inputId 输入框 id
*checkboxid 选择框 id
*btnid id id
*showId html 显示容器 id, 这里是一个 div#showbox
*/
(함수 CovertBase64Orstring (inputId, checkboxId, btnid, showId) {
var checkbox = document.getElementById (CheckBoxId); // html dom 선택 확인란을 선택하십시오
var chkvalue = checkbox.getAttribute ( "Checked"); // html dom 선택 checkedValue를 선택하십시오
var btn = document.getElementById (btnid); // html dom 선택 버튼 ID
var isbase64; // Base64ToString 또는 StringTobase64 BOOL
var returnVal = null; // 변환 된 문자열
chkvalue == "확인"? isbase64 = true : isbase64 = false; // 判断 점검 判断 赋值 赋值 isbase64
checkbox.addeventListener ( "클릭", function (e) {// checkbox 点击事件注册
var _ckvak = checkbox.getAttribute ( "Checked"); // 点击事件发生时 点击事件发生时, 点击事件发生时 check 状态, 赋值 isbase64
if (_ckvak == "checked") {
checkbox.setattribute ( "checked", null);
isbase64 = false;
} 또 다른 {
CheckBox.setAttribute ( "Checked", "Checked");
isbase64 = true;
}
}, 진실);
btn.addeventListener ( "클릭", 함수 (e) {// 버튼 点击事件注册
var _show = document.getElementById (showId); // html dom select showbox id
var _inputValue = document.getElementById (inputId) .Value; // 文本框取值
//_InputValue=_inputValue.replace(/emply (( /^/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, 支持中文编码, unescape, encodeUricomponent
returnVal = wind
} else {// base64 to String
returnVal = decape (Escape (window.atob (_inputValue)));
}
_show.appendChild (document.createtextNode (returnVal)); // showbox에 컨텍스트를 추가합니다
}, 진실);
}) ( "입력", "확인란", "btn", "showbox");
// CovertBase64Orstring ( "입력", "확인란", "btn", "showbox");
</스크립트>
</html>
效果 ：
JavaScript IDE 比 aptana 还好用。 acmodo ide 还好用。 免费版 ： Komodo edit, 基本功能一样 基本功能一样 支持语法高亮 支持语法高亮, 智能感知 智能感知, 还支持 perl, python, ruby, nodejs 语法等。