Web前端~~~~javaScrip(2)

1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作,  弹框, 修改页面内容,动态去添加一些东西

知识点储备

定时器

setinterval:每隔多少毫秒执行一次函数

setTimeout:多少毫秒后执行一次函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定时器</title>
		<script>
			function test(){
				console.log("setinterval被调用了");
			}
			var timeID;
			function startDin(){
				//timeID=setInterval("test()",3000);
				timeID=setTimeout("test()",3000);
			
			}
			function StopDin(){
				//clearInterval(timeID);
				clearTimeout(timeID);
			}
		</script>
	</head>
	<body>
		<input type="button" value="开启定时器" onclick="startDin()" /><br />
		<input type="button" value="关闭定时器" onclick="StopDin()" />
	</body>
</html>

效果图

点击开定时器后,设置3秒后条用函数,在截图之前这个函数被执行了13次。

 点击定时器后,等了很久还是只调用了一次函数,说明该属性只能执行一次就结束。

 切换图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>切换图片</title>
		<script>
			function changeimg(){
			var img	=document.getElementById("img1")
			img.src="img/10.jpg";
			}
		</script>
	</head>
	<body>
		<input type="button" value="切换图片" onclick="changeimg()"  /><br />
		<img src="img/美女.jpg" id="img1"/>
	</body>
</html>

效果图

没有点切换图片前的网页如下所示

 点击切换图片按钮后如下图所示

案例一:使用JS完成图片的轮播效果

步骤分析:

1、当前页面加载了一个图片后,每隔多少秒后就自动切换到另外一个图片,故这次需要采用setinterval

2、如何动态改变图片,就动态改变图片的地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<script>
			var index=1;
			function changead(){
			 var img=document.getElementById("imgad");
			 img.src="img/"+(index%3+1)+".jpg"
			 index++;
			}
			function init(){
				//启动定时器
				setInterval("changead()",3000);
			}
		</script>
	</head>
	<body onload="init()">
		 <img src="img/1.jpg" id="imgad"/>
	</body>
</html>

 知识储备

图片的显示和隐藏(点击显示按钮图片就显示出来,点击隐藏按钮图片就隐藏着了)

  • 显示广告 img.style.display = "block"

  • 隐藏广告 img.style.display = "none"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片的显示和隐藏</title>
		<script>
			function showimg(){
			var imgh=document.getElementById("imgh");
			imgh.style.display="block"
			}
			function hideimg(){
				var imgh=document.getElementById("imgh");
			    imgh.style.display="none"
			}
		</script>
	</head>
	<body>
		<input  type="button" value="显示" onclick="showimg()" />
		<input  type="button" value="隐藏" onclick="hideimg()" /><br />
		<img src="img/1-161104143944.gif" id="imgh"/>
	</body>
</html>

案例二:定时弹出广告

需求分析:开始进入网页后,在某个时间突然弹出广告(图)

  1. 确定事件: 页面加载完成的事件 onload

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

  3. init函数里面做一件事:

    1. 启动一个定时器 : setTimeout()

    2. 显示一个广告

      1. 再去开启一个定时5秒钟之后,关闭广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹出广告</title>
		<script>
			function init(){
				setTimeout("showimg()",3000);
				console.log("hhh");
			}
			function showimg(){
			 var img1 =document.getElementById("img1");
			 img1.style.display="block";
			 setTimeout("stopimg()",5000);
			}
			function stopimg(){
			 var img1 =document.getElementById("img1");
			 img1.style.display="none";	
			}
		</script>
	</head>
	<body onload="init()">
		<img src="img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%"  id="img1" style="display: none;"/>
	</body>
</html>

知识储备

【HTML中innerHTML属性】

【JS中的常用事件】

onfocus 事件: 获得焦点事件

onblur : 失去焦点

