当前位置： 首页 > news >正文

【web前端开发】前端生日礼物--注册页面篇

news 来源：原创 2024/5/4 20:12:16

文章目录

  • 总计划
  • 注册界面
    • 页面背景设置
      • 注意
    • 字体选择
      • 不明原因：在父相子绝下字体不对齐父类
    • 登录浮窗
      • 制作透明盒子
      • 给盒子设定圆角值
      • 把透明盒子搬到register页面中
      • 文本输入框样式设置
        • 1.改变背景框颜色+文本内容
        • 2.放入register.php的布局问题
        • 3.输入框下拉更进
      • 实现登录功能
        • 1.对代码进行理解+配合下面章节中**其他-input**的内容理解
        • 2.对代码功能适应修改
        • 3.按照成功的逻辑写入register.php中
    • 可改进
  • 其他
    • css-普通盒子
    • input
  • 暂时成功样品

总计划

  1. 登录界面 今日
  2. 主页面+登录失败 24日
  3. 记事本 25、26、27日

注册界面

页面背景设置

way1:

.content{
            position: relative;
            width:800px;
            height:300px;
            background: url(5.jpg);
            background-repeat: repeat-x;
            background-size: cover;
        }

铺不满
在这里插入图片描述

way2:

.content{
            position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background: url(5.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-position: center 0;
        }

过于满了。。
在这里插入图片描述
way3:
宽度不管了，高度适中，背景使用body加渐变

<style>
        body{
            /* background-color: #4DCDF2; */
            height:100vh;
            display:flex;
            justify-content:center;
            align-items:center;
            /* 渐变背景 */
            background:linear-gradient(to top left,#AFC4FF,#0EF3FF,#4A83FF);
            overflow:hidden;
        }
        .content{
            position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                /* min-width: 1000px; */
                /* z-index:-10; */
                /* zoom: 1; */
                /* background-position: center; */
                background-color: #4DCDF2;
                background: url(5.jpg);
                background-repeat: no-repeat;
                /* background-size: cover; */
                -o-background-size: cover;
                background-position: center 0;
            }
    </style>

在这里插入图片描述

注意

  1. 去掉宽高图片不显示
  2. 以后设置页面可以参考此模板
  3. 设置为相对位置，顶端有空隙。（解决）
    在这里插入图片描述
    way:改top值
    在这里插入图片描述

字体选择

使用普通白色
在这里插入图片描述

不明原因：在父相子绝下字体不对齐父类

在这里插入图片描述
由于显示效果不好，打算把字体放入登录浮窗中

登录浮窗

制作透明盒子

way1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- //浮动窗口的显示隐藏是通过js实现的 -->
    <script type="text/javascript">
    /*显示浮动框*/
        function showCommentDiv(obj) {
            var top = $(obj).offset().top;
            var left = $(obj).offset().left + $(obj).width() - 7;
            $("#commentListDiv").css({'top':top + "px",'left':left+"px"}).show("slow");
        }

        function showThis(obj) {
            $(obj).show();
        }
        /*隐藏浮动框*/
        function hideCommentDiv() {
            $("#editCourseDiv").hide();
        }
        function hideThis(obj) {
            $(obj).hide();
        }
        // 获取选中的评语
        function getValue(obj) {  
        var selectId = obj.value;  
        var selectTitle = obj.title;  
        $("#teaMarkContent").val(selectTitle);
        }  

    </script>
</head>
<body>
<div align="left" id="commentListDiv" onmouseover="showThis(this);" onmouseout="hideThis(this);" style="width:200px;height:200px;border:solid 1px #a1bece;position:absolute;z-index:10000;display:none;background-color:#EEF7EA;">
    <p><b>基本评语：</b></p>
            <table>
                <c:forEach items="${commentListJB}" var="comment">
                    <tr>
                        <td>
                            <span style="white-space:nowrap;">
                                <input type="radio" name="comment" id="comment" value="${comment.id}" title="${comment.content}" onclick="getValue(this)"/>${comment.content}
                            </span>
                        </td>
                    </tr>
                </c:forEach>
            </table>
    </div>
</body>
</html>

无效果：
在这里插入图片描述
way2:

.bottom{
        position:absolute;
        bottom:100px;
        width:300px;
        height:300px;
        line-height:30px;
        background-color: rgba(200,200,200,0.4); //设置颜色的半透明效果
        background-position: center;
    }

在这里插入图片描述
成功！

给盒子设定圆角值

在bottom类中添加语句如下：

border-radius: 50%;

在这里插入图片描述
成功！

把透明盒子搬到register页面中

1.明明使用了父相子绝，仍然关系错乱：

.lucency{
                position:absolute;
                bottom:500px;
                width:300px;
                height:300px;
                line-height:30px;
                background-color: rgba(200,200,200,0.5); //设置颜色的半透明效果
                background-position: center;
                border-radius: 50%;
            }

在这里插入图片描述
2.只有top类设置对其有效
在这里插入图片描述

3.把前面两个盒子设置为父相子绝，最后使用margin-left推动透明盒子

*{
            top:0;
            bottom:0;
            left:0;
        }
        body{
            position:relative;
            /* background-color: #4DCDF2; */
            height:100vh;
            display:flex;
            justify-content:center;
            align-items:center;
            /* 渐变背景 */
            background:linear-gradient(to top left,#AFC4FF,#0EF3FF,#4A83FF);
            overflow:hidden;
        }
        .content{
            position: absolute;
            
            /* bottom: -6px; */
            width:100%;
            height:100%;
            
            
            background: url(images/register/5.jpg);
            background-repeat: no-repeat;
            -o-background-size: cover;
            background-position: center 0;
            /* margin:auto; */
            }
            .lucency{
                
                margin-top: 200px;
                /* margin-right:500px; */
                width:300px;
                height:300px;
                margin-left:600px;
                border-radius: 50%;
                /* line-height:30px; */
                background-color: rgba(200,200,200,0.5); //设置颜色的半透明效果
                /* background-position: center; */
                margin:auto;
                
            }

最终效果：
在这里插入图片描述

文本输入框样式设置

使用B站的炫酷特效

https://www.bilibili.com/video/BV1UT41157KF/?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=6954056a8db135714ab7367467252a52

效果图：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.改变背景框颜色+文本内容

在这里插入图片描述
感觉不错~

2.放入register.php的布局问题

放入所有盒子外层+稍微修改register.php的body和*类：

不明原因框下拉：
在这里插入图片描述

3.输入框下拉更进

1.解决刚刚上面问题
对比8和body，改变代码：
在这里插入图片描述
在这里插入图片描述
ok~~~

2.继续修饰

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
register.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:'Poppins',sans-serif;

        }
        body{
            position:relative;
            /* 渐变背景 */
            background:linear-gradient(to top left,#AFC4FF,#0EF3FF,#4A83FF);
            overflow:hidden;
            
            display:flex;
            justify-content:center;
            align-items:center;
            min-height:100vh;
            flex-direction:column;
            gap:30px;
        }
        .content{
            position: absolute;
            
            /* bottom: -6px; */
            width:100%;
            height:100%;
            
            
            background: url(images/register/5.jpg);
            background-repeat: no-repeat;
            -o-background-size: cover;
            background-position: center 0;
            /* margin:auto; */
            }
        .lucency{
            position:relative;
            margin-top: 200px;
            width: 400px;
            height: 400px;
            margin-left: 600px;
            border-radius: 50%;
            background-color: rgba(200,400,400,0.5); //设置颜色的半透明效果
            /* background-position: center; */
            /* margin:auto; */
        }
        .text{
            position: absolute;
            font-family:Microsoft YaHei UI Light;
            font-size:40px;
            top:40px;
            /* font-weight:bold; */
        }



        /* 进入输入框类 */
        .inputBox{
            position:relative;
            width:300px;
            left:30px;
            top:30px;
        }
        .inputBox input{
            width:100%;
            padding:10px;
            border:1px soild rgba(255,255,255,0.25);
            /* background:#1d2b3a; */
            /* background:#46CCEE; */
            background:#85E6F8;
            border-radius:5px;
            /* 关闭聚焦 */
            outline:none;
            color:#fff;
            font-size:1em;
        }
        .inputBox span{
            position: absolute;
            left:0;
            padding:10px;
            pointer-events:none;
            font-size:1em;
            /* color:rgba(255,255,255,0.25); */
            color:#fff;
            text-transform:uppercase;
            transition: 0.5s;
        }
        .inputBox input:valid~span,
        .inputBox input:focus~span{
            color:#00dfc4;;
            transform: translateX(10px) translateY(-7px);
            font-size:0.65em;
            padding:0 10px;
            background: #fff;
            border-left:1px solid #00dfc4;
            border-right:1px solid #00dfc4;
            letter-spacing:0.2em;
        }
        .inputBox:nth-child(2) input:valid~span,
        .inputBox:nth-child(2) input:focus~span{
            background:#00dfc4;
            color:#fff;
            border-radius:2px;
        }
        .inputBox input:valid,
        .inputBox input:focus{
            border:1px solid #00dfc4;
        }

    </style>

</head>
<body>
    <div class="content">
        <div class="lucency">
            <!-- 进入透明盒子lucency -->
            <p class="text">Happy  Brithday's  Day</p>
        </div>
    </div>
    <!-- 尝试不嵌套位置书写 -->
    <div class="inputBox">
        <input type="text" required="required">
        <span>Your Name</span>
    </div>
    <div class="inputBox">
        <input type="text" required="required">
        <span>Your Wife's Name</span>
    </div>
</body>
</html>

实现登录功能

翻阅多篇文章和视频，终于有点思路。。。

【html页面实现登录验证码功能（纯前端）】https://blog.csdn.net/qq_49137582/article/details/125253568

1.对代码进行理解+配合下面章节中其他-input的内容理解

<!-- 1.我们不需要 注册 这一功能，所以此代码需求上很大相似 -->
<!-- 2.主要关注的是： -->
<!-- * 判断输入框内输入是否符合的逻辑 -->
<!DOCTYPE HTML>
<html>
	<head>
		<title>注册模块</title>
		<meta charset="utf-8">
		<style>
			#vcode {
				height: 35px;
				width: 40%;
				font-size: 15pt;
				margin-left: 15%;
				border-radius: 5px;
				border: 1;
				padding-left: 8px;
			}
			#code {
				color: #ffffff;
				/*字体颜色白色*/
				background-color: #000000;
				font-size: 20pt;
				font-family: "华康娃娃体W5";
				padding: 5px 35px 10px 35px;
				margin-left: 5%;
				cursor: pointer;
			}
			#search_pass_link {
				width: 70%;
				text-align: right;
				margin: 0 auto;
				padding: 5px;
			}
			.btns {
				width: 30%;
				margin-left: 13%;
				height: 40px;
				border: 0;
				font-size: 14pt;
				font-family:"微软雅黑";
				background-color: #FC5628;
				color: #ffffff;
				cursor: pointer;
				/*设置指针鼠标的样式*/
				border-radius: 20px;
				/*设置圆角样式*/
				border: 0;
			}
		</style>
	</head>

	<body left-margin="0" onload="changeImg()">
		<div class="main_bar">
            <!-- #1 action处可以填入想跳转的链接 -->
				<form action=" " onsubmit="return check()">
						<input type="text" id="vcode" placeholder="验证码" value="验证码" onfocus="this.value=''" onblur="if(this.value=='')this.value='验证码'" />
						<span id="code" title="看不清，换一张"></span>
						<div id="search_pass_link">
						</div>
						<input type="submit" id="submit" value="登录" class="btns" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'">
						<input type="reset"  value="重置" class="btns" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'">

				</form>
		</div>
	</body>


	<script type="text/javascript">

		var code; //声明一个变量用于存储生成的验证码
		document.getElementById("code").onclick = changeImg;
		function changeImg() {
			var arrays = new Array(
				'1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
				'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
				'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
				'u', 'v', 'w', 'x', 'y', 'z',
				'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
				'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
				'U', 'V', 'W', 'X', 'Y', 'Z'
			);
			code = ''; //重新初始化验证码
			//alert(arrays.length);
			//随机生成四位数验证码
			for(var i = 0; i < 4; i++) {
				//随机获取一个数组的下标
				var r = parseInt(Math.random() * arrays.length);
				code += arrays[r];
			}
			document.getElementById('code').innerHTML = code; 
            //将验证码写入右侧黑框中
		}


		//效验验证码(表单被提交时触发)
		function check() {

			//获取用户输入的验证码
            // ！
			var input_code = document.getElementById('vcode').value;


            // ！
			if(input_code.toLowerCase() == code.toLowerCase()) {
				//验证码正确(表单提交)
				return true;
			}
			alert("请输入正确的验证码!");
			//验证码不正确,表单不允许提交
            // #2 可以修改为跳转惩罚页面
			return false;
		}

        </script>
