描述: 点击从大到小, 图片按照从大到小的顺序来排序,按钮文字为从小到大; 点击从小到大, 图片按照从小到大的顺序来排序, 按钮文字变为从大到小;点击随机排序, 图片随机排序 并每次生成不重复随机数(下标)
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;
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="">
<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>
<script>
/*
描述:
点击从大到小, 图片按照从大到小的顺序来排序 文字 从小到大
点击从小到大, 图片按照从小到大的顺序来排序 文字 从大到小
点击随机排序, 图片随机排序 每次生成随机数(下标) 生成不重复的随机下标
生成了一个重复的下标 本轮循环需要多走一次
*/
// 1. 获取button, 父元素li, 图片img和标题p
var btns = document.getElementsByTagName('button');
var lis = document.getElementsByTagName('li');
console.log(btns, lis);
var img = document.getElementsByTagName('img');
var p = document.getElementsByTagName('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(){
if(this.onoff){
// 如果是从小到大排序
arr.sort(function(a ,b){
return a - b;
});
// console.log(arr);
// 按照排序下标重新填充图片src和title
init(arr);
// 按钮内容改变
this.innerHTML = '从大到小';
// 按钮状态改变
this.onoff = false;
}else{
//从大到小排序
arr.sort(function(a , b){
return b - a;
});
// console.log(arr);
// 按照排序下标重新填充src和title
init(arr);
// 按钮内容改变
this.innerHTML = '从小到大';
// 按钮状态改变
this.onoff = true;
}
}
/*点击随机排序, 图片随机排序 每次生成随机数(下标) 生成不重复的随机下标
生成了一个重复的下标 */
// 建立保存随机数的数组
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 = document.getElementsByTagName('button');
var lis = document.getElementsByTagName('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' },
];
// 点击按钮
btns[0].onclick = function () {
// 判断按钮的文字是从大到小?
if (this.innerHTML == '从大到小') {
// 图片按照从大到小的顺序来排序 文字 从小到大
arr.sort(function (a, b) {
// console.log(a, b);
return b.title.localeCompare(a.title, 'zh');
});
// 按钮文本内容换成 从小到大
this.innerHTML = '从小到大';
} else {
arr.sort(function (a, b) {
// console.log(a, b);
return a.title.localeCompare(b.title, 'zh');
});
// 按钮文本内容换成 从大到小
this.innerHTML = '从大到小';
}
console.log(arr);
// 将arr的每一个数据渲染到对应的每一个span中
for (var i = 0; i < lis.length; i++) {
// console.log(spans[i]);
// 获取对应的子标签
var img = lis[i].getElementsByTagName('img')[0];
var p = lis[i].getElementsByTagName('p')[0];
// console.log(img, p);
// 更改img的地址
img.src = arr[i].src;
// 文字内容
p.innerHTML = arr[i].title;
}
}
// 随机排序 点击随机排序, 图片随机排序 每次生成随机数(下标) 生成不重复的随机下标
btns[1].onclick = function () {
// 生成8个随机数
var na = [];
for (var i = 0; i < 8; i++) {
var num = Math.floor(Math.random() * 8);
console.log(num);
// 如果当前下标不重复, 在na这个数组中没有num的时候,才将num添加进去
// 当出现重复项,本轮循环需要多留一次
if (na.indexOf(num) == -1) {
na.push(num);
} else {
i--;
}
}
console.log(na);
// na数组中存的是每一个span标签要渲染的数据的下标
// 将arr的每一个数据渲染到对应的每一个span中
for (var i = 0; i < lis.length; i++) {
// 获取对应的子标签
var img = lis[i].getElementsByTagName('img')[0];
var p = lis[i].getElementsByTagName('p')[0];
// console.log(img, p);
// 更改img的地址
img.src = arr[na[i]].src;
// 文字内容
p.innerHTML = arr[na[i]].title;
}
}
</script>
</body>
</html>