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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
浅析vue component 组件使用
Mar 06 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
基于vue的video播放器的实现示例
Feb 19 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
php字符串函数学习之substr()
2015/03/27 PHP
PHP递归创建多级目录
2015/11/05 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
在Python下尝试多线程编程
2015/04/28 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
简单了解python中的与或非运算
2019/09/18 Python
Android笔试题总结
2014/11/29 面试题
致跳高运动员加油稿
2014/02/12 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
实习介绍信模板
2015/01/30 职场文书
导游词之河北野三坡
2019/12/11 职场文书
Python绘制分类图的方法
2021/04/20 Python
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript
深入理解go缓存库freecache的使用
2022/02/15 Golang