浅谈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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
JS 控制非法字符的输入代码
Dec 04 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 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制作静态网站的模板框架(四)
2006/10/09 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
React组件的三种写法总结
2017/01/12 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
vue项目关闭eslint校验
2018/03/21 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python求列表交集的方法汇总
2014/11/10 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
失业者真诚求职信范文
2013/12/25 职场文书
中学教师培训制度
2014/01/31 职场文书
母亲节感恩寄语
2014/02/21 职场文书
孔庙导游词
2015/02/04 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
教学质量月活动总结
2015/05/11 职场文书
欠条格式范本
2015/07/03 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js