浅谈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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
js实现3D旋转效果
Aug 18 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
php adodb连接不同数据库
2009/03/19 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
js中less常用的方法小结
2017/08/09 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python中黄金分割法实现方法
2015/05/06 Python
深入讲解Python编程中的字符串
2015/10/14 Python
详解python进行mp3格式判断
2016/12/23 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
就业自荐书
2013/12/05 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
公司培训心得体会
2014/01/03 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
抗洪救灾标语
2014/10/08 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
会议新闻稿
2015/07/17 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript