【Javascript】⼊门之图⽚排序
描述: 点击从⼤到⼩, 图⽚按照从⼤到⼩的顺序来排序，按钮⽂字为从⼩到⼤; 点击从⼩到⼤, 图⽚按照从⼩到⼤的顺序来排序, 按钮⽂字变为从⼤到⼩；点击随机排序, 图⽚随机排序并每次⽣成不重复随机数(下标)
Sort⽤法
数组.sort();
默认按照字符串的编码进⾏排序
数组.sort(参数);
参数必须是函数 函数有两个形参
第⼀个形参 - 第⼆个形参 按照从⼩到⼤排序
第⼆个形参 - 第⼀个形参 按照从⼤到⼩的顺序进⾏排序
var arr =[3,4,5,1,2,5,6];
arr.sort();
console.log(arr);// [1, 2, 3, 4, 5, 5, 6]
var arr =[32,23,1,32,23,4,6,8,54,32];
/
/ arr.sort();
// console.log(arr); // [1, 23, 23, 32, 32, 32, 54]
// 参数必须是函数函数有两个形参
arr.sort(function(a, b){
// return a - b; // 第⼀形参-第⼆个形参默认按照从⼩到⼤排序
return b - a;// 第⼆个形参 - 第⼀个形参按照从⼤到⼩的顺序进⾏排序
});
console.log(arr);
代码实现
⽅法⼀：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图⽚排序</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
width: 800px;
height: 530px;indexof的用法javascript
margin: 0 auto;
text-align: center;
overflow: hidden;
}
#wrap > button{
width: 80px;
height: 40px;
background-color: #ff0000;
border:none;
outline: none;
font-size: 15px;
color:#fff;
margin: 10px 0 15px 0;
}
#wrap > button:nth-of-type(2){
margin-left: 25px;
}
#wrap > ul > li{
list-style: none;
float: left;
/* border: 1px solid #333; */
}
#wrap > ul > li > img{
width: 200px;
height: 200px;
}
#wrap > ul > li > p{
font: 15px/30px "微软雅⿊";
}
</style>
</head>
<body>
<!-- 1.布局 -->
<div id="wrap">
<!-- 两个功能按钮 -->
<button>从⼤到⼩</button>
<button>随机排序</button>
<!-- 图⽚布局 -->
<ul>
<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="">
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
</ul>
<script>
/*
描述:
点击从⼤到⼩, 图⽚按照从⼤到⼩的顺序来排序⽂字从⼩到⼤
点击从⼩到⼤, 图⽚按照从⼩到⼤的顺序来排序⽂字从⼤到⼩
点击随机排序, 图⽚随机排序每次⽣成随机数(下标)  ⽣成不重复的随机下标
⽣成了⼀个重复的下标本轮循环需要多⾛⼀次
*/
//  1. 获取button, ⽗元素li, 图⽚img和标题p
var btns = ElementsByTagName('button');
var lis = ElementsByTagName('li');
console.log(btns, lis);
var img = ElementsByTagName('img');
var p = ElementsByTagName('p');
console.log(img, p);
// 2.1 ⽤对象存储每⼀个li
var imgInfo ={
'url':['./img/2.JPG','./img/3.JPG','./img/4.JPG','./img/5.jpg','./img/6.jpg','./img/7.jpg','./img/8.jpg','./img/9.jpg'], 'title':['花卉1','花卉2','花卉3','花卉4','花卉5','花卉6','花卉7','花卉8']
};
// 2.2 建⽴数组存储下标便于⽐较
var arr =[0,1,2,3,4,5,6,7];
// 5.调⽤初始化函数
init(arr);
// 3.给每个li填充url和title
// 4.封装初始化函数便于调⽤
function init(arr){
for(var i =0; i < lis.length; i++){
//赋值图⽚地址
img[i].src = imgInfo.url[arr[i]];
//  赋值标题内容
p[i].innerHTML = imgInfo.title[arr[i]];
}
}
// 5.点击从⼩到⼤排序按钮, ⽂字变为从⼤到⼩, 图⽚从⼩到⼤排序
//假设⼀开始按钮为""从⼤到⼩" 此时为false, 如果"从⼩到⼤", 状态为true
btns[0].onoff =false;
btns[0].onclick=function(){
ff){
// 如果是从⼩到⼤排序
arr.sort(function(a ,b){
return a - b;
});
// console.log(arr);
// 按照排序下标重新填充图⽚src和title
init(arr);
// 按钮内容改变
this.innerHTML ='从⼤到⼩';
// 按钮状态改变
}else{
//从⼤到⼩排序
arr.sort(function(a , b){
return b - a;
});
// console.log(arr);
// 按照排序下标重新填充src和title
// 按钮内容改变
this.innerHTML ='从⼩到⼤';
// 按钮状态改变
}
}
/*点击随机排序, 图⽚随机排序每次⽣成随机数(下标)  ⽣成不重复的随机下标
⽣成了⼀个重复的下标  */
// 建⽴保存随机数的数组
var randomArr;
// 6.点击随机排序按钮, ⽣成随机数0-7之间的随机数
btns[1].onclick=function(){
// 调⽤getNumNoRepeat()
getNumNoRepeat();
/
/ 调⽤randomArr函数
init(randomArr);
}
// 封装函数
function getNumNoRepeat(){
// 清空数组
randomArr =[];
// ⽣成 0 - 7 之间的随机数, 并且不能重复
do{
// ⽣成0-7之间的随机数
var num = Math.floor(Math.random()*8);
/
/ console.log(num);
// 如果数组中不存在随机数num, 则添加进数组中
if(randomArr.indexOf(num)==-1){
randomArr.push(num);
}
}while(randomArr.length <8);
// console.log(randomArr);
}
</script>
</div>
</body>
</html>
⽅法⼆:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图⽚排序</title>
<style>
body{
text-align: center;
}
img{
width: 150px;
height: 150px;
}
ul{
width: 650px;
height: 350px;
margin: auto;
}
p{
display: inline-block;
}
li{
display: inline-block;
width: 155px;
height: 155px;
}
button{
width: 100px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<button class="bt">从⼤到⼩</button>
<button>随机排序</button>
<ul>
<li>
<img src="./img/2.jpg" alt="">
<p>图⽚2</p>
</li>
<li>
<img src="./img/1.jpg" alt="">
<p>图⽚1</p>
</li>
<li>
<img src="./img/4.jpg" alt="">
<p>图⽚4</p>
</li>
<li>
<img src="./img/3.jpg" alt="">
<p>图⽚3</p>
</li>
<li>
<img src="./img/5.jpg" alt="">
<p>图⽚5</p>
</li>
<li>
<img src="./img/6.jpg" alt="">
<p>图⽚6</p>
</li>
<li>
<img src="./img/7.jpg" alt="">
<p>图⽚7</p>
</li>
<li>
<img src="./img/8.jpg" alt="">
<p>图⽚8</p>
<li>
</ul>
<script>
/*
排序:
点击从⼤到⼩, 图⽚按照从⼤到⼩的顺序来排序⽂字从⼩到⼤
点击从⼩到⼤, 图⽚按照从⼩到⼤的顺序来排序⽂字从⼤到⼩
点击随机排序, 图⽚随机排序每次⽣成随机数(下标)  ⽣成不重复的随机下标
⽣成了⼀个重复的下标本轮循环需要多⾛⼀次
*/
// 获取元素: btn span
var btns = ElementsByTagName('button');
var lis = ElementsByTagName('li');
console.log(btns, lis);
// 看到图⽚和名字⼀⼀对应的数据数组⾥⾯放对象
var arr =[
{'title':'图⽚1','src':'./img/5.jpg'},
{'title':'图⽚2','src':'./img/6.jpg'},
{'title':'图⽚3','src':'./img/7.jpg'},
{'title':'图⽚4','src':'./img/8.jpg'},
{'title':'图⽚5','src':'./img/9.jpg'},
{'title':'图⽚6','src':'./img/10.jpg'},
{'title':'图⽚7','src':'./img/11.jpg'},
{'title':'图⽚8','src':'./img/12.jpg'},
];

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。