前端实验五

已于 2023-04-23 18:25:52 修改
阅读量117 收藏
点赞数
分类专栏： 前端 文章标签： 前端 css html
于 2023-04-23 18:21:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/usiehheu/article/details/130327711
版权

文章目录

一、异步代码

<!DOCTYPE html>
<html lang="en" style="font-size: 100px">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, mininum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script type="text/javascript">
		function setRootFontSize(){
			var rootHtml = document.documentElement;
			var rem = rootHtml.clientWidth / (1080 / 100);
			rootHtml.style.fontSize = rem + "px";
		}
		setRootFontSize();
		window.addEventListener("resize", setRootFontSize, false); 
		window.addEventListener("orientationchange", setRootFontSize, false); 
	
	</script>
	<title>实验五异步</title>
	<style>
		body{
			margin: 0px;
		}
		#header{
			background-color: #e66c05;
			height: 1.32rem;
		}
		.header_left{
			float: left;
			width:0.58rem;
			height:0.55rem;
			padding: 0.38rem 0.11rem 0.39rem 0.46rem;
			background-image: url("sub_back.png");
			background-repeat: no-repeat;
			background-position: 0.46rem 0.37rem;
			background-size: 0.55rem 0.55rem;
		}
		.header_center{
			color: #ffffff;
			font-size: 0.57rem;
			padding: 0.35rem 0rem 0.37rem 0rem;
			text-align: center;
			margin: 0rem 1.15rem 0rem 1.15rem;
		}
		.header_right{
			float: right;
			width: 1.15rem;
			height: 1.32rem;
			background-image: url("sub_more.png");
			background-repeat: no-repeat;
			background-position: 0.1rem 0.37rem;
			background-size: 0.55rem 0.55rem;
		}
		.first_left{
			float: left;
			margin-left:0.43rem;
			margin-right:0.73rem;
		}
		.second_left{
			position: relative;
			float: left;
			margin-left:0.43rem;
			margin-right:0.73rem;
		}
		.second_right{
			position: relative;
			float: right;
		}
		.third_left{
			float: left;
			margin-left:0.43rem;
			margin-right:1.35rem;
		}
		.forth_left{
			float: left;
			margin-left:0.43rem;
			margin-right:0.18rem;
		}
		#fifth{
			height: 1.1rem;
			margin-top: 0.65rem;
		}
		.fifth_center{
			background-color: #e66c05;
			color: #ffffff;
			font-size: 0.5rem;
			padding: 0.30rem 0rem 0.30rem 0rem;
			text-align: center;
			margin-left:0.43rem;
			margin-right:0.43rem;
		}
		#sixth{
			height: 60px;
		}
		.sixth_left{
			position: relative;
			height: 30px;
			float: left;
			margin-left:0.43rem;
			font-size: 0.25rem;
			padding-top: 0.3rem;
		}
		.sixth_right{
			position: relative;
			height: 30px;
			float: right;
			margin-right:0.43rem;
			font-size: 0.25rem;
			padding-top: 0.3rem;
		}
		#bottom{
			height: 1.45rem;
			
			width:100%;
			
			background-color:#e66c05;
			
			position:fixed;
			
			bottom:0;
		}
		.bottom_left{
			font-size: 0.31rem;
			color: #e66c05;
			float: left;
			height: 1.25rem;
			width: 1.25rem;
			margin-left:0.25rem;
			text-align: center;
			background-color: #ffffff;
			background-image: url("main_home2.png");
			background-repeat: no-repeat;
			background-size: 0.65rem 0.65rem;
			background-position: 0.3rem 0.15rem;
		}
		.bottom_right{
			font-size: 0.31rem;
			color: #ffffff;
			float: right;
			height: 1.25rem;
			width: 1.25rem;
			text-align: center;
			margin-right:0.25rem;
			background-image: url("main_config1.png");
			background-color: #e66c05;
			background-repeat: no-repeat;
			background-size: 0.65rem 0.65rem;
			background-position: 0.3rem 0.15rem;
		}
		
		#errorArea{
			font-size: 0.35rem;
			padding-left: 3rem;
			padding-top: .45rem;
			color: #ff0000;
		}
		#change{
			padding-left: 3rem;
			height: 1rem;
		}
		
		.m{
			border: none;
			background: #e66c05;
			font-size: 0.5rem;
			color: #ffffff;
		}
		.d{
			outline: #999999;
			width: 1.8rem;
			color: #999999;
			font-size: .3rem;
		}
		.k{
			outline: none;
			font-size: .4rem;
		}
		.c{
			border: none;
			font-size: .4rem;
			color: #e66c05;
			width: 2.4rem;
		}
		
		.h{
			color: #e66c05;
			border: none;
		}
		
	</style>
	<script src="server_release/js/jquery-3.1.1.min.js"></script>
	<script>
		$(document).ready(function(){
			var phoneReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
			$("#errorArea").css("display","none");
			$("#regist").click(function(){
				if($("#userText").val() == ""){
					$("#errorArea").css("display","block");
					$("#errorArea").text("* 用户名不能为空");
				}
				else if ($("#codeText").val() == ""){
					$("#errorArea").css("display","block");
					$("#errorArea").text("* 手机号不能为空");
				}
				else if (!phoneReg.test($("#codeText").val())){
					$("#errorArea").css("display","block");
					$("#errorArea").text("* 手机号不正确!");
				}
				else if($("#mText").val() == ""){
					$("#errorArea").css("display","block");
					$("#errorArea").text("* 验证码不能为空");
				}
				else if($("#mText").val() == "123456"){
					$("#errorArea").css("display","block");
					$("#errorArea").text("* 验证码错误");
				}
				else if($("#wordText").val() == ""){
					$("#errorArea").css("display","block");
					$("#errorArea").text("* 密码不能为空");
				}
				else if($("#wordText1").val() == ""){
					$("#errorArea").css("display","block");
					$("#errorArea").text("* 确认密码不能为空");
				}
				else if($("#wordText").val() != $("#wordText1").val()){
					$("#errorArea").css("display","block");
					$("#errorArea").text("* 两次密码不一致!");
				}
				
				
				else{
					var paras = {name: $("#userText").val(), phone: $("#codeText").val(), password: $("#wordText1").val()};
					$.ajax({
						url: "http://43.136.217.18:8081/registAsync",
						data: paras,
						type: "POST",
						datatype: "JSON",
						
						success: function(data){
							
							if(data.state == "SUC"){
								window.location.href="success.html";
							}
							else{
								$("#errorArea").css("display","block");
								$("#errorArea").text(data.msg);
							}
						},
						error: function(data){
							window.location.href="error.html";
						}
						
					});
				}
			});
		});
		$(document).ready(function(){
			$("#userText").bind("input", function(){
				$("#errorArea").css("display","none");
			})
			$("#codeText").bind("input", function(){
				$("#errorArea").css("display","none");
			})
			$("#mText").bind("input", function(){
				$("#errorArea").css("display","none");
			})
			$("#wordText").bind("input", function(){
				$("#errorArea").css("display","none");
			})
			$("#wordText1").bind("input", function(){
				$("#errorArea").css("display","none");
			})
			
		});
		
		function Check(){
			var _count = document.getElementById("count"); //获取验证码
			var errorArea = document.getElementById("errorArea");
			var phoneReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
			if(document.getElementById("codeText").value==""){
				errorArea.style.display = "block";
				errorArea.innerText = "* 手机号不能为空";
			}
			else if(!phoneReg.test(document.getElementById("codeText").value)){
				errorArea.style.display = "block";
				errorArea.innerText = "* 手机号不正确!";
			}
			
			else{
				var time = 59;
				// 注册单击事件
				// 禁用按钮
				_count.disabled = true;
				// 开启定时器
				var timer = setInterval(function() {
						// 判断剩余秒数
					if (time == 0) {
						// 清除定时器和复原按钮
						clearInterval(timer);
						_count.disabled = false;
						_count.innerHTML = '获取验证码';
					} else {
						_count.innerHTML = `${time}秒后获取`;
						time--;
					}
				}, 1000);
			};
		}
	</script>

	
	
