浅谈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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 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
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP基本语法总结
2014/09/06 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
jQuery拖动图片删除示例
2013/05/10 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
python批量同步web服务器代码核心程序
2014/09/01 Python
python实现的简单抽奖系统实例
2015/05/22 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
opencv实现简单人脸识别
2021/02/19 Python
python程序 创建多线程过程详解
2019/09/23 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
2014村务公开实施方案
2014/02/25 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
我的祖国演讲稿
2014/05/04 职场文书
学习演讲稿范文
2014/05/10 职场文书
电视节目策划方案
2014/05/16 职场文书
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL