HTML代码：
复制代码代码如下：
<！doctype html>
<html>
<head>
<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;テキストアライグ：センター}
.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 {width：900px; height：430px; border：5px solid＃663; border-radius：0 20px 0 20px; margin：10px auto; padding：8px; font-size：20px}
</style>
</head>
<body>
<div>
<h1> javascript base64エンコード＆デコード<span> [email protected] </span> <span> 2014-12-27 17:44 </span> </h1>
<入力型= "text" id = "input">
<入力型= "チェックボックス" id = "チェックボックス" checked = "checked"> base64 </input>
<ボタンid = "btn">コンバート完了！</button>
</div>
<div id = "showbox"> </div>
</body>
<script type = "text/javascript">
/*JavaScript知识：
*函数：window.atob（）window.btoa（）unescape（）estase（）encodeuricomponent（）decodeuricomponent（）
*正则表达式清除首位空格：_string.replace（/（^/s*）|（/s*$）/g、 ""）;
*
*CovertBase64orString自执行函数
*inputId输入框ID
*Checkboxid选择框ID
*btnid按钮id
*showid html
*/
（function covertbase64orstring（inputid、checkboxid、btnid、showid）{
var checkbox = document.getElementByID（checkboxid）; // HTML DOMを選択するチェックボックスを選択します
var chkvalue = checkbox.getattribute（ "checked"）; // html dom select checkedValueを選択します
var btn = document.getElementById（btnid）; // HTML DOM選択ボタンIDを選択します
var isbase64; // base64ToStringまたはStringToBase64 bool
var returnval = null; //変換された文字列
chkvalue == "checked"？ isbase64 = true：isbase64 = false; //判断チェック按钮初始化状态ISBase64
checkbox.addeventlistener（ "click"、function（e）{//チェックボックス点击事件注册
var _ckvak = checkbox.getAttribute（ "checked"）; //点击事件发生时、改变チェック状态、赋值isbase64
if（_ckvak == "checked"）{
checkbox.setattribute（ "checked"、null）;
isbase64 = false;
} それ以外 {
checkbox.setattribute（ "checked"、 "checked"）;
isbase64 = true;
}
}、 真実）;
btn.addeventlistener（ "click"、function（e）{// button点击事件注册
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（_showlength> 0）{
_show.removechild（_show.childnodes [_showlength -1]）;
_showlength-;
}
if（isbase64）{// string to base64、支持中文编码、unescape、encodeuricoponent
returnval = window.btoa（unescape（encodeuricomponent（_inputValue）））;
} else {// base64から文字列
returnVal = decodeuricopenent（Escase（window.atob（_inputValue）））;
}
_show.appendChild（document.createTextNode（returnVal））; // showboxにコンテキストを追加します
}、 真実）;
}）（ "input"、 "チェックボックス"、 "btn"、 "showbox"）;
// covertbase64orstring（ "input"、 "checkbox"、 "btn"、 "showbox"）;
</script>
</html>
效果：
推荐一个javascript ide比aptana