</html>


<!-- 符号说明 -->
<!-- （从上向下看的） -->
<!-- # 可以修改的地方 -->
<!-- ！自己功能实现的关键句子 -->

2.对代码功能适应修改

改动function check()代码：

function check() {
            var name = 'ludan';

			//获取用户输入的验证码
            // ！
			var input_code = document.getElementById('vcode').value;


            // ！
			// if(input_code.toLowerCase() == code.toLowerCase()) 
            if(input_code.toLowerCase() == name.toLowerCase()){
				//验证码正确(表单提交)
				return true;
			}
			alert("请输入正确的验证码!");
			//验证码不正确,表单不允许提交
            // #2 可以修改为跳转惩罚页面
			return false;

		}

        </script>

设置name = ludan,输入lud,出现提示，说明成功：

在这里插入图片描述

3.按照成功的逻辑写入register.php中

  1. 加入< form >后两个输入框粘连：改body中gap为inputBox中margin
  2. 加入value\placeholder\onfocus中valus这些骚操作后,特效挂在上面下不来，删除一些后好了：
<input type="text" required="required" id="vcode">

3.配置两个输入框判断+下面两个按钮
在这里插入图片描述
跳转成功：
在这里插入图片描述

可改进

  1. 加个前言的炫酷动画
  2. 可以做成轮播图背景
  3. 网页缩放不为100%时文本框错乱（先让朋友查看一下会不会这样）
    在这里插入图片描述

