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设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
JavaScript中DOM详解
Apr 13 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
详解vuex状态管理模式
Nov 01 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
十天学会php(2)
2006/10/09 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
金讯Java笔试题目
2013/06/18 面试题
药学专业大学生个人的自我评价
2013/11/04 职场文书
新员工入职感言
2014/02/01 职场文书
领班岗位职责范文
2014/02/06 职场文书
教师网络培训感言
2014/03/09 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript