md5加密的前端实现

最新推荐文章于 2024-10-10 19:55:17 发布

FakeOccupational

最新推荐文章于 2024-10-10 19:55:17 发布

阅读量611

点赞数

分类专栏：服务化&架构

本文链接：https://blog.csdn.net/ResumeProject/article/details/108573799

版权

服务化&架构专栏收录该内容

109 篇文章 0 订阅

订阅专栏

md5加密的前端实现

实现结果：
在这里插入图片描述
实验环境：https://www.jq22.com/webide/

<!--MD5加密-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
<script type="text/javascript">
console.log(md5("123456"));
</script>

用到的其他基础jQuery知识：
jQuery直接替换HTML方法（类似innerHTML）：

$("#yourid").html("<img src='1.jpg'>");

直接调用 :

var html=$("#id").html();

     https://www.runoob.com/jquery/jquery-hide-show.html
     https://www.cnblogs.com/fozero/p/5916878.html

gif录屏软甲的使用

https://recordit.co/
在这里插入图片描述

在这里插入图片描述

可运行的总体代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>修改代码，右边会自动显示结果</title>
<!--适应移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css样式-->
<style>
	body{background-color: #EBEBEB}
	.aaa{background-color: #CB4F51;padding: 10px;display: block}
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>

<h3>这是一个简单的点击效果</h3>

<div class="aaa">
    点击我
</div>

<script type="text/javascript">
	$(document).ready(function(){
	      //点击
		  $(".aaa").click(function(){
		      
		 		 alert(md5("123456"));
		  });
		  //悬停到目标上
		  $(".aaa").mouseover(function(){
		 		$(this).css("background-color","#0060ff");
		  }); 
		  //悬停离开
		  $(".aaa").mouseout(function(){ 
		 		$(this).css("background-color","#CB4F51");
		  });
	});
</script>
<!--MD5加密-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
<script type="text/javascript">
console.log(md5("123456"));
</script>
</body>
</html>