JS作业-表单提交和随机点名器_提交作业后名字点亮-CSDN博客

本文链接：https://blog.csdn.net/weixin_39510813/article/details/122032088

JS作业

文章目录

一. 作业1

描述：

之前的任务中我们已经完成了程序创新大会报名表表单的制作和美化。用户使用的时候如果输入的数据不合法或者干脆没有输入数据也可以直接注册，这样就给我们的服务器端造成了很大的压力，而且对用户也不够友好哦！因为用户可能是误操作了，所以，为了降低服务器的压力，提升用户的友好度，接下来我们就通过学习 JavaScript 技术来实现客户端用户输入数据的验证吧！

要求：

请自行定义表单项中的数据格式并进行验证。大家一定要从实际出发哦，你的页面未来要上线的话怎么样才能让用户使用更放心和便捷呢？此时要站在用户的角度考虑、分析问题并解决问题。

难点：

1、元素事件的选择，例如失去焦点事件、表单提交事件等

2、正则表达式的使用

1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>程序创新大会报名</title>
		<link rel="stylesheet" href="css/topic1.css"/>
		<script>
			function checkUserName() {
				var name = document.getElementById("userName").value;
				var msg = document.getElementById("nameMsg");
				if(name==null || name=="") {
					msg.innerHTML="用户名不能为空";
					msg.style.color="red";
					return false;
				} else if(name.length < 2) {
					msg.innerHTML="用户名长度必须大于2！";
					msg.style.color="red";
					return false;
				} else {
					msg.innerHTML="✅";
					msg.style.color="green";
					return true;
				}
			}

			/*校验手机号*/
			function isPhoneNum(str) {
				//如果你要精确验证手机号码，那个你可以使用第一个正则。这是根据电信，移动，联通目前发行的号码来的。验证比较精确。
				var reg = /^1[3|4|5|7|8][0-9]{9}$/;
				// 如果因为现有的号码不能满足市场需求，电信服务商会增大号码范围。所以一般情况下我们只要验证手机号码为11位，且以1开头。
				var reg = /^^1[0-9]{10}$$/;
				return reg.test(str);
			}
			function checkNumer() {
				var number = document.getElementById("number").value;
				var numberMsg = document.getElementById("numberMsg");
				if (number == "" || number == null) {
					numberMsg.innerHTML="电话不能为空";
					numberMsg.style.color="red";
					return false; 
				} else if (!isPhoneNum(number)) {
					numberMsg.innerHTML="电话不合法";
					numberMsg.style.color="red";
					return false;
				} else {
					numberMsg.innerHTML="✅";
					numberMsg.style.color="green";
					return true;
				}
			}

			/*校验邮件地址是否合法 */
			function IsEmail(str) {
				var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
				return reg.test(str);
			}
			function checkEmail() {
				var email = document.getElementById("email").value;
				var emailMsg = document.getElementById("emailMsg");
				if (email == "" || email == null) {
					emailMsg.innerHTML="邮箱不能为空";
					emailMsg.style.color="red";
					return false;
				} else if (!IsEmail(email)) {
					emailMsg.innerHTML="邮箱不合法";
					emailMsg.style.color="red";
					return false;
				} else {
					emailMsg.innerHTML="✅";
					emailMsg.style.color="green";
					return true;
				}
			}
			
			function checkCollege() {
				var colleg = document.getElementById("college").value;
				var collegeMsg = document.getElementById("collegeMsg");
				if (sex == "" || sex == null) {
					collegeMsg.innerHTML="院校不能为空";
					collegeMsg.style.color="red";
					return false;
				} else {
					collegeMsg.innerHTML="✅";
					collegeMsg.style.color="green";
					return true;
				}
			}
			
			function checkMajor() {
				var major = document.getElementById("major").value;
				var majorMsg = document.getElementById("majorMsg");
				if (major == "" || major == null) {
					majorMsg.innerHTML="专业不能为空";
					majorMsg.style.color="red";
					return false;
				} else {
					majorMsg.innerHTML="✅";
					majorMsg.style.color="green";
					return true;
				}
			}
			
			function register() {
				return checkUserName() && checkNumer() && checkEmail() && checkCollege() && checkMajor();
			}
		</script>
	</head>
	<body>
		<div class="top_div">
			<h1>程序创新大会报名</h1>
		</div>
		<form action="dest.html" method="get" enctype="multipart/form-data"  onsubmit="return register()">
			<!-- 姓名、来自的院校、专业、联系电话、邮箱 、看到本活动的位置-->
			<input type="hidden" name="userId" value="1001"/><br />
			*用户名:<input type="text" id="userName" name="userName" placeholder="请输入用户名"
