javescript第八天

2020-12-16 13:33:45 阅读：158 来源： 互联网

标签：function ps arr 第八天 item javescript var 美女

通过js实现点击按钮图片从大到小从小到大随机排序
html样式

<body>
	<div id="div1">
		<a href="#">从大到小</a>
		<a href="#">随机排序</a>
	</div>
	<div id="div2">
		<p><img src="img/1.jpg"><br>美女1</p>
		<p><img src="img/2.jpg"><br>美女2</p>
		<p><img src="img/3.jpg"><br>美女3</p>
		<p><img src="img/4.jpg"><br>美女4</p>
		<p><img src="img/1.jpg"><br>美女5</p>
		<p><img src="img/2.jpg"><br>美女6</p>
		<p><img src="img/3.jpg"><br>美女7</p>
		<p><img src="img/4.jpg"><br>美女8</p>
	</div>

</body>

css样式

style>
		#div1 {
			text-align: center;
		}

		#div1 a {
			display: inline-block;
			width: 80px;
			height: 40px;
			line-height: 40px;
			background: red;
			color: #fff;
			text-decoration: none;
			margin-right: 20px;
		}

		#div1 a {
			color: #fff;
			background: red;
		}

		#div2 {
			text-align: center;
			width: 800px;
			margin: 0 auto;
		}

		#div2 p {
			float: left;
			width: 200px;
			height: 200px;
		}

		#div2 img {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

js样式

<script>
	var btns = document.getElementById('div1').getElementsByTagName('a');
	var o = document.getElementById('div2');
	var ps = o.getElementsByTagName('p');
	var arr = [];
	for (var i = 0; i < ps.length; i++) {
		arr.push(ps[i]);
	}

	
	btns[0].onclick = function () {
		
		arr.reverse();
		
		var s = '';
		arr.forEach(function (item) {
			s += "<p>" + item.innerHTML + "</p>";
		});
		o.innerHTML = s;
		// console.log(ps);
	};

	
	btns[1].onclick = function () {
		var arr = [];
		for (var i = 0; i < ps.length; i++) {
			arr.push(ps[i]);
		}
		
		arr.sort(function (a, b) {
			return Math.random() - 0.5;
		});
		
		var s = '';
		arr.forEach(function (item) {
			s += "<p>" + item.innerHTML + "</p>";
		});
		o.innerHTML = s;
	};

实现这个功能要了解reverse（）；这个倒叙功能，
第一步(顺序排序)
遍历数组，取出p
声明一个变量，用来保存数组的内容
第二步
变量 += 标签 +文字内容
显示图片

倒序排序只用使用arr.reverse();这个，可以人数组倒序
随机排序
取随机数，随机取数，要正值，负值都有，所以减0.5

标签：function,ps,arr,第八天,item,javescript,var,美女
来源： https://blog.csdn.net/fiaank/article/details/111262779

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javescript第八天