将数字转换为相应的ASCII字符 html

最新推荐文章于 2023-07-17 22:18:45 发布

謦潇的小弟

最新推荐文章于 2023-07-17 22:18:45 发布

阅读量500

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_49191104/article/details/126796863

版权

文章目录

简单使用

使用的是String对象的formCharCode（）方法转换的

			var num2 = Math.floor(Math.random()*26+97);
			var st1 = String.fromCharCode(num2)
			document.write(st1)

案列

四位大小写字母和数字组成的验证码

效果

在这里插入图片描述

点击后

在这里插入图片描述

再次点击

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
			body{
				/* background-color: #00FFFF; */
			}
			.content{
				width: 300px;
				height: 400px;
				margin: 0 auto;
			}
			#box{
			/* background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); */
			width: 100%;
			height: 300px;
			margin: 0 auto;
			margin-top: 200px;
			position: relative;
			text-align: center;
			line-height: 260px;
			font-size: 50px;
			/* background-color: #00BFFF; */
			border: 1px solid #00FFFF;
			/* background-image: linear-gradient(to right, #a8edea 10%, #fed6e3 40%); */
			
			background-image: linear-gradient(to right, #ff3212 50%, #25282b 90%);
			/* background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%); */
			-webkit-background-clip: text; 
			 color: transparent; 
			}
			#btn{
				background:linear-gradient(to right, #fa709a 0%, #fee140 100%); 
				border: 0px;
				height: 50px;
				width: 100%;
				font-size: 30px;
				color: white;
				/* margin-left: 35%; */
				
				position: relative;
				margin: 0 auto;
				
			}
		</style>
	</head>
	<body>
		<div class="content">
		<div id="box">
			 
		</div>
		<button type="button" id="btn" onclick="fun2()">刷新验证码</button>
		</div>
		<script type="text/javascript">
			// String formcharCode
			// 小写字母   91-96
			var stg = /^[A-z0-9]{1,1}$/
			
			
			
			//随机调用3个生成函数
			function number(){
				var num = Math.floor(Math.random()*3);
				if(num==0){
					var num3 = Math.floor(Math.random()*10);
					return num3;
				}else if(num==1){
					var num2 = Math.floor(Math.random()*26+97);
					return num2;
				}else if(num==2){
					var num1 = Math.floor(Math.random()*26+65)
					return num1;
				}
			}
			
			//转换函数
			function fun(num){
				if(num>=0 && num<=9){
					return num;
				}else if(num>=65&& num<=90){
					var st1 = String.fromCharCode(num)
					return st1;
				}else if(num>=97 && num<=123){
					// 使用转换相应的ASCII数字为对应的字符
					var st2 = String.fromCharCode(num)
					return st2;
				}
			}
			
			function fun2(){
				var str = ""
				for(var i=0; i<=3;i++){
					str=str+fun(number())
				}
				// console.log(str)
				document.getElementById("box").innerHTML = str
			}
			// for(var i=1;i<100;i++){
			// 	// var num1 = Math.floor(Math.random()*3+1)
			// 	// console.log(num1)
			// 	fun2()
			// }
		</script>
	</body>
</html>