我们先来写一段代码：
<body><form action="#" method="post">//写一个表单<span>用户名：</span><input type="text" id="username" name="username"><span>密码：</span><input type="password" id="password" name="password"><button type="submit" onclick="A()">提交</button> //onclick---点击调用函数提交</form>
<script>function A(){//用js获取用户名，密码，说明不加密之前账号容易泄露//获取用户名节点var user = document.getElementById('username');//获取密码节点var pass = document.getElementById('password');console.log(user.value);//在控制台输出用户名的值，方便观察console.log(pass.value);//在控制台输出密码的值，方便观察pass.value = 'abc';return true;}
</script>
</body>然后我们来说说，在提交了表单以后，我们可以在浏览器-->网络-->负载 里面去看自己传入的username、password（各个浏览器观察的位置不一样）
由此我们可以知道这样写代码是不具备安全性的
所以接下来我们用md5加密秘密
这里我们需要引入一个别人写好的js文件，用这个文件来给密码加密：
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>//别人的md5.js
</head>
<body><form action="#" method="post"><span>用户名：</span><input type="text" id="username" name="username"><span>密码：</span><input type="password" id="password" name="password"><button type="submit" onclick="A()">提交</button></form>
<script>function A(){var count = document.getElementById('username');var pwd = document.getElementById('password');pwd.value = md5(pwd.value);//调用md5方法执行加密console.log(pwd.value);}
</script>
</body>
然而这样加密别人依旧可以通过一些操作获取你的密码，于是乎现在我们再介绍一种更有效保密的方法：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>//使用别人的md5.js<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>//将onclick变为onsubmit，将绑定按钮变为绑定表单<form action="#" method="post" onsubmit="return A()"><span>用户名：</span><input type="text" id="username" name="username"><span>密码：</span><input type="password" id="password"><input type="hidden" name="password" id="md5pwd"><button type="submit">提交</button></form>
<script>function A(){var count = document.getElementById('username');var pwd = document.getElementById('password');var md5pwd = document.getElementById('md5pwd');//相当于把pwd视为密码地中转站，md5pwd才是重点，这样更加安全md5pwd.value = md5(pwd.value);return true;//用于判断，在后续判断密码是否正确有用}
</script>
</body>
</html>