onblur="checkUserName()"/>
			<span id="nameMsg"></span><br /><br />
			性别：<input type="radio" id="sex" name="sex" value="男"/>
			<span id ></span>
			<input type="radio" id="sex" name="sex" value="女"/>
			<br /><br />
			*电话：<input type="tel" id="number" name="number" placeholder="请输入手机号"
onblur="checkNumer()"/>
			<span id="numberMsg"></span><br /><br />
			*邮箱：<input type="email" id="email" name="email" placeholder="请输入邮箱"
onblur="checkEmail()"/>
			<span id="emailMsg"></span><br /><br />
			*院校：<select id="college"/>
				<option value="1">计院</option>
				<option value="2">管院</option>
				<option value="3">外院</option>
				<option value="4">生化</option>
				<option value="5">环材</option>
				<option value="6">土木</option>
				<option value="7">法院</option>
				</select>
			<span id="collegeMsg"></span><br /><br />
			*专业：<input type="text" id="major" name="major" placeholder="请输入专业"
onblur="checkMajor()"/>
			<span id="majorMsg"></span><br /><br />
			看到本活动的位置：<select name="pos">
				<option value="1">食堂</option>
				<option value="2">教学楼</option>
				<option value="3">宿舍</option>
				<option value="4">小树林</option>
			</select><br />
			宣传照片：<input type="file" name="personImage"/><br />
			<input type="submit" value="注册"/>
			<input type="reset" value="重置(不要乱点)"/>
		</form>
	</body>
</html>

2. 结果展示

在这里插入图片描述

二、作业2

为了活跃班级气氛，Mr.王想通过一个随机点名器来随机抽取学员回答问题，故安排你来使用 HTML+CSS+JavaScript 来实现如下图所示的随机点名器，第一张图是随机点名器的初始页面，当点击开始按钮时，JS 程序中提前准备好人员（数组）名单会随机变换跳动显示，开始按钮变成了停止按钮，如第二张图显示，当点击停止按钮时，名字的随机变换跳动停止，显示出的名字即为随机点击出来的姓名，如第三张图所示。

在这里插入图片描述

目标：

掌握 JavaScript 中的数组、循环、随机数和定时器等技术的使用

任务过程描述：

1、使用 HTML+CSS 布局出如上图所示的随机点名器页面。

2、嵌入 JS 代码，定义要随机姓名数组变量，并初始化姓名信息。

3、为开始按钮添加点击事件，并编写定时器程序，随机显示姓名信息。

4、编写停止按钮事件处理程序，终止定时程序并显示随机出来的姓名信息，最后完成输出。

可能遇到问题：1、随机姓名信息的抽取 2、定时器函数的的使用 3、开始与停止的切换操作

1. 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>随机点名器</title>
    <style type="text/css">
        #parent {
            background-color: orangered;
            height: 500px;
            border-radius: 10px;
            width: 700px;
            margin: 100px auto;
            position: relative;
        }
        
        #box {
            margin: auto;
            width: 400px;
            font-size: 66px;
            border: 1px solid black;
            font-weight: bold;
            height: 94px;
            border-radius: 20px;
            text-align: center;
            background-color: antiquewhite;
            position: absolute;
            margin-top: 100px;
            margin-left: 140px;
        }
        
        #bt {
            margin: auto;
            border-radius: 10px;
            background-color: green;
            width: 200px;
            text-align: center;
            margin-top: 300px;
            margin-left: 240px;
            color: #070000;
            font-weight: bold;
            font-size: 25px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        var namelist = ["赵一", "钱二", "孙三", "李四", "周五", "吴六"];
        var mytime = null;

        function doit() {
            var bt = window.document.getElementById("bt");
            if (mytime == null) {
                bt.style.backgroundColor = "red";
                bt.innerHTML = "停止";
                show();
            } else {
                bt.style.backgroundColor = "green";
                bt.innerHTML = "开始";
                clearTimeout(mytime);
                mytime = null;
            }
        }

        function show() {
            var box = window.document.getElementById("box");
            var num = Math.floor((Math.random() * 100000)) % namelist.length;
            box.innerHTML = namelist[num];
            mytime = setTimeout("show()", 10);
        }
    </script>
</head>

<body>
    <div id="parent">
        <div id="box">随机点名器</div>
        <button id="bt" onclick="doit()">开始</button>
    </div>
</body>

</html>