Js初识——几个小案例

最新推荐文章于 2022-08-09 20:42:26 发布

zsn@zsn

最新推荐文章于 2022-08-09 20:42:26 发布

阅读量223

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/weixin_44380128/article/details/86503080

版权

Web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文是通过几个小案例来学习使用一下Js

案例1.图片自动播放

需求：有一组图片，每隔3秒钟就切换一张，一直不停的切换

学习内容：用Js如何实现图片的切换、如何按照一定的周期做一件事

步骤分析：a.确定事件：onload 页面文档加载完成的事件

b.事件触发的函数：init()

c.函数里实现：开启定时器，执行切换图片的函数changeImage()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function init(){
				/* 开启一个定时器 */
				setInterval("changeImage()",2000);
			}
			var index = 1;
			function changeImage(){
				var image = document.getElementById("images");
				
				var currentIndex = index%3+1;
				image.src = "../img/"+currentIndex+".jpg";
				
				index = index + 1;
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg" id="images"/>
	</body>
</html>

其中setInterval()函数是每隔多长事件执行一次函数，该函数会返回定时器的id，当需要取消定时器时可以通过clearInterval（id）函数取消。

图片的切换是通过给image对象的src属性重新赋值实现的。

案例2.定时弹出广告

需求：打开网页3秒钟之后，显示一个广告，再过5秒钟之后广告消失

学习内容：如何实现图片的消失和显示、怎么定时做一件事

步骤分析：a.确定事件: 页面加载完成的事件 onload

b.事件要触发函数: init()

c.init函数中实现:启动一个定时器setTimeout(),显示一个广告

在去开启一个定时器，在5秒钟之后关闭广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function init(){
				/* 启动一个定时器，定时3秒后显示一个广告 */
				setTimeout("showAd()",3000);
			}
			
			function showAd(){
				var image = document.getElementById("image");
				image.style.display = "block";
				/* 在启动一个定时器，5秒以后关闭广告 */
				setTimeout("hideAd()",5000);
			}
			
			function hideAd(){
				var image = document.getElementById("image");
				image.style.display = "none";
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg" style="display: none;" id="image"/>
	</body>
</html>

这里用setTimeout()函数实现定时操作，其功能是在多少毫秒之后执行一次函数。和setInterval()函数类似，setTimeout()函数也会返回一个定时器的id,同样也可以使用clearTimeout(id)函数取消定时。

显示图片：image.style.display = "block"或“”；

隐藏图片：image.style.display = "none"。

案例3.表单校验

需求：不要在用户点击提交按钮之后才校验用户填写的信息，而是在用户填写信息的同时,就对信息进行校验，并给用户用友好的提示。

学习内容：js中常用的事件

onfocus事件：获得焦点事件

onblur事件：失去焦点事件

onkeyup事件：按键抬起的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部的js文件 -->
		<script type="text/javascript" src="../js/regutils.js"></script>
		<script>
			function showTips(spanId,tips){
				var span = document.getElementById(spanId);
				span.innerHTML = tips;
			}
			function checkText(){
				var username = document.getElementById("username");
				var span_username = document.getElementById("span_username");				
				var uValue = username.value;
				if(uValue.length <= 6){
					span_username.innerHTML = "<font color = 'red' size = 2>用户名太短</font>";
				}else{
					span_username.innerHTML = "<font color = 'blue' size = 2>用户名可用</font>";
				}				
			}
			/* 校验邮箱 */
			function checkMail(){
				var uEmail = document.getElementById("email").value;
				var flag = checkEmail(uEmail);
				var spanEmail = document.getElementById("span_email");
				if(flag){
					spanEmail.innerHTML="<font color = 'red' size = 2>邮箱正确</font>";
				}else{
					spanEmail.innerHTML="<font color = 'red' size = 2>邮箱错误</font>";
				}
			}
		</script>
	</head>
	<body>
		用户名：<input type="text" id="username" onfocus="showTips('span_username','用户名不能少于6个字符')" onblur="checkText()" onkeyup="checkText()"/><span id="span_username"></span><br /><br />
		密  码：<input type="passwor" id="password"/><span id="span_password"></span><br /><br />
		邮  箱：<input type="email" id="email" onfocus="showTips('span_email','邮箱格式要正确')" onblur="checkMail()" onkeyup="checkMail()"/><span id="span_email"></span><br /><br />
		手机号：<input type="text" id="tel"/><span id="span_text"></span><br /><br />
		<input type="submit" value="提交"/>
	</body>
</html>

引入其他文件的方法：<script type="text/javascript" src="../js/regutils.js"></script>

type:引入文件的类型，src:引入文件的路径