登录界面

效果图：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">html,body{height: 100%;margin: 0px;}body{background:linear-gradient(to left, transparent,pink, #03e9f4 ) ;}#d123{margin: 0px;height: 400px;width: 400px;position: absolute;top: 26%;left: 37.5%;/* transform: translate(-50%,-50%); */border-radius: 50%;animation:name 4s ease-in-out infinite;background:linear-gradient(to right, #03e9f4 ,pink, transparent)}@keyframes name{from{transform: rotateZ(0deg);}50%{}to{transform: rotateZ(360deg);}}form{height:220px;width: 300px;background: rgba(255,255,250,.5);position:absolute ;left: 50%;top:50%;/* 在自己的基础上往右边和下面走-50% */transform: translate(-50%,-50%);border-radius: 10px;}form>h2{text-align: center;margin-left: 10px;}p{text-align: center;height: 40px;margin: 0px;position: relative;margin: 15px auto;}input{display: block;width:30%;margin: auto;border-radius:20px;transition: 1.4s;text-align: center;border: none;}input:focus{width:80%;background: pink;border: none;box-shadow: 0 0 15px rgba(0,255,255,.6), 0 0 25px rgba(0,255,255,.6), 0 0 50px rgba(0,255,255,.6),0 0 100px rgba(0,255,255,.6);}label{position: absolute;left: 20px;transition:1.4s;top:0px;}p:focus-within label{top: -20px;left:110px;}#s1{position: absolute;font-size: 12px;top: 100px;color: red;}#s2{color: red;position: absolute;font-size: 12px;bottom: 50px;}#a {position: relative;left: 20px;padding:0px;height: 30px;width: 50px;color: rgba(0,0,0,.5);border-radius:6px;border: none;/* 同样加个过渡 */transition: all 1s;}#a:hover {color: #fff;border-radius: 5px;background-color: rgba(0,0,0,.6);/* 设置上右下左每个位置的参数 每个参数为水平阴影位置 垂直阴影 模糊距离 */box-shadow: 0 0 15px rgba(0,0,0,.6), 0 0 25px rgba(0,0,0,.6), 0 0 50px rgba(0,0,0,.6),0 0 100px rgba(0,0,0,.6);}#a1 {position: relative;left: 180px;padding:0px;height: 30px;width: 50px;color: rgba(0,0,0,.5);border-radius:6px;border: none;/* 同样加个过渡 */transition: all 1s;}#a1:hover {color: #fff;border-radius: 5px;background-color: rgba(0,0,0,.6);/* 设置上右下左每个位置的参数 每个参数为水平阴影位置 垂直阴影 模糊距离 */box-shadow: 0 0 15px rgba(0,0,0,.6), 0 0 25px rgba(0,0,0,.6), 0 0 50px rgba(0,0,0,.6),0 0 100px rgba(0,0,0,.6);}</style></head><body><div id="d123"></div><form action="" method=""><h2>登录界面</h2><p><label id="dl1">用户名：</label><input type="text" onkeyup="onname(this,2)" id="uname" maxlength="10" placeholder="请输入账户"/></p><p><label id="dl2">用户密码：</label><input type="password" onkeyup="onname(this,3)" id="upwd" maxlength="10" placeholder="请输入密码"/></p><button id="a" type="button" onclick="tz(2)">登录</button> <button id="a1" type="button" onclick="tz(3)">注册</button><span id="s1"></span><span id="s2"></span></form><script type="text/javascript">function onname(t,id){var cname=t.value.lengthconsole.log(t.value.length)if(id=="2"){var sp=document.getElementById("s1");if(cname>4){sp.textContent="√"sp.style.color="green"return true}if(cname>0&&cname<3){sp.textContent="用户名不格式正确"sp.style.color="red"return false}if(cname==0){sp.textContent=""return false}}if(id=="3"){var sp2=document.getElementById("s2");if(cname>4){sp2.textContent="√"sp2.style.color="green"return true}if(cname>0&&cname<3){sp2.textContent="密码格式不正确"sp2.style.color="red"return false}if(cname==0){sp2.textContent=""return false}}}function tz(dd){if(dd==3){window.location.href="zc.html"}var b=document.getElementById("uname").value.lengthvar c=document.getElementById("upwd").value.lengthif(c>4&&b>4){window.location.href="new_file.html"}}</script></body>
</html>

