5、表单提交的拦截、this、注册验证、轮播图、定时弹广告

最新推荐文章于 2021-09-04 15:58:49 发布

天阳在线€

最新推荐文章于 2021-09-04 15:58:49 发布

阅读量175

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/yangbo_csdn/article/details/119615001

版权

Web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Web目录标题

1、表单提交的拦截
2、this
3、案例1：注册验证
4、案例2：轮播图
5、案例3：定时弹广告

1、表单提交的拦截

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交的拦截</title>
		<script>
		/*
			onsubmit: 适用标签 - form标签
					  return true - 可以提交
					  return false - 拦截提交
		*/
			function fun1() {
				var username = document.getElementById("username").value;
				if(username != null && username != '') {
					alert(true);
					return true;
				} else {
					alert(false);
					return false;
				}
			}
			window.onload = function() {
				document.getElementById("form1").onsubmit = function() {
					return false;
				}
			}

		</script>
	</head>
	<body>
		<form action="#" onsubmit="return fun1();" >
			<input type=text id=username name="username"/>
			<input type=submit value="提交"/>
		</form>
		<form id="form1" action="#" >
			<input type=text id=username name="username"/>
			<input type=submit value="提交"/>
		</form>
	</body>
</html>

在这里插入图片描述

2、this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>this</title>
		<script>
			console.log(this); // JS中this就表示window
			window.onload = function() {
				console.log(this);
				var arr = document.getElementsByClassName("cls1");
				for (var i = 0; i < arr.length; i ++) {
					arr[i].onclick = function() {
						// 获得点击的这个按钮对应的文本
						// this表示的是每一次循环出来的 arr[i] button
						console.log(this.innerText);
					}
				}
			}
			function fun1(obj) {
				// this - - window
				console.log(obj.innerText);
			}
		</script>
	</head>
	<body>
		<input type="text"/><br>
		<button onclick="fun1(this)" class="cls1">1</button>
		<button onclick="fun1(this)" class="cls1">2</button>
		<button onclick="fun1(this)" class="cls1">3</button>
		<button onclick="fun1(this)" class="cls1">4</button>
		<button onclick="fun1(this)" class="cls1">5</button>
		<button onclick="fun1(this)" class="cls1">6</button>
	</body>
</html>

在这里插入图片描述

3、案例1：注册验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册验证</title>
		<script>
			// 1.页面加载函数 onload
			window.onload = function() {
				// 获得用户名输入框 - DOM
				usernameInput = document.getElementById("username");
				// 添加失去焦点事件
				usernameInput.onblur = checkUsername;
				
				passwordInput = document.getElementById("password");
				passwordInput.onblur = checkPassword;
			}
			function checkUsername() {
				// 2.正则表达式
				var reg = /^[a-zA-Z]\w{5,17}$/;
				// 获得输入框中的文本内容
				var username = usernameInput.value;
				var spanMsg1 = document.getElementById("msg1");
				// 3.验证正则表达式和字符串
				// console.log(str.match(reg));
				if (!reg.test(username)){
					// 提示错误信息
					// 4.设置/获取  标签体的内容
					spanMsg1.innerHTML = "<font color='red'>格式错误</font>";
					// spanMsg1.innerText = "格式错误";
					return false;
				} else {
					spanMsg1.innerHTML = '';
					return true;
				}
			}
			function checkPassword() {
				var reg = /^.{6,16}$/;
				var password = passwordInput.value;
				var spanMsg2 = document.getElementById("msg2");
								
				if (!reg.test(password)){
					// 提示错误信息
					spanMsg2.innerHTML = "<font color='red'>格式错误</font>";
					return false;
				} else {
					spanMsg2.innerHTML = '';
					return true
				}
			}
			function check() {
				// 1.判断用户名
				// 2.判断密码
				// 3.判断确认密码
				return checkUsername() && checkPassword()
			}
		</script>
	</head>
	<body>
		<form onsubmit="return check();" action=# >
			<label for="username">用户名: </label>
			<input type="text" id="username" name="username"/>
			<span id="msg1" >  </span>
			<br>
			<label for="password">密码: </label>
			<input type="password" id="password" name="password"/>
			<span id="msg2" >  </span>
			<br>
			<input type="submit" value="注册"/>
		</form>
	</body>
