JS实现随机五位验证码与密码隐藏

最新推荐文章于 2022-06-05 20:58:13 发布

Re:FusE

最新推荐文章于 2022-06-05 20:58:13 发布

阅读量271

点赞数

分类专栏： Jacascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44364131/article/details/108827826

版权

Jacascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #code{
        width: 180px;
        height: 60px;
        background-color: lightblue;
        font-size: 44px;
        letter-spacing: 5px;
    }
    </style>
</head>
<body>
    
	 <form action="http://www.baidu.com">
	 <div style="width:400px ;">
	 	<input type="text" id="password" placeholder="请输入密码">
	 	<span style="position: relative;top:10px;right: 5px;">
	 		<img id="imgbutton" src="./show.png" alt="" onclick="hideorshowpwd()">
	 	</span>
	 </div>
	 <br>
	 <input type="submit" value="提交" name="">
	 &nbsp;&nbsp;
	 <input type="reset"  value="重置">
	 </form>
	<div id="code"></div>
 <button onclick="createRandCode()">看不清验证码？</button>
 <script>
 var passwordelement = document.getElementById("password");
 function hideorshowpwd(){
 	if(passwordelement.type == "text"){
 		passwordelement.type ="password";
 	}else{
 		passwordelement.type ="text";
 	}	
 }
 function createRandCode(){
     var auth=[];
     for(var a=48;a<=57;a++){
     auth.push(String.fromCharCode(a));
     }
     for(var b=65;b<=90;b++){
     auth.push(String.fromCharCode(b));
     }
     for(var c=97;c<=122;c++){
     auth.push(String.fromCharCode(c));
     }
     var randcode="";
     for(var i=0;i<5;i++){//5位随机码
         var randpos =Math.floor(Math.random() * auth.length);         
         randcode+= auth[randpos];
     }
     document.getElementById("code").innerHTML=randcode;
 	return randcode;
 }
  </script> 
</body>
</html>

虽然简单不过非常实用

Re:FusE

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现随机五位验证码与密码隐藏

<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title> <style> #code{ width: 180px; height: 60px; background-color: lightblue; font-size: 44px; lett.
复制链接

扫一扫

专栏目录