其他

css-普通盒子

  1. background同background-image
  2. css左右居中
//way1:
margin: 0 auto;
//way2:
background-position: center;
  1. 设置四角进行平铺 --此方法只适用于颜色盒子
.content{
                position:relative;
                top: 0;
                bottom:0;
                left: 0;
                right:0;
                /* background: url(5.jpg); */
                background-color:red;
            }
  1. display:flex弹性布局【待详解】
  2. margin表示元素的外边距
  3. top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。
  4. align-items属性 作用：设置同一行子元素在Y轴的对齐方式
  5. height: 100px;百分比是跟着父类元素的
  6. order 作用：排序
  7. flex-grow （分配剩余空间）

content类尝试，err

  1. border-style:solid;设置边框线
  2. 图片平铺父容器【待详解】
  3. 在*{}中加入margin:0;后图片垂直平铺了！
    在这里插入图片描述
    在这里插入图片描述
    但是中间的文本字体偏上了。。
    改进：
    在这里插入图片描述
    ok了~~~

input

  1. 【js】toLowerCase()方法用来返回一个字符串，该字符串中的字母被转换成小写字母，而且对非字母字符不会产生影响
  2. 【js】val变量。
  • JavaScript中，使用一个变量之前，先用var关键字声明它，变量如果没有赋值，则初始化值为undefined
  • var关键字声明的变量，无论实际声明的位置在何处，都会被视为声明在函数的顶部（如果声明不在任意函数内，则视为在全局作用域的顶部，也称变量提升）
 var a = 1;
  1. 【js】document.getElementById(" ") 得到的是一个对象
  2. 【js】onclick 事件会在元素被点击时发生。,就是帮我们实现点击某个元素想要执行某个操作的需求。
  3. 【js】parseInt获取一个数组的下标
  4. 【js】innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容
  5. 【js】onload：多时候我们要对页面中的某一个模块进行操作，这时候我们常常使用javascript代码来进行操作。为了能够保证操作的模块或对象在js代码之前就加载了，我们不得不把js代码放在页面的底端
  6. 【js】onsubmit方法：在点击按钮进行提交后,如果设置了onsubmit,则首先会调用到onsubmit中的方法,onsubmit的值为true则继续提交,为false则不提交,默认值为true,一定要配套return，不然true还是false都正常提交。
  7. 【js】onblur 事件会在对象失去焦点时发生。
    可以尝试一下下面的例子就明白了