</html>

在这里插入图片描述

4、案例2：轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<script>
			// timer 周期性任务
			onload = function() {
				startLunbo();
			}
			var imgArr = [ "../img/small01.jpg",
				"../img/small02.jpg",
				"../img/small03.jpg"];
			var i = 0;
			// 换图
			function lunbo() {
				var img = document.getElementById("img");
				img.src = imgArr[i++%3];
			}
			function stopLunbo() {
				clearInterval(intervalId);
			}
			function startLunbo() {
				// 1.开启周期性任务
				intervalId = setInterval("lunbo()", 3000);	
			}
		</script>
	</head>
	<body>
		<img id="img" src="../img/small01.jpg" 
		onmouseout="startLunbo()"
		onmouseover="stopLunbo()" />
	</body>
</html>

5、案例3：定时弹广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定时弹广告</title>
		<style type="text/css">
			/* div {
				border: 1px red solid;
			} */
			#header {
				height: 51px;
			}
			#header div {
				height: 100%;
				width: 33%;
				float: left;
			}
			
			#header div li {
				float: left;
				/* 设置列表符号 */
				list-style-type: none;
				margin-left: 20px;
			}
			a {
				text-decoration: none;
				color: #3286BB;
			}
			#nav {
				height: 50px;
				background-color: #222222;
				/* 圆角 */
				border-radius: 5px;
			}
			#nav ul {
				padding-left: 22px;
				padding-top: 12px;
				margin-top: 0px;
			}
			#nav li {
				/* float: left; */
				list-style-type: none;
				margin-right: 25px;
				/* 垂直方向居中, 只对行内元素有效 */
				vertical-align: middle;
				display: inline-block;
			}
			/* 首页字体变大 */
			#nav li:first-child {
				font-size: 19px;
			}
			#nav li a {
				color: #9D9D9D;
			}
			#img {
				height: 631px;
				margin-top: 20px;
			}
		</style>
		<script>
			onload = function() {
				// 一次性的定时器
				setTimeout("showAd()", 5000);
			}
			function showAd() {
				var ad = document.getElementById("ad");
				// 1.改变样式
				ad.style.display = "block";
				// background-color    style.backgroundColor
				setTimeout("hideAd()", 5000);
			}
			function hideAd() {
				var ad = document.getElementById("ad");
				// 改变样式
				ad.style.display = "none";
			}
		</script>
	</head>
	<body>
		<img id=ad src="../img/ad_1.jpg" width="100%" style="display: none;" />
		<!-- logo部分 -->
		<div id="header">
			<div><img src="../img/logo2.png"/></div>
			<div><img src="../img/header.png"/></div>
			<div>
				<ul>
					<li><a href="#">登录</a></li>
					<li><a href="#">注册</a></li>
					<li><a href="#">购物车</a></li>
				</ul>
			</div>
		</div>
		<!-- 导航栏部分 -->
		<div id="nav">
			<ul>
				<li><a href=#>首页</a></li>
				<li><a href=#>手机电脑</a></li>
				<li><a href=#>皮鞋箱包</a></li>
				<li><a href=#>母婴用品</a></li>
				<li><a href=#>美妆护肤</a></li>
			</ul>
		</div>
		<!-- 轮播图部分 -->
		<div id="img">
			<img src="../img/1.jpg" width="100%"/>
		</div>
	</body>
</html>

在这里插入图片描述

天阳在线€

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5、表单提交的拦截、this、注册验证、轮播图、定时弹广告

Web目录标题1、表单提交的拦截1、表单提交的拦截表单提交的拦截 ![在这里插入图片描述](https://img-blog.csdnimg.cn/fb08311bb7014f268486349ec3514370.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdib19DU0RO,size_16,color_FF
复制链接

扫一扫