注册界面

效果图：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">html,body{height: 100%;margin: 0px;}body{background:linear-gradient(to left, transparent,pink, #03e9f4 ) ;}form{position: absolute;width: 400px;height: 300px;background: rgba(255,255,200,.5);left: 50%;top: 50%;transform: translate(-50%,-50%);border:none;border-radius: 20px;}form>h1{text-align: center;margin-left: 10px;}p{text-align: center;height: 40px;margin: 0px;position: relative;margin: 15px auto;}input{display: block;width:30%;margin: auto;border-radius:20px;transition: 1s;text-align: center;border: none;}input:focus{width:80%;background: pink;border: none;box-shadow: 0 0 15px rgba(0,255,255,.6), 0 0 25px rgba(0,255,255,.6), 0 0 50px rgba(0,255,255,.6),0 0 100px rgba(0,255,255,.6);}button{position: relative;left: 37%;border: none;padding:0px;height: 50px;width: 100px;background: rgba(253,178,123,.7);box-shadow: 0 0 15px  rgba(253,178,123,.7), 0 0 25px  rgba(253,178,123,.7), 0 0 50px rgba(253,178,123,.7),0 0 100px rgba(253,178,123,.7);color: rgba(0,0,0,.5);border-radius:6px;transition: 1s;animation: name 3s ease-in-out infinite ;}@keyframes name{0%{box-shadow: 0 0 15px  rgba(253,178,123,.7), 0 0 25px  rgba(253,178,123,.7), 0 0 50px rgba(253,178,123,.7),0 0 100px rgba(253,178,123,.7);}50%{box-shadow: 0 0 15px  rgba(200,178,123,.7), 0 0 25px  rgba(203,178,123,.7), 0 0 50px rgba(203,178,123,.7),0 0 100px rgba(200,178,123,.7);}100%{box-shadow: 0 0 15px  rgba(23,178,123,.7), 0 0 25px  rgba(25,178,123,.7), 0 0 50px rgba(25,178,123,.7),0 0 100px rgba(25,178,123,.7);}}button:hover {color: #fff;border-radius: 5px;background-color: rgba(0,0,0,.6);/* 设置上右下左每个位置的参数 每个参数为水平阴影位置 垂直阴影 模糊距离 */box-shadow: 0 0 15px rgba(0,0,0,.6), 0 0 25px rgba(0,0,0,.6), 0 0 50px rgba(0,0,0,.6),0 0 100px rgba(0,0,0,.6);}.error{text-shadow:0px 1px red;}</style></head><body><form action="" onsubmit="return check()"><h1>账户注册</h1><p>名字: <input type="text" id="userName" onkeyup="checkLabel(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')"><span><i class="error"></i></span></p><p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this,/^\w{6,10}$/,'密码的长度在6-10')"><span><i class="error"></i></span></p><p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱中必须包含@')"><span><i class="error"></i></span></p><button type="button" onclick="c()">注册</button></form><script>//用来检查名字是否合规function checkLabel(obj,rex,tip) {var length = obj.value.lengthvar label = obj.parentElement.getElementsByClassName("error")[0]console.log(obj.value)if (length > 0) {//里面有内容//内容在正则匹配之间if (rex.test(obj.value)) {label.textContent = "												


											

