首页 > 其他分享> > javescript第八天

javescript第八天

2020-12-16 13:33:45 作者：互联网

通过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