</head>


<body>

<div id="header">
	<div class="header_left"></div>
	<div class="header_right"></div>
	<div class=header_center>用户注册</div>
</div>

<div id="first">
	<div class="first_left"><font size="5" color="#666666">用户名</font></div>
	<div class="first_right"><input class="k" style="border-top:0;border-left:0;border-right:0;width: 7.3rem" type="text" id="userText" placeholder="请输入用户名"/></div>
</div>

<div id="second">
	<div class="second_left"><font size="5" color="#666666">手机号</font></div>
	<div class="second_center"><input class="k" style="border-top:0;border-left:0;border-right:0;width: 2.8rem;" type="tel" id="codeText" placeholder="请输入手机号"/>
	<button id="count" class="h" onclick="Check()">获取验证码</button>
	<input type="number" id="mText" placeholder="请输入验证码" class="d"/></div>
</div>


<div id="third">
	<div class="third_left"><font size="5" color="#666666">密码</font></div>
	<div class="third_right"><input class="k" type="password" id="wordText" style="border-top:0;border-left:0;border-right:0;width: 7.3rem"/></div>
</div>
<div id="forth">
	<div class="forth_left"><font size="5" color="#666666">确认密码</font></div>
	<div class="forth_right"><input id="wordText1" class="k" style="border-top:0;border-left:0;border-right:0;width: 7.3rem" type="password"/></div>
