JavaScript基础之第十二天js效果实战

最新推荐文章于 2023-03-10 12:47:32 发布

geekmice

最新推荐文章于 2023-03-10 12:47:32 发布

阅读量290

点赞数

分类专栏：前端文章标签： javascript js css html jquery

本文链接：https://blog.csdn.net/greek7777/article/details/105907649

版权

前端专栏收录该内容

63 篇文章 3 订阅

订阅专栏

定时器

两种定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<!-- js代码 -->
	<script type="text/javascript">
		/* 
			1.setInterval(要执行的动作,时间:毫秒);//多少时间就执行，重复执行多次
			2.setTimeout(要执行动作,时间:毫秒)//多少时间后执行，只执行依次 
		*/
	   var p1=setInterval(function(){document.write("这是重复执行的一定时间的定时器(setInterval)"+"<br/>")},4000);
	   var p2=setTimeout(function(){alert("这是经过一段时间的定时器(setTimeout())")},2000);
	</script>
</html>

清理两种定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">点击</button>
	</body>
	<!-- js代码 -->
	<script type="text/javascript">
		/* 
			1.setInterval(要执行的动作,时间:毫秒);//多少时间就执行，重复执行多次
			2.setTimeout(要执行动作,时间:毫秒)//多少时间后执行，只执行依次 
		*/
	   var p1=setInterval(function(){document.write("这是重复执行的一定时间的定时器(setInterval)"+"<br/>")},4000);
	   var p2=setTimeout(function(){alert("这是经过一段时间的定时器(setTimeout())")},2000);
	   // 清理定时器
	   /* 
		   1.clearInterval(要清理的定时器名称)
		   2.clearTimeout(要清理定时器名称) 
		*/
	   // 注意:按钮一定要在定时器出现前点击
	   var btn=document.getElementById("btn");
	   btn.onclick=function()
	   {
		   clearTimeout(p2);
		   clearInterval(p1);
	   }
	</script>
</html>

定时器三种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">点击</button>
	</body>
	<!-- js代码 -->
	<script type="text/javascript">
		/* 
			1.setInterval(要执行的动作,时间:毫秒);//多少时间就执行，重复执行多次
			2.setTimeout(要执行动作,时间:毫秒)//多少时间后执行，只执行依次 
		*/
	   // document.write("这是去除定时器前");
	   // var p1=setInterval(function(){document.write("这是重复执行的一定时间的定时器(setInterval)"+"<br/>")},4000);
	   // var p2=setTimeout(function(){alert("这是经过一段时间的定时器(setTimeout())")},2000);
	   
	   // 清理定时器
	   /* 
		   1.clearInterval(要清理的定时器名称)
		   2.clearTimeout(要清理定时器名称) 
		*/
	   // 注意:按钮一定要在定时器出现前点击
	   var btn=document.getElementById("btn");
	   btn.onclick=function()
	   {
		   clearTimeout(p2);
		   clearInterval(p1);
	   }
	  function abc()
	  {
	  		   alert("这是有函数名，不能有参数形式！");
	  } 
	  function abcd(a)
	   {
		   alert(a);
	   }
	   // 1.匿名函数:
	   // setInterval(function(){document.write("这是匿名函数形式！");},2000)
	   // 2.有函数名,不能有参数
	   // setInterval(abc,2000);
	   // 3.把函数当成字符串,就可以传参数
	   var a="函数当成字符串形式";
	   setInterval("abcd(a)",2000);
	</script>
</html>

倒计时跳转效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- css代码 -->
		<style type="text/css">
			*
			{
				padding: 0;
				margin: 0px;
			}
			.box
			{
				width: 400px;
				height: 50px;
				margin:0 auto;
				text-align: center;
				font-size: 44px;
			}
		</style>
	</head>
	<body>
		<!-- <button id="btn">点击</button> -->
		<div class="box">
			剩余跳转时间：<span id="clock">10</span>秒
			</div>
	</body>
	<!-- js代码 -->
	<script type="text/javascript">		
	   var clock=document.getElementById("clock");//获取span
	   var t=clock.innerHTML;//获取秒数
	   function newsFun()
	   {
		   t--;
		   clock.innerHTML=t;
		   if(t<=0)
		   {
			   clearInterval(timer);
			   // 设置或者返回当前页面的URL
			   location.href="https://www.csdn.net";
		   };
	   }
	   var timer=setInterval(newsFun,1000);
	</script>
</html>

运动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			body{position: relative;}
			#zxw{
				width: 50px;height: 50px;background: green;
				position: absolute;top: 100px;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">点我移动</button>
		<div id="zxw" style="left: 0px;"></div>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			var zxw = document.getElementById("zxw");
			var buCang = 10;
			btn.onclick = function(){				
				var timer = setInterval(function(){					
					//获取zxw的left值,转成整数
					var o_left = parseInt(zxw.style.left);
					var n_left = o_left+buCang;
					zxw.style.left = n_left+"px";
					if ( n_left>400) {
						buCang = -10;
					}else if(n_left==0){
						buCang = 10;
					};	
				},200);				
			};			
		</script>
	</body>
</html>