JavaScript 简单项目代码相关推荐
	

    
								
  1. javaScript简单项目案例
		
    js简单案例 案例一:完成多分支案例"年龄层判断"(代码和效果图). 案例二:完成"prompt()方法及动态输入实现矩形周长面积计算"的案例(代码和效果图). ...
    
		
    2. 
						
  2. SSM简单项目代码分析
		
    从朋友那里看了一个简单的ssm三层框架的学生管理系统的代码,开始分析理解其中的代码 代码git 1.整体架构和思路 由Controller,Service,DAO三层逐层调用实现学生管理 主界面是in ...
    
		
    3. 
						
  3. JavaScript书店项目
		
    JavaScript书店项目 JavaScript书店项目 代码链接在文章末尾 本项目实现了用户注册栏正则表达式验证:首页图书添加购物车功能:跳转图书明细页功能:背景音乐功能:购物车商品增加.减少.多 ...
    
		
    4. 
						
  4. html js控制页面蒙版,JavaScript蒙板(model)功能的简单实现代码
		
    思路: •创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住 position: absolute; top: 0; left: 0; display: none; background-colo ...
    
		
    5. 
						
  5. 简单下拉菜单html,JavaScript简单下拉菜单实例代码
		
    本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最 ...
    
		
    6. 
						
  6. html计算年龄代码,JavaScript简单计算人的年龄示例
		
    本文实例讲述了JavaScript简单计算人的年龄的方法.分享给大家供大家参考,具体如下: 注意Date()类型转换,否则会出现NaN的错误 birth为yyyy-mm-dd的日期格式 完整示例代码如 ...
    
		
    7. 
						
  7. 姜宁：开源不是简单的代码开放，是依托项目构建一个共同体丨COSCon'20 专访
		
    2020 中国开源年会 (COSCon'20) 将于 10月24-25日由开源社举办,SegmentFault 思否社区为本次大会的战略合作媒体,并将进行独家的线上直播. 本次年会将采取线上线下相结合 ...
    
		
    8. 
						
  8. 搭建去中心化交易所——分享一个简单的DEX项目代码及文档
		
    分享一个简单的DEX项目代码及文档 Dex.top项目源码及文档分享 // DEx.top - Instant Trading on Chain // // Author: DEx.top Teamp ...
    
		
    9. 
						
  9. android简单项目及代码_Android 开源项目 (AOSP) 代码搜索工具正式发布
		
    我们非常高兴的为各位开发者们介绍一个 Android 开源项目 (AOSP) 的代码搜索工具: https://cs.android.com Android 开源项目的代码由一系列 Git 管理的代码 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 航天智慧物流创意组-技术培训
		
    2. 
						
  2. python 字符串切割例题_Python字符串及练习题
		
    3. 
						
  3. 如何做好错误处理？（PHP篇）
		
    4. 
						
  4. 链表实现c语言通讯录管理系统,C++链表实现通讯录管理系统.pdf
		
    5. 
						
  5. opensuse x64下编译Ice源码（以编译c++为例）
		
    6. 
						
  6. 【英语学习】【WOTD】muse 释义/词源/示例
		
    7. 
						
  7. 那些年做过的 .NET Web 项目和 iOS 之路的一些思考
		
    8. 
						
  8. Extjs study
		
    9. 
						
  9. 设计与人工智能设计师
		
    10. 
						
  10. matlab编程椅子放平问题,数学模型程序代码Matlab-姜启源-第一章-建立数学模型.docx...
		
    11. 
						
  11. java 汉字乱码_【转】Java中文乱码的解决
		
    12. 
						
  12. css3 微信聊天小尖角,用CSS制作聊天框小尖角、气泡效果
		
    13. 
						
  13. 学习s3c2440的随笔笔记
		
    14. 
						
  14. postfix反垃圾邮件说明
		
    15. 
						
  15. 视频直播网站开发的最佳实践
		
    16. 
						
  16. 增长的旋律——AARRR模式思考（二）
		
    17. 
						
  17. HR团队如何提升效率？人力资源RPA给你答案
		
    18. 
						
  18. 产品开发必看！一篇讲透，京东商城双轮驱动的核心业务模式！
		
    19. 
						
  19. Alpha通道原理及实现方法
		
    20. 
						
  20. STM32L152RE实现串口发送及接收数据
		
    21. 
		

	


热门文章
	

    
									
  1. ubuntu 在使用U盘安装时出现的问题总结
			
    2. 
						
  2. 蓝桥—回文日期（c语言）
			
    3. 
						
  3. K8s日志组件-Loki是如何存储数据的？
			
    4. 
						
  4. 零基础小白转行web前端，该怎么学？
			
    5. 
						
  5. 华南农业计算机硕士毕业论文,华南农业大学学术型研究生学位论文撰写规范.docx...
			
    6. 
						
  6. java验证公钥私钥是否匹配及公钥私钥与字符串相互转换
			
    7. 
						
  7. python第二次作业
			
    8. 
						
  8. 2011年武汉东湖樱花节(摄影)
			
    9. 
						
  9. 也许你真的需要一个扩展屏幕, 让你的工作效率成倍增加
			
    10. 
						
  10. resolver android,Android ContentResolver使用说明
			
    11.