用原生Js利用sort方法 實現圖片的正 倒排序和隨機排序

Lurkers.發表於2018-06-07
JS排序隨機

效果如圖展示：


程式碼如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		ul,li,p{padding: 0;margin: 0;}
		ul,li{list-style: none;}
		#box{width: 1000px;height: 600px;border: 1px solid #000;margin: 50px auto;text-align: center;position: relative;}
		input{ margin-top: 30px; width: 100px; height: 30px;line-height: 30px; border: 1px solid #ccc;background: #009999;color: #fff;outline: none;}
		ul{width: 1000px; height: 500px;top: 100px;position: absolute;background: #fff;}
		ul li{width: 240px; height: 250px;float: left;padding: 0 5px 10px 5px;}
		ul li img{width: 240px;height: 200px;vertical-align: top;}
		p{background: #ccc;height: 30px; line-height: 30px; color: #006598;font-weight: bold;}
	</style>
	
</head>
<body>
	<div id="box">
		<input type="button" value="從大到小" />
		<input type="button" value="打亂順序" />
		<ul>
			<li>
				<img src="img/1.jpg" alt="">
				<p>1 - 言葉之庭01</p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
		</ul>
	</div>
	<script>
		
			var aLi = document.getElementsByTagName('li');
			var aInp = document.getElementsByTagName('input');
			var json = {
				'Url' : ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg'],
				'title' : ['1 - 言葉之庭01','2 - 言葉之庭02','3 - 言葉之庭03','4 - 言葉之庭04','5 - 言葉之庭05','6 - 言葉之庭06','7 - 言葉之庭07','8 - 言葉之庭08']
			};
			
			
			aInp[0].onoff=true
			
			var num = [0,1,2,3,4,5,6,7];
			
			var oImg=document.getElementsByTagName("img")
			var oP=document.getElementsByTagName("p")
			
			//初始化
			for (var i=0;i<aLi.length;i++) {
				oImg[i].src=json.Url[i]
				oP[i].innerHTML=json.title[i]
			}
			
			//從大到小
			aInp[0].onclick=function(){
					if(this.onoff){
						num.sort(function(a,b){
						return b-a
						})
						this.value="從小到大"
						for (var i=0;i<aLi.length;i++) {
							oImg[i].src=json.Url[num[i]]
							oP[i].innerHTML=json.title[num[i]]
						}
						
						
						console.log(num)
							aInp[0].onoff=false
						}else{
							//從小到大
							num.sort(function(a,b){
							return a-b
							})
							this.value="從大到小"
							for (var i=0;i<aLi.length;i++) {
								oImg[i].src=json.Url[num[i]]
								oP[i].innerHTML=json.title[num[i]]
							}
							
							
							console.log(num)
							aInp[0].onoff=true	
								
							}
				
				
				
				
			}
			
			//打亂順序
			aInp[1].onclick=function(){
				num.sort(function(a,b){
				return Math.random()-0.5
					
				})
				for (var i=0;i<aLi.length;i++) {
					oImg[i].src=json.Url[num[i]]
					oP[i].innerHTML=json.title[num[i]]
				}
				
				
				console.log(num)
				
			}
			
	</script>
</body>
</html>


相關文章