Js中定时器

js定时器:

1.倒计时定时器:
					setTimeout:(函数体,间隔时间(毫秒为单位)). 经常写在函体内;
2.循环定时器:
					setInterval:(函数体,间隔时间),常写在函数体外;

倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。

3.清除定时器
			clearTimeout(对象)清除已设置的setTimeout对象
			clearInterval(对象) 清除已设置的setInterval对象
4.定时器案例:

(1)打字机案例:

	<!--分析:
		1.创建页面结构
		2. 加载页面元素  body中 onload:函数体 ;
		3.创建数组存储数据 ,定义x(数组索引)
		4.获取页面元素(div);
		5.将数组中的数据添加到div中 innHTML=arr[a];这样添加数据,将原数据掩盖  //+将数据累计在一起   
		6.通过索引循环添加数据 
		7.添加定时器间隔多少秒添加一个数据 (setTimeout)
		8.判断索引值舒服大于数组的长度, 清除定时器,添加循环定时器的闪(setInterval)
		9.获取span
		10.判断|是否显示 display:block, 隐藏display:none,添加循环定时器 (setIndterval)-->
		<script type="text/javascript">
			//3
			var x=0;
			var arr=['我','曾','一','直','寻','找','自','我',',','而','我','竟','在','不','知','不','觉','中','迷','失','自','我','!'];
			function load(){
				//4
				div_01=document.getElementById('div1');
				//5
				div_01.innerHTML+=arr[x];
				//6
				x++;
				//7
				var time=setTimeout('load()',200)
				if(x>=arr.length){
					clearTimeout(time);
					setInterval(shan,200);
				}
				function shan(){
					var shan1=document.getElementById('span1');
					//9
					console.log(shan1)
					//10
					if(shan1.style.display=='block'){
						shan1.style.display='none';
					}else{
						shan1.style.display='block';
					}
				}
				//10
				//setInterval('shan()',200)
			}
		</script>
	</head>
			<!--2-->
	<body onload="load()">
		<!--1-->
		<div id="div1" style="float: left; font-family: 阿美简体;">	
		</div>
		<span id="span1">
		<label style="color: red; font-size: 15px; font-family: 阿美简体;">|</label>
		</span>
	</body>

(2)提交倒计时:

<!--1.创建页面结构
		2.获取页面按钮
		3.给按钮添加点击事件
		4.给事件设置处理程序函数(调用函数)
		5.函数体内设置倒计时的定时器 setTimeout-->
		<button id="btn" onclick="test()">获取验证码</button>
		<script type="text/javascript">
				var num=5;
				function test(){
					num--;
					btn.innerHTML=num+'s后获取';	                                                                             		
					var time=setTimeout('test()',1000);
					if (num<=0) {
						clearTimeout(time);
						btn.innerHTML='获取验证码';
						num=5;
					}
				}
		</script>
	</body>
知识点补充:

1.表单提交数据中 :
get提交数据:会将用户的数据显示在url地址栏中,不安全,并且提交的数据量小,不能超过255个字符;
post提交数据:不会将用户的数据显示url地址栏中,安全性高,并且提交的数据量大;
2.CSS样式:
borderRadius:圆角边框
boxShadow:(水平偏移量,处长偏移量,模糊程度,模糊颜色)向框添加一个或多个阴影
opacity:(0-1)设置元素的不透明级别 ; 从 0.0 (完全透明)到 1.0(完全不透明)
3.绑定事件调用有名函数;

<script type="text/javascript">
			var btn_0=document.getElementsByClassName('btn0')[0];
			btn_0.onclick=eee;
			function eee(){
				alert('这是通过绑定事件调用有名函数')
			}
		</script>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页