js事件获取验证码+ 打字机案例

最新推荐文章于 2022-05-04 22:16:33 发布

搁°浅

最新推荐文章于 2022-05-04 22:16:33 发布

阅读量200

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/JGD313/article/details/97810642

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

计时器(js)
炸弹定时器 : setTimeout setTimeout{函数 +时间} clearTimeout()清除定时器

循环定时器 : setInterval {函数,时间 } clearInterval()清除循环器
获取验证码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		var i = 5;
		function an(){
			//获取验证码所以递减
			i--;
			//获取按钮
			var time = setTimeout('an()',500);
			btn.innerHTML=i+'s获取验证码';
			if( i<=0){
				clearTimeout(time);
				btn.innerHTML='获取验证码';
				i=5;
			}
		}	
		</script>
	</head>
	<body>
		      <button id = "btn" onclick="an()">获取验证码</button>
	</body>
</html>
制作打字机效果:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		var i = 0;
		function load(){
			var zm = ['杨','杰','你','好','帅','花','儿','都','没','你','好','看']
			//console.log(zm);
			//字跟着第一个依次出来
			div1.innerHTML+=zm[i];
			i++;
			var time =setTimeout('load()',500)
			if(i>=zm.length){
				clearTimeout(time);
				setInterval(te,300);
			}
			function te(){
				if(sp.style.display=='block'){
					sp.style.display='none';
				}
				else{
					sp.style.display='block';
				}
			}
		}
		</script>
	</head>
	<body onload="load()">
	</body>
	<div id="div1" style="float:left;font-size: 20px; font-size: 50px;  font-family: '宋体' ;" >   </div>
	<span id="sp" style="color: greenyellow;font-size: 20px;">|</span>
</html>