</div>

<div id="errorArea"></div>

<div id="fifth">
	<div class="fifth_center"><input type="button" id="regist" value='注  册' style='width: 100%' class="m"/></div>

</div>
<div id="sixth">
	<div class="sixth_left">已有账号</div>
	<div class="sixth_right">更换手机号</div>
</div>

<div id="bottom">
	<div class="bottom_left"><br /><br />首页</div>
	<div class="bottom_right"><br /><br />设置</div>
</div>
</body>
</html>

二、同步代码

<form action="http://43.136.217.18:8081/registSync" method="post">
<div>用户名</div><div><input type="text" name="name"></div>
<div>手机号</div><div><input type="tel" name="phone"></div>
<div>密码</div><div><input type="psassword" name="psassword"></div>
<div>确认密码</div><div><input type="psassword"></div>
<div><input type="submit" value="注册"></div>
</form>
卖菜不涨价
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5，web前端实验五
12-22
下拉导航菜单（横向，竖向），div标签定位排版的使用
html5 web前端实验11
12-22
1.设计一个校园办公系统认证页面，页面效果如图1-11-1...某十字路口交通信号灯每分钟绿灯35秒、黄灯5秒、红灯30秒，按“绿-->黄-->红-->绿”往复循环。代码参考：“红绿灯倒计时.pdf” 补充：图形放大特效 文件名：图
font用法分析讲解：样式、大小（解决浏览器默认字体大小问题）、粗细、类型、行高、小型大写、 文本的大小写、对齐方式、首行缩进、文本修饰横线、间距、 换行方式与强制换行、文本溢出（...）、字符实体
君莫笑
11-28 2631
font详细用法一、font-family 字体一、font-size 字体大小二级目录三级目录 一、font-family 字体 一、font-size 字体大小 单位：px |%|em|rem 注意： % -相对于父容器中字体%调整 1em -等于父级的字体尺寸— 相对于父级字体大小而言 rem -相对于html（根标签）的字体大小 二级目录 三级目录 ...
HTML流动布局各种宽度自适应
weixin_33939843的博客
11-18 385
<!DOCTYPE html> <html lang="en"> <style> html,body{ padding: 0;margin: 0; } div{ font-size: 12px; } </style> <head> <m...
rem简单实现移动端适配
PaddyWang的博客
03-26 2016
rem：移动web开发 默认字体大小是16px 在<html>中设置字体大小 与em的区别：em是在父级设置字体大小受影响 移动端适配首先获取屏幕的宽度 计算当前屏幕宽度和640的比例 计算出font-size的值 改变html的font-size的值 <!DOCTYPE html> <html lang="en" style="font-size: 100px;"> <head> <me
font-size:100%理解
热门推荐
马优晨
06-04 1万+
font-size是设置字体的属性 常见设置字体大小有 px, rem,em 但是有一种设置就是设置 font-size为百分比。 font-size:100%; 设置字体属性为默认大小，是相对于浏览器默认字体大小或继承body设定的字体大小来说的。 例如： body{ font-size:12px; } div{ font-size:100%; //这个div标签的字体大...
从网易与淘宝的font-size思考前端设计稿与工作流
weixin_34151004的博客
10-15 1048
本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。 1. 问题的引出 最近阅读白树的博文《移动web资源整理》时，他在博文中有一段指出，如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范...
Web前端实验五
qq_64381400的博客
04-22 356
复制身份令牌，点击页面右上角的“Authorization”，粘贴后点击按钮“Authorize”5.点击“删除”按钮请求服务端删除数据接口，在服务端数据成功删除后，移除表格中数据行。header请求头携带变量的值：登录成功所记录下的token身份令牌。header请求头携带变量的值：登录成功所记录下的token身份令牌。header请求头携带变量的值：登录成功所记录下的token身份令牌。header请求头携带变量的值：登录成功所记录下的token身份令牌。请求头中携带当前登录用户的token身份令牌。
Web前端实验5
qq_53745727的博客
04-23 271
(1) 将实验3的main.html复制成main_sync.html，参考《实验5_Web接口文档》1.2节，为对应的表单控件添加name属性（同步提交时，控件的name值与服务器收到的参数名一一对应）；将注册按钮类型改为submit；再添加一个form标记将所有表单控件包围，action和method参考《实验5_Web接口文档》1.1节，参考代码（需要添加和修改的地方用红色标示）：div>用户名</div>></div>div>手机号</div>></div>div>密码。
Web前端实验一
yaojinglin_alone的博客
03-06 187
web前端学习之路
web前端开发实验——1
qq_46476515的博客
10-15 1109
web前端开发应用作业 1
web前端开发实验——5
qq_46476515的博客
10-17 1071
web前端开发实验——5
html5，web前端实验
12-22
form表单的使用，排版（表格形式，问卷调查形式）， 项目20 设计科技工作者建言页面 ...1.采用DIV、表格混合布局设计“留言板”页面，效果如图1-7-1所示。未应用样式时留言板页面如图1-7-2所示。 ...
html5,web前端实验四
12-22
鼠标经过显示大图(Hoverbox Image Gallery)，超链接，文本标签，简易商品导购
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1095
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
golang websocket 发送消息莫名其妙断开的问题记录
最新发布
qq_38189542的博客
05-20 72
公司需要做个B/S架构的前端展示项目，当前以为是小case，但是在实现后端功能的时候，还是被坑了。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 456
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
综合性练习-验证码
cj13106811623的博客
05-15 815
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
springboot+vue2+elementui实现时间段查询
2301_76604664的博客
05-20 172
将前端传来的时间数组，赋值给对应的属性；
web前端开发技术实验与实践课外拓展训练5
10-25
web前端开发技术实验与实践课外拓展训练5是一门旨在提高学生在web前端开发方面的实践能力和创新思维的课程。这门课程主要包括实验和实践两个部分，通过实验来巩固学生对前端开发技术的了解，并通过实践来培养学生的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值