JavaScript中定时器案例（获取验证码60秒倒计时，页面打字机效果，无缝滚动特效）

最新推荐文章于 2024-11-25 22:00:28 发布

原创最新推荐文章于 2024-11-25 22:00:28 发布 · 1.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了JavaScript中定时器的使用，通过实例展示了如何实现获取验证码的60秒倒计时功能，以及创建页面打字机效果和无缝滚动特效，提升用户体验。

获取验证码60秒倒计时

<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var btn = document.getElementById('btn');
				btn.addEventListener('click',show,false);
				var count=10;
				var settime;
				function show(){
					count--;
					btn.innerHTML = '重新发送' + '(' + count + 's' + ')';
					if(count<=0){
						clearTimeout(settime);
						count=10;
						btn.innerHTML='获取验证码'; 
					}else{
						settime=setTimeout(show,1000);
					}
				}
				
			}
		</script>
	</head>

	<body>
		<button id="btn">获取验证码</button>
	</body>

页面打字机效果

<script type="text/javascript">
	//创建一个数组用来存储你要打印的一个字符
	var n=0;
	function load(){
		var arr=['没','有','什','么','是','一','包','辣','条','解','决','不','了','的',',','如','果','有',',','那','就','两','包','.'];
		var div=document.getElementById('div1');
		div.innerHTML+=arr[n];
		n++;
		var timer=setTimeout('load()',500);
		if(n>=arr.length){
			clearTimeout(timer);
			var timer1=setInterval('span()',500);
		}
	}
	function span(){
		var span1= document.getElementById('span1');
		if(span1.style.display=='block'){
			span1.style.display='none';
		}else{
			span1.style.display='block';
		}
	}
</script>
<body "load()">
	<div id="div1" style="float: left; font-family: '微软雅黑';font-size: 20px;"></div>
   	<span id="span1">
   		<label style="color: red; font-size: 15px; font-family:  '微软雅黑';">|		</label>
   	</span>
</body>

无缝滚动特效

<style type="text/css">
	#box {
        width: 350px;
        height: 400px;
        border: 1px solid pink;
    }
    #box1 {
        width: 100%;
        height: 400px;
        overflow: hidden;
        /*overflow: scroll;*/
    }
    #box a {
        text-decoration: none;
        color: black;
    }
    ul {
    	list-style: none;
    }
    li {
    	margin-top: 5%;
    }
</style>
<script type="text/javascript">
	//使用setInterval()  实现无缝滚动
	function mygundong(){
		var box1=document.getElementById('box1');
		//从con1克隆到con2
		var con1=document.getElementById('con1');
		var con2=document.getElementById('con2');
		con2.innerHTML=con1.innerHTML;
		//con1.offsetHeight 的高度
		//scrollTop 滚动条距离  父元素 顶部内侧之间的距离
		if(box1.scrollTop>(con1.offsetHeight+con2.offsetHeight)){
			box1.scrollTop=0;
		}else{
			box1.scrollTop++
		}
	}
	setInterval('mygundong()',50);
</script>
<body>
	<div id="box">
		<div id="box1">
			<ul id="con1">
				<li>
					<a href="#">1.HTML基本语法</a>
				</li>
				<li>
					<a href="#">2.css样式书写</a>
				</li>
				<li>
					<a href="#">3.HTML+CSS实现网页布局</a>
				</li>
				<li>
					<a href="#">4.JavaScript基础语法</a>
				</li>
				<li>
					<a href="#">5.JavaScript数组</a>
				</li>
				<li>
					<a href="#">6.JavaScript中DOM基本操作</a>
				</li>
				<li>
					<a href="#">7.JavaScript的OOP思想实现贪吃蛇游戏</a>
				</li>
				<li>
					<a href="#">8.jQuery基础</a>
				</li>
				<li>
					<a href="#">9.jQuery动画制作</a>
				</li>
				<li>
					<a href="#">10.jQuery插件使用技巧讲解</a>
				</li>
				<li>
					<a href="#">11.jQuery特效的实现</a>
				</li>
			</ul>
			<ul id="con2">				
			</ul>
		</div>
	</div>
</body>