JavaScript的几个函数（显示隐藏、间隔时间调用函数等）

哄哄9709

已于 2022-12-06 22:35:53 修改

阅读量271

点赞数

分类专栏：代码笔记文章标签： html 前端 javascript

于 2022-12-04 18:38:40 首次发布

本文链接：https://blog.csdn.net/weixin_55626132/article/details/128175524

版权

代码笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

append（）、fadeOut()、fadeIn()、slideUp()、slideDown（）

//拼接
$("body").append("<p>"+hobby+"</p>");
//隐藏显示
$("h1").fadeOut(3000).fadeIn(2000);
$("h1").fadeOut(1000);
$("h1").fadeIn(2000);
$("h1").slideUp(1000).slideDown(500);

延时调用setTimeout()、取消延时调用clearTimeout()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
	</head>
	<body>
		<form name="display1">   
		    <input type="text" id="box1" name="box1" value="0" size="4" />   
		    <input type="button" value="停止计时" onclick="clearTimeout(meter1)" />   
		    <input type="button" value="继续计时" onclick="count1() " />   
		</form>   
		<p></p>  
		<form name="display2">   
		    <input type="text" id="box2" name="box2" value="0" size="4" />   
		    <input type="button" value="停止计时" onclick="clearTimeout(meter2) " />   
		    <input type="button" value="继续计时" onclick="count2( ) " />   
		</form>   
		<script>  
		x = 0;
		y = 0;
		  
		function count1( )  
		{　
		    x = x+ 1;
		    document.getElementById("box1").value= x;
		    meter1=setTimeout("count1()", 1000);
		}
		 
		function count2( ) 
		{　
		    y = y+ 1;
		    document.getElementById("box2").value= y;
		    meter2=setTimeout("count2()", 1000);
		}  
		// 执行函数
		count1( );
		count2( );
		</script>
		
		
	</body>
</html>

按固定间隔调用函数setInterval()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动了</title>
	</head>
	<body>
		<h1 id="heading">交互的进度条</h1>
		<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
		<script>
			var topOffset=0;
			var leftOffset=0;
			var i=0;
			var moveHeading=function(){
				//设置id为heading的标题的位置
				$("#heading").offset({left:leftOffset,top:topOffset});
				i++;
				leftOffset+=i;
				if (leftOffset>1000) {
					leftOffset=0;
					if(topOffset<700){
						topOffset+=20;
					}else{
						topOffset=0;
						i=0;
					}
				}
			};
			//每隔30毫秒调用一次moveHeading函数
			setInterval(moveHeading,30);
		</script>
	</body>
</html>

mousemove()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动了</title>
	</head>
	<body>
		<h1 id="heading">交互的进度条</h1>
		<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
		<script>
			//（一）创建一个鼠标点击事件
			// var clickHandler=function(event){
			// 	console.log("点击！"+event.pageX+" "+event.pageY);
			// }
			// $("h1").click(clickHandler);
			
			//（二）创建一个鼠标移动事件
			$("html").mousemove(function(event){
				$("#heading").offset({
					left:event.pageX+100,
					top:event.pageY+50
				})
			});
		</script>
	</body> 
</html>