JavaScript延迟函数的学习--setTimeout--clearTimeout

最新推荐文章于 2022-04-04 12:59:53 发布

StoneKings

最新推荐文章于 2022-04-04 12:59:53 发布

阅读量370

点赞数

分类专栏： JavaScript 文章标签： clearTimeout setTimeou 延迟函数

本文链接：https://blog.csdn.net/shenchui/article/details/8488901

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基于JavaScript延迟函数的文本轮换代码：

 <style type="text/css">
	div{
		width:200px;
		height:100px;
		padding:10px;
		border:#ccc 1px solid;
	}
  </style>
  <script type="text/javascript">
  <!--
	 var now=1;
	 var tt = 800;
	 var total = 6;
	 var pre="a";
	 var t;
	 function cc(){
		for(var i =1 ;i<=total;i++){
			document.getElementById(pre+i).style.display='none';
		}
		if(now>total){
			now=1;
		}
		document.getElementById(pre+now).style.display='';
		now++;
		t=setTimeout(cc,tt);
	 }
	 function stopuit(){
		clearTimeout(t);
	 }
	 function goit(){
		t=setTimeout(cc,tt);
	 }
	 
  //-->
  </script>
 </head>

 <body οnlοad='cc();'>
    <a href="" id="a1" οnmοuseοver="stopuit();" οnmοuseοut="goit();"><div>a1</div></a>
	<a href="" id="a2" οnmοuseοver="stopuit();" οnmοuseοut="goit();"><div>b2</div></a>
	<a href="" id="a3" οnmοuseοver="stopuit();" οnmοuseοut="goit();"><div>c3</div></a>
	<a href="" id="a4" οnmοuseοver="stopuit();" οnmοuseοut="goit();"><div>d4</div></a>
	<a href="" id="a5" οnmοuseοver="stopuit();" οnmοuseοut="goit();"><div>e5</div></a>
	<a href="" id="a6" οnmοuseοver="stopuit();" οnmοuseοut="goit();"><div>f6</div></a>
 </body>

效果图：

StoneKings

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript延迟函数的学习--setTimeout--clearTimeout

基于JavaScript延迟函数的文本轮换代码： div{ width:200px; height:100px; padding:10px; border:#ccc 1px solid; } <!-- var now=1; var tt = 800; var total = 6; var pre="a"; var t; functi
复制链接

扫一扫

专栏目录