浅谈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 相关文章推荐
更优雅的事件触发兼容
Oct 24 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
js中call与apply的用法小结
Dec 28 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
React组件中的this的具体使用
Feb 28 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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 ajax 分页类代码
2008/11/13 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
python str与repr的区别
2013/03/23 Python
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
python 装饰器重要在哪
2021/02/14 Python
大学活动邀请函
2014/01/28 职场文书
关于运动会的口号
2014/06/07 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
Nebula Graph解决风控业务实践
2022/03/31 MySQL
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
如何优化vue打包文件过大
2022/04/13 Vue.js
Python使用永中文档转换服务
2022/05/06 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python