<HTML> 
    <HEAD> 
    <TITLE>使用onBlur事件处理程序</TITLE> 
    </HEAD> 
    <BODY BGCOLOR="lavender"> 
    <FORM name="F1"> 
    <INPUT TYPE=text NAME=text1 value="1111ONBLUR_green" ONBLUR="(document.bgColor='green')"> 
    <INPUT TYPE=text NAME=text2 value="2222ONBLUR_black" ONBLUR="(document.bgColor='black')"> 
    <INPUT TYPE=text NAME=text2 value="3333ONBLUR_yellow" ONBLUR="(document.bgColor='yellow')"> 
    <br>
    <p>
    <INPUT TYPE=text NAME=text3 value="4444onfocus_blue" οnfοcus="(document.bgColor='blue')"> 
    <INPUT TYPE=text NAME=text4 value="5555onfocus_red" οnfοcus="(document.bgColor='red')">
    <INPUT TYPE=text NAME=text4 value="6666onfocus_orange" οnfοcus="(document.bgColor='orange')">
    </FORM> 
    </BODY> 
    </HTML>
  1. 【html】value\placeholder\onfocus中valus
<input type="text" id="vcode" placeholder="名字背景" value="name" onfocus="this.value=''" onblur="if(this.value=='')this.value='名字粗体'"

  1. 【js】onfous作用：聚焦时文本框内容值（去掉上面代码中的οnfοcus="this.value=‘’"对比查看效果）

  2. 【js】< script >和< script type=“text/javascript” >都正确

  3. 【html】onsubmit返回表单真值，若真进行action功能

  4. 【CSS】对id属性进行css样式修改，加#
    在这里插入图片描述

  5. 【CSS】gap和padding都是css中的样式，在bootstrap中的p-5和g-4指的分别是对padding设置和gap的设置
    只能用于body中

  6. 【CSS】cursor:pointer的作用
    cursor : 网页浏览时用户鼠标指针的样式或图形形状。
    属性值：
    default：默认光标（通常是一个箭头）
    auto：默认，浏览器设置的光标
    crosshair：光标为十字线
    pointer：光标为一只手
    move：光标为某对象可移动
    text：光标指示文本
    wait：光标指示程序正在忙（通常是一只表或者一个沙漏）

  7. 【CSS】去掉边框
    在这里插入图片描述

  8. 【HTML】按钮聚焦和非聚焦下颜色

