Web前端~~~~javaScrip（2）

于 2021-07-23 12:01:55 发布
阅读量509 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46098676/article/details/119023124
版权

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
    评论
专栏目录
setTimeout延迟执行不同结构的作用效果
SThranduil的博客
07-18 730
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 提示： 1000 毫秒= 1 秒。 提示： 如果你只想重复执行可以使用 setInterval() 方法。 提示： 使用 clearTimeout() 方法来阻止函数的执行。 语法 1. setTimeout(code, milliseconds, param1, param2, ...) 2. setT...
2023-02-17 java中Socket设置连接超时和读超时时间（clientSocket.setSoTimeout(5000)）。
最新发布
海月汐辰
02-17 2593
【代码】2023-02-17 java中Socket设置连接超时和读超时时间（clientSocket.setSoTimeout(5000)）。
jquery的定时器setTimeout()与定时循环执行器setInterval()的区别
在工作中记录下美好的瞬间~~
05-07 1250
一、定时循环执行器setInterval("getLoc()",5000);或者setInterval(getLoc,5000);的书写格式都是正确的。这个方法是每过5秒就会执行getLoc()方法，从而调用ajax去后台访问数据。二、定时器setTimeout("getLoc",5000);或者setTimeout(getLoc,5000);的书写格式都是正确的。如果把上面的setInterva...
web前端之javascript——定时器
weixin_46820017的博客
06-21 3372
##一、 定时器的常见方法 setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行） setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次） 备注：在实际开发中，二者是可以根据需要，互相替代的。 setInterval() 的使用 setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行） 参数： 参数1：回调函数，该函数会每隔一段时间被调用一次。 参数2：每次调用的间隔时间，单位是毫秒。 返回值：
setTimeout和setInterval的各种写法
闲谈
06-20 219
            //setTimeout("doTimeout()" , 5000);   正确，5秒后执行             //setTimeout(doTimeout() , 5000);     错误，会立即执行             //setTimeout(function() {             正确，5秒后执行             //    do...
setTimeout()使用
weixin_34402090的博客
11-14 243
Basic setTimeout() Example setTimeout(function() {       // Do something after 5 seconds }, 5000); Tip: you can use the ClearTimeout() function to clear any timer values previously stored. ...
Web前端JavaScript面向对象编程
09-27
这个笔记是我在B站根据Mosh的JavaScript面向对象编程教学视频中学习并记录的，里面有我记录的知识点，自己写的代码，还有小部分的截图。大家可以在学习这个内容的时候看一下我的笔记进行参考一下。 视频链接：...
Web前端JavaScript基础学习笔记
07-25
这个学习笔记是我基于B站视频Mosh的JavaScript基础篇学习记录的一些笔记和代码。 内容不多，也就作为一个大家学习的参考。 免费的笔记，如果你喜欢，请和大家分享这个资源，谢谢。 视频链接：...
web前端——JavaScript基础
03-06
思维导图式笔记， 笔记来源https://blog.csdn.net/qq_38490457/article/details/109257751
Web前端 JavaScript 基础教程
10-20
Web前端 JavaScript 基础教程
JavaScript&jQuery;交互式Web前端开发 2
04-04
交互式Web前端开发》欢迎选择一种更高效的学习JavaScript和jQuery的方式。你是一名JavaScript新手?或是您曾经向自己的Web页面上添加过一些脚本，但想以一种更好的方式来实现它们？本书非常适合您。《JavaScript&...
js 中的SetTimeOut()
u010450065的专栏
10-31 3954
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method setTimeout setTimeout 语法例子 用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTi
html5 settimeout,计时器setTimeout()
weixin_33289873的博客
06-20 1860
setTimeout(代码,延迟时间);参数说明：1. 要调用的函数或要执行的代码串。2. 延时时间：在执行代码前需等待的时间，以毫秒为单位(1s=1000ms)。当我们打开网页3秒后，在弹出一个提示框，代码如下:setTimeout("alert('Hello!')", 3000 );当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。function tinfo...
解决 js setTimeout 传递带参数的函数无效果
热门推荐
dns007
07-28 1万+
最近 js  用到 setTimeout 递归调用 刷新进度 setTimeout （"getProgress（name,type)", 3000) 发现getProgress函数 带上参数 就失效了，不带参数可以调用又达不到效果 解决办法：匿名函数包装  改成如下即可 setTimeout(function(){getProgress(name, type)}, 3000);
Javascript中setTimeout()的用法详解
date25000的博客
06-20 325
1、SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeout()语法例子 1.4 设定条件使SetTimeout()停止 1.5 计分及秒的counter 2、ClearTimeout() 3、Set Flag 1...
关于JS中的setTimeout()
budapest的专栏
10-05 4093
1、setTimeout()基础 setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。 var timerId = setTimeout(func|code, delay) 上面代码中，setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是...
setTimeout()方法
xs199562qq的博客
05-05 1591
定义和用法 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 setTimeout(function(){alert("Hello");},5000)；//5秒后alert出Hello 提示： 1000 毫秒= 1 秒。 提示： 使用 clearTimeout() 方法来阻止函数的执行。 var myVue myVue = setTimeout(function(){ale...
爬虫案例：手把手教你爬取图片
一行玩python
11-05 9667
大家好，我是一行今天是小白菜同学的投稿，老规矩一个赞10积分一、确认目标和思路：写在最前面：程序很简单，重要的是思路以及对错误的分析1.确认目标和大体思路： 今天我们需要爬取的网站是：h...
02-Web前端知识 day03-javaScript
haih的博客
02-19 231
今日任务 使用JS完成页面定时弹出广告 使用JS完成表单的校验 使用JS完成表格的隔行换色 使用JS完成复选框的全选效果 使用JS完成省市的联动效果 JS控制下拉列表左右选择 教学导航 掌握JS中的BOM对象 掌握JS中的常用事件 掌握JS中的常用DOM操作 了解JS中的内置对象 上一次内容进行复习: CSS: 层叠样式表 主要作用: 美化页面, 将美化和HTML进行分离,提高代码复用性 选择...
baidu web前端笔试面试题目.doc
07-04
"本文档包含了百度公司的Web前端笔试面试题目，涵盖了Web前端开发的重要知识点，包括UI设计、HTML/CSS、JavaScript、多媒体处理、服务端通信以及开发工具的使用。" 在当前的互联网环境中，Web前端开发扮演着至关...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值