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 解决“options为空或不是对象”
Dec 22 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
对node.js中render和send的用法详解
May 14 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
element 动态合并表格的步骤
Dec 31 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 什么是PEAR?(第二篇)
2009/03/19 PHP
深入解析php中的foreach问题
2013/06/30 PHP
php生成shtml类用法实例
2014/12/09 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
nginx 设置多个站跨域
2021/03/09 Servers
JQuery 入门实例1
2009/06/25 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
python计算auc指标实例
2017/07/13 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
Python3运算符常见用法分析
2020/02/14 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
市场营销专科应届生求职信
2013/11/24 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
森林防火工作方案
2014/02/14 职场文书
中药学自荐信
2014/06/15 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书