//鼠标聚焦时按钮颜色
onmouseover="this.style.backgroundColor='#FF8D00'" 

//鼠标非聚焦时按钮颜色
onmouseout="this.style.backgroundColor='#FFFFFF'"

在这里插入图片描述

暂时成功样品

main.css

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;

}
body{
    position:relative;
    /* 渐变背景 */
    background:linear-gradient(to top left,#AFC4FF,#0EF3FF,#4A83FF);
    overflow:hidden;
    
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    flex-direction:column;
    /* gap:30px;  */
} 
.content{
    position: absolute;
    
    /* bottom: -6px; */
    width:100%;
    height:100%;
    
    background: url(images/register/5.jpg);
    background-repeat: no-repeat;
    background-position: center 0;
    /* margin:auto; */
    }
.lucency{
    position:relative;
    margin-top: 200px;
    width: 400px;
    height: 400px;
    margin-left: 600px;
    border-radius: 50%;
    background-color: rgba(200,400,400,0.5); 
    /* background-position: center; */
    /* margin:auto; */
}
.text{
    position: absolute;
    font-family:Microsoft YaHei UI Light;
    font-size:40px;
    top:40px;
    /* font-weight:bold; */
}



/* 进入输入框类 */
.inputBox{
    position:relative;
    width:300px;
    left:30px;
    top:30px;
    margin:30px;
}
.inputBox input{
    width:100%;
    padding:10px;
    border:1px soild rgba(255,255,255,0.25);
    /* background:#1d2b3a; */
    /* background:#46CCEE; */
    background:#85E6F8;
    border-radius:5px;
    /* 关闭聚焦 */
    outline:none;
    color:#fff;
    font-size:1em;
    /* margin:30px; */
}
.inputBox span{
    position: absolute;
    left:0;
    padding:10px;
    pointer-events:none;
    font-size:1em;
    /* color:rgba(255,255,255,0.25); */
    color:#fff;
    text-transform:uppercase;
    transition: 0.5s;
}
.inputBox input:valid~span,
.inputBox input:focus~span{
    color:#00dfc4;;
    transform: translateX(10px) translateY(-7px);
    font-size:0.65em;
    padding:0 10px;
    background: #fff;
    border-left:1px solid #00dfc4;
    border-right:1px solid #00dfc4;
    letter-spacing:0.2em;
}
.inputBox:nth-child(2) input:valid~span,
.inputBox:nth-child(2) input:focus~span{
    background:#00dfc4;
    color:#fff;
    border-radius:2px;
}
.inputBox input:valid,
.inputBox input:focus{
    border:1px solid #00dfc4;
}



.btns1{
    /* 以透明盒子为父类 */
    position:absolute;
    width: 100px;
    height: 40px;
    margin-left:80px;
    margin-top:20px;

    font-size: 14pt;
    font-family:"微软雅黑";
    background-color: #ffffff;
    color: #85E6F8;

    cursor: pointer;
    border-radius: 20px;
    border: 0;
}
.btns2{
    position:absolute;
    width: 100px;
    height: 40px;
    margin-left:230px;
    margin-top:20px;

    font-size: 14pt;
    font-family:"微软雅黑";
    background-color: #ffffff;
    color: #85E6F8;

    cursor: pointer;
    border-radius: 20px;
    border: 0;
}

register.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="content">
        <div class="lucency">
            <!-- 进入透明盒子lucency -->
            <p class="text">Happy  Brithday's  Day</p>
        </div>
    </div>



    <form action="reg_suc.html" οnsubmit=" return check()">
        <!-- 文本输入框 (尝试不嵌套位置书写) -->
        <div class="inputBox">
            <!-- 和fuction check()有关的参数: vcode -->
            <input type="text" required="required"
            id="vcode">
            <span>Your Name</span>
        </div>

        <div class="inputBox">
            <input type="text" required="required">
            <span>Your Wife's Name</span>
        </div>

        <input type="submit" id="submit" value="sign up" class="btns1" 
            onmouseover="this.style.backgroundColor='#FF8D00'" 
            onmouseout="this.style.backgroundColor='#FC5628'">
		<input type="reset"  value="reset" class="btns2" 
            onmouseover="this.style.backgroundColor='#FF8D00'" 
            onmouseout="this.style.backgroundColor='#FC5628'">
    </form>
    

</body>

<script>
        //效验输入(表单被提交时触发)
		function check() {
            var name = '刘丹琪';

			//获取用户输入的验证码
			var input_code = document.getElementById('vcode').value;


			// if(input_code.toLowerCase() == code.toLowerCase()) 
            if(input_code.toLowerCase() == name.toLowerCase()){
				//验证码正确(表单提交)
				return true;
			}
			alert("这不能输错吧呜呜呜呜呜");
			//验证码不正确,表单不允许提交
            // #2 可以修改为跳转惩罚页面
			return false;

		}
</script>
</html>

相关文章：

  • C++ Reference: Standard C++ Library reference: C Library: cmath
  • 康耐视InSight相机与西门子PLC关于Profinet通讯说明
  • JDK19新特性使用详解
  • 聊聊如何制作自定义ArcGIS Python工具箱
  • 数字图像处理-对比度调整背景相减
  • HTTP协议3）----对于网络层的详细讲解
  • [单片机框架][device层] charger 电源管理
  • [单片机框架][drivers层][bq25601] charger 电源管理
  • Java多线程--InheritableThreadLocal--使用/实例
  • java计算机毕业设计宿迁学院学生设计作品交流网站源代码+数据库+系统+lw文档
  • ByteTrack：通过关联每个检测框进行多对象跟踪
  • 新能源汽车行业资讯-2022-9-22
  • Ajax学习笔记（一）
  • 【【计算机组成原理】中央处理器（二）—— 指令执行过程
  • YOLOv5、v7改进之二十八：ICLR 2022涨点神器——即插即用的动态卷积ODConv
  • 【前端学习】-粗谈选择器
  • 11111111
  • canvas 绘制双线技巧
  • Consul Config 使用Git做版本控制的实现
  •  D - 粉碎叛乱F - 其他起义
  • Druid 在有赞的实践
  • Flex布局到底解决了什么问题
  • Git学习与使用心得（1）—— 初始化
  • js数组之filter
  • KMP算法及优化
  • MaxCompute访问TableStore(OTS) 数据
  • Promise初体验
  • Protobuf3语言指南
  • React-生命周期杂记
  • 从输入URL到页面加载发生了什么
  • 干货 | 以太坊Mist负责人教你建立无服务器应用
  • 高度不固定时垂直居中
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 关于List、List?、ListObject的区别
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 设计模式（12）迭代器模式（讲解+应用）
  • 探索 JS 中的模块化
  • 通过几道题目学习二叉搜索树
  • 以太坊客户端Geth命令参数详解
  • ​力扣解法汇总946-验证栈序列
  • #pragma 指令
  • ${ }的特别功能
  • （4）通过调用hadoop的java api实现本地文件上传到hadoop文件系统上
  • （Java实习生）每日10道面试题打卡——JavaWeb篇
  • （附源码）spring boot火车票售卖系统 毕业设计 211004
  • (附源码)计算机毕业设计SSM在线影视购票系统
  • （十八）SpringBoot之发送QQ邮件
  • .htaccess 强制https 单独排除某个目录
  • .NET Windows：删除文件夹后立即判断，有可能依然存在
  • .NET 服务 ServiceController
  • .net打印*三角形
  • @FeignClient 调用另一个服务的test环境，实际上却调用了另一个环境testone的接口，这其中牵扯到k8s容器外容器内的问题，注册到eureka上的是容器外的旧版本...
  • [ IOS ] iOS-控制器View的创建和生命周期
  • [52PJ] Java面向对象笔记（转自52 1510988116）
  • [⑧ADRV902x]: Digital Pre-Distortion (DPD)学习笔记