JS基础：页面定时弹出广告，表单校验

最新推荐文章于 2024-09-09 22:16:15 发布

何同学。

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量163

点赞数

分类专栏： HTML前端文章标签： html js

本文链接：https://blog.csdn.net/qq_45100706/article/details/105701343

版权

HTML前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1 定时器

setInterval：每隔多少毫秒去执行一次函数
setTimeout：多少毫秒以后去执行一次
clearInterval：清除间隔器
clearTimeout：清除定时器

2 页面定时弹出广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function init(){
				setTimeout("showAD()",3000)//定时器：3秒后执行该函数
			}
			function showAD(){
				var img=document.getElementById("img1");
				img.style.display="block";
				setTimeout("closeAD()",3000);
			}
			function closeAD(){
				var img=document.getElementById("img1");
				img.style.display="none";
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/image/4.jpg" style="display: none;" id="img1"/>
	</body>
</html>

表单验证

1 JS里面的常用事件

onfocus：获得焦点事件
onblur：失去焦点
onkeyup：按键抬起事件

2 表单校验示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <script>
	/*
	 * 1.确定事件：onfocus
	 * 2.事件要驱动函数
	 * 3.函数要干一些事情，修改span的内容
	 */
	function showTips(spanID, msg) {
		//首先要获得操作的span元素
		var span = document.getElementById(spanID);
		span.innerHTML = msg;
	}
	
	/*
	 * 校验用户名
	 * 1.确定onblur事件，失去焦点的事件
	 * 2.checkUsername()函数
	 * 3.在函数里面去校验，函数去显示校验结果
	 */
	function checkUsername() {
		//获取用户输入的内容
		var uValue = document.getElementById("username").value;
		//对输入的内容进行校验
		//获得要显示结果的span
		var span = document.getElementById("span_username");
		
		if (uValue.length < 6) {
			//显示校验结果
			span.innerHTML = "<font color='red' size='2'>对不起，太短</font>";
			return false;
		} else {
			span.innerHTML = "<font color='red' size='2'>恭喜您，可用</font>";
			return true;
		}
	}
	
	function checkPassword() {
		//获取密码输入
		var uPass = document.getElementById("password").value;
		var span = document.getElementById("span_password");
		//对密码输入进行校验
		if (uPass.length < 6) {
			span.innerHTML = "<font color='red' size='2'>对不起，太短</font>";
			return false;
		} else{
			span.innerHTML = "<font color='red' size='2'>恭喜您，够用</font>";
			return true;
		}
	}
	function checkRePassword() {
		//获取密码输入
		var uPass = document.getElementById("password").value;
		//获取确认密码输入
		var uRePass = document.getElementById("repassword").value;
		var span = document.getElementById("span_repassword");
		//对密码输入进行校验
		if (uPass != uRePass) {
			span.innerHTML = "<font color='red' size='2'>对不起，两次密码不一致</font>";
			return false;
		} else{
			span.innerHTML = "";
			return true;
		}
	}
	function checkMail() {
		var uMail = document.getElementById("email").value;
		var flag = checkEmail(uMail);
		var span = document.getElementById("span_email");
//		alert(123);
		//对邮箱进行校验
		if (flag) {
			span.innerHTML = "<font color='red' size='2'>恭喜您，可用</font>";
			return true;
		} else{
			span.innerHTML = "<font color='red' size='2'>对不起，邮箱格式貌似有问题</font>";
			return false;
		}
	}
	
	function checkForm() {
		var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
		return flag;
	}
</script>
        </head>
    <body>
        <form action="../index.html" onsubmit="return checkForm()">
	用户名：<input type="text" id="username" onfocus="showTips('span_username', '用户名长度不能小于6位！')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
	密码：<input type="password" id="password" onfocus="showTips('span_password', '密码长度不能小于6位！')" onblur="checkPassword()" onkeyup="checkPassword()" /><span id="span_password"></span><br />
	确认密码：<input type="password" id="repassword" onfocus="showTips('span_repassword', '两次密码必须一致！')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
	邮箱：<input type="text" id="email" onfocus="showTips('span_email', '邮箱格式必须正确！')" onblur="checkMail()" /><span id="span_email"></span><br />
	手机号：<input type="text" id="tel" /><br />
	<input type="submit" value="提交" />
</form>
    </body>
</html>