onkeyup : 按键抬起事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单校验</title>
		<script>
			function showtips(spanID,msg){
			 var span1=document.getElementById(spanID);
			 span1.innerHTML=msg;
			}
			function checkusername(){
			 var uVaule=document.getElementById("uname").value;
			 //console.log(uVaule);
			 var span2=document.getElementById("user_name");
			 
			 if(uVaule.length<6){
			 	span2.innerHTML="用户名小于6位,请重新输入";
			 	return false;
			 }else{
			 	span2.innerHTML="用户名输入正确!";
			 	return true;
			 }
			}
		function checkForm(){
			var flag = checkusername();
			return flag;
		}
		</script>
	</head>
	<body>
		<form action="轮播图.html" onsubmit="return checkForm()">
		用户名:<input id="uname" type="text" onblur="checkusername()"  onfocus="showtips('user_name','用户名长度不能小于6位')" /><span id="user_name"></span><br />
		<input type="submit" value="注册" />
		</form>
	</body>
</html>

案例三:表单校验

       需求分析:每当用户输入出错的时候,我们是弹出了一个对话框,提示用户去修改。这样的用户体验效果非常不好。我们今天就是需要来对他进行一个修改,当用户输入信息有问题的时候,我们就再输入框的后面给他一个友好提示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单的表单校验</title>
		<script type="text/javascript" src="../js/regutils.js" ></script>
		<script>
			
			function showtips(spanID,msg){
			 var span1=document.getElementById(spanID);
			 span1.innerHTML=msg;
			}
			//验证用户名
			function checkusername(){
			 var uVaule=document.getElementById("uname").value;
			 //console.log(uVaule);
			 var span2=document.getElementById("user_name");
			 
			 if(uVaule.length<6){
			 	span2.innerHTML="<font color='red' size='2'>对不起,太短</font>";
			 	return false;
			 }else{
			 	span2.innerHTML="<font color='red' size='2'>恭喜您,可用</font>";
			 	return true;
			 }
			}
			//验证密码
			function checkpassword(){
				 var upassword=document.getElementById("upassword").value;
				 var span3=document.getElementById("user_password");
				 
				 if(upassword.length<6){
				 	span3.innerHTML="<font color='red' size='2'>对不起,太短</font>";
				 	return false;
				 }else{
				 	span3.innerHTML="<font color='red' size='2'>恭喜您,够用</font>";
				 	return true;
				 }
				}
			//验证确认密码
			function checkurepassword(){
				 var upassword=document.getElementById("upassword").value;
				 var urepassword=document.getElementById("urepassword").value;
				 var span4=document.getElementById("user_urepassword");
				 //对密码长度进行验证
				 if(upassword!=urepassword){
				  span4.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
					return false;
				 }else{
				 	span4.innerHTML = "<font color='red' size='2'>恭喜您,两次密码一致</font>";
					return true;
				 }
				
			}	
			//验证邮箱
			function checkEmail2(){
				var umail = document.getElementById("uemail").value;
				var flag = checkEmail(umail);
				var span = document.getElementById("user_email");
				//对邮箱输入进行校验
				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=checkEmail()&&checkurepassword()&&checkpassword()&&checkusername();
			}
			
		</script>
	</head>
	<body>
		<form action="轮播图.html" onsubmit="return checkForm()">
		用户名:<input id="uname" type="text" onblur="checkusername()"  onfocus="showtips('user_name','用户名长度不能小于6位')" /><span id="user_name"></span><br />
		密码:<input id="upassword" type="password" onblur="checkpassword()"  onfocus="showtips('user_password','密码长度不能小于6位')" /><span id="user_password"></span><br />
		确认密码:<input id="urepassword" type="password" onblur="checkurepassword()"  onfocus="showtips('user_urepassword','两次密码必须一致')" /><span id="user_urepassword"></span><br />
		邮箱:<input id="uemail" type="text" onblur="checkEmail2()"  onfocus="showtips('user_email','邮箱格式必须正确')" /><span id="user_email"></span><br />
		手机号:<input type="text" id="text" /><br />
		<input type="submit" value="注册" />
		</form>
	</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值