前端js中function构造匿名函数

最新推荐文章于 2024-04-03 02:37:01 发布

钱端攻城狮

最新推荐文章于 2024-04-03 02:37:01 发布

阅读量673

点赞数 1

分类专栏： js 文章标签：前端 javascript css3

本文链接：https://blog.csdn.net/m0_54932975/article/details/123434931

版权

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	//匿名函数 也就是说没有函数名
	var a=function(){
		document.write("匿名函数"+"<br />");
	}
	a();
	var b=function(x){
		document.write(x);
	}
	b(6);
	//区别就是把函数名放在了变量的位置
</script>

运行结果:
在这里插入图片描述
附加题:js写导航条效果
方式1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 720px;
				list-style: none;
				display: flex;
				margin: 30px auto;
				/*border: 2px solid red;*/
			}
			li{
				background-color: pink;
				width: 80px;
				text-align: center;
				padding: 10px 0;
				border: 2px solid black;
				transition: all 1s linear;
			}
			/*默认选中*/
			li:first-child{
				/*color: tomato;
				border-bottom: 5px solid red;*/
			}
		</style>
	</head>
	<body>
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</body>
</html>
<script type="text/javascript">
	var liarray=document.getElementsByTagName("li");
	for(var i=0;i< liarray.length; i++){
		liarray[i].onclick=function(){
			//i的值留不住 要用关键字this
			this.style.color= "red";
			this.style.borderBottom = "6px solid blue";
			for(var j=0;j<liarray.length;j++){
			if(liarray[j]!=this){
				liarray[j].style.color="black";
				liarray[j].style.borderBottom="none";
				}
			}
		}
	}
</script>

运行结果:
在这里插入图片描述

方式2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				width:800px;
				list-style: none;
				display: flex;
				margin: 30px auto;
				/*border: 2px solid red;*/
				position: relative;
			}
			li{
				background-color: pink;
				width: 80px;
				text-align: center;
				padding: 10px 0;
				border: 2px solid black;
			}
			div{
				width: 80px;
				height: 5px;
				background-color: blue;
				position: absolute;
				bottom: 0;
				left: 0;
				transition: all .5s linear;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<!--这个div充当滑动的条-->
			<div id="slide"></div>
		</ul>
	</body>
</html>
<script type="text/javascript">
	var liArray=document.getElementsByTagName("li");
	for(var i=0;i< liArray.length; i++){
		liArray[i].style.cursor="pointer";
		liArray[i].onclick=function(){
			//this 就是当前被点击的标签对象
			//取下标
//			this.style.cursor="pointer";
			var index=0;//用来记录this下标
			for(var j=0;j< liArray.length; j++){
				if (this==liArray[j]) {
					index=j;//j的位置就是被点击的this下标
				}
			}
			//找到下滑位置
			slide.style.left=80*index+"px";
		}
	}
</script>

运行结果:
在这里插入图片描述

钱端攻城狮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端js中function构造匿名函数

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body></html><script type="text/javascript"> //匿名函数也就是说没有函数名 var a=function(){ document.wr
复制链接

扫一扫