原原生生JS实现登陆框效果

最新推荐文章于 2022-08-21 15:06:33 发布

MyKyle18

最新推荐文章于 2022-08-21 15:06:33 发布

阅读量380

点赞数

分类专栏：新手前端路文章标签： javascript

本文链接：https://blog.csdn.net/qq_18547381/article/details/106175619

版权

前排提示：代码纯原创，以纯原生为目标，以新手为人群。

登录框需求：

点击激活按钮显示一个登录框，且登录框水平垂直居中

输入的用户名必须是6-12位，且符合数字字母横杠（‘-’）中的任意两种组合或三种组合

如果输入用户名不符合第二条的规定则在输入框下面进行提示

步骤一：点击激活按钮显示一个登录框，主要考察是display的调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#from{
				display: none;
				/* 给登陆加个边框美化下 */
				border: #000000 solid 1px;
				padding: 30px;
				/* 考虑到是弹出的登录框，加个层级 */
				z-index: 9999; 
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="showFrom()">激活</button>
		<form action="" method="post" id="from">
			用户：<input type="text" name=&

最低0.47元/天解锁文章

MyKyle18

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原原生生JS实现登陆框效果

前排提示：代码纯原创，以纯原生为目标，以新手为人群。登录框需求：点击激活按钮显示一个登录框，且登录框水平垂直居中输入的用户名必须是6-12位，且符合数字字母横杠（‘-’）中的任意两种组合或三种组合如果输入用户名不符合第二条的规定则在输入框下面进行提示步骤一：点击激活按钮显示一个登录框，主要考察是display的调用<!DOCTYPE html><html> <head> <meta charset="utf-8"> ..
复制链接

扫一扫