JavaScript实现的简单加密解密操作示例


Posted in Javascript onJune 01, 2018

本文实例讲述了JavaScript实现的简单加密解密操作。分享给大家供大家参考,具体如下:

JavaScript实现对内容的加密和解密。加密,转成编码。解密则是编码转字符串。

<html>
<head>
<meta charset="utf-8" />
<title>3water.com JS加密解密</title>
</head>
<body>
 <h1> 加密解密 </h1>
 <input type="text" id="secret" /> 
 <input type="button" value="加密" onclick="encode()">
 <input type="button" value="解密" onclick="decode();">
<script>
// 加密
function encode()
{  
  // var s = secret.value;
  // s 是一个字符串, 类型: String
  // 根据 s 来创建一个字符串对象
  // str 的类型是: Object
  // var str = new String(s);
  // length 是获取字符串对象的长度,也就是说有多少个字符
  // str.length
  var str = secret.value;
  var r = "";
  // string 类型的可以当做字符串对象来用
  for (var i = 0; i < str.length; i++)
  {
    // 取出下标为 i 字符的编码
    var code = str.charCodeAt(i);
    // 将字符对应的编码,拼接到一个空字符串上
    r += code;
    // 每个符号后,添加 , 分割
    r += ",";
  }
  // secret.value 
  // 设置输入框的内容为 r
  secret.value = r;
}
// 使用到知识点(1)---如何将一个 数字 转换成对应的 字符
// String.fromCharCode 
// 函数功能: 将 数字 转换成对应的 字符
// String 其实是系统的一个对象
// document.write(  String.fromCharCode(97) );
/*
var s = "97,98,99,";
// 字符串对象中 split 方法
// 作用: 按照参数 分割 字符串
// 返回值: 分割之后的 数组
var arr = s.split(",");
// 数组中多了一个空白的元素,如何处理?
// 删除数组中最后一个元素
arr.pop();
document.write(arr);
//*/
// 解密
function decode()
{
  // 获取文本框中的字符串
  // 例如: 96,97,98
  var str = secret.value;
  // 思路:
  // 1. 按照 , 分割字符串
  // 2. 将每个 分割的子字符串 转换成 数字,再转换成 字符
  //   96 97 98
  // 3. 将还原的字符,拼接在一起,再设置到 input 中去
  var arr = str.split(",");
  // 用于拼接结果的
  var r = "";
  for (var i = 0; i < arr.length; i++)
  {
    // 获取加密后的 字符串的编码,是一个数字
    var code = parseInt(arr[i]);
    r += String.fromCharCode(code);
  }
  // 将拼接后的结果,设置到 input 中
  secret.value = r;
}
</script> 
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试运行结果如下:

JavaScript实现的简单加密解密操作示例

Javascript 相关文章推荐
javascript引导程序
Oct 26 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
简单实现js上传文件功能
Aug 21 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 #Javascript
Express之托管静态文件的方法
Jun 01 #Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 #Javascript
详解Angular操作cookies方法
Jun 01 #Javascript
浅谈手写node可读流之流动模式
Jun 01 #Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 #Javascript
基于JS实现带动画效果的流程进度条
Jun 01 #Javascript
You might like
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
python自动zip压缩目录的方法
2015/06/28 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
web页面录屏实现
2019/02/12 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
zooplus波兰:在线宠物店
2019/07/21 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
问卷调查计划书
2014/01/10 职场文书
法人委托书范本
2014/04/04 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
交通事故被告答辩状
2015/05/22 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
python 安全地删除列表元素的方法
2022/03/16 Python