浅谈Javascript Base64 加密解密


Posted in Javascript onDecember 28, 2014

html代码:

 <!DOCTYPE html>

 <html>

 <head>

     <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>

 </head>

 <body>

 <div class="responsebox">

     <h1>Javascript Base64 Encode & Decode<span class="spansuper">veinyf@gmail.com</span><span class="spanbottom">2014-12-27 17:44</span></h1>

     <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知识:

      *函数:window.atob()    window.btoa()   unescape() escape() encodeURIComponent() decodeURIComponent()

      *正则表达式清除首位空格:_string.replace(/(^\s*)|(\s*$)/g,"");

      *

      *CovertBase64orString自执行函数

      *inputid   输入框id

      *checkboxid    选择框id

      *btnid 按钮id

      *showid    html显示容器id,这里是一个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; //判断check按钮初始化状态 赋值isbase64

     checkbox.addEventListener("click", function(e) {            //checkbox 点击事件注册

         var _ckvak = checkbox.getAttribute("checked");          //点击事件发生时,改变check状态,赋值isbase64

         if (_ckvak == "checked") {

             checkbox.setAttribute("checked", null);

             isbase64 = false;

         } else {

             checkbox.setAttribute("checked", "checked");

             isbase64 = true;

         }

     }, 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,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>

 </html>

效果:

浅谈Javascript Base64 加密解密

推荐一个Javascript IDE 比Aptana还好用。Komodo IDE(免费版:Komodo Edit,基本功能一样)支持语法高亮,智能感知,还支持perl,python,ruby,nodejs语法等。

浅谈Javascript Base64 加密解密

Javascript 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 #Javascript
JavaScript设计模式之外观模式介绍
Dec 28 #Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 #Javascript
jQuery中removeData()方法用法实例
Dec 27 #Javascript
jQuery中data()方法用法实例
Dec 27 #Javascript
jQuery中index()方法用法实例
Dec 27 #Javascript
jQuery中get()方法用法实例
Dec 27 #Javascript
You might like
php变量作用域的深入解析
2013/06/03 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
浅析JS运动
2015/12/28 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
Python中str.join()简单用法示例
2018/03/20 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
告诉你怎样写创业计划书
2014/01/27 职场文书
暑期社会实践方案
2014/02/05 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
生产车间标语
2014/06/11 职场文书
党员自我评价范文2015
2015/03/03 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python