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 相关文章推荐
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
axios基本入门用法教程
Mar 25 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
JS前端模块化原理与实现方法详解
Mar 17 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
Session的工作方式
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php实现的简单检验登陆类
2015/06/18 PHP
WAF的正确bypass
2017/01/05 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
对xmlHttp对象的理解
2011/01/17 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
vue3.0 上手体验
2020/09/21 Javascript
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
numpy基础教程之np.linalg
2019/02/12 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
微信小程序python用户认证的实现
2019/07/29 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
庆中秋节主题活动方案
2014/02/03 职场文书
小学生作文评语
2014/04/18 职场文书
反腐倡廉观后感
2015/06/08 职场文书
go goth封装第三方认证库示例详解
2022/08/14 Golang