利用js实现点击按钮实现图片排序

3403771864 发布于2022-10-23 13:49 / 805人阅读

　　利用JS就可以实现在点击按钮实现图片排序，做个狠人，直接说：

　　效果

　　1 、点击按钮

　　如果按钮文字是从大到小将li标签按照从大到小的顺序排列文字改成从小到大

　　如果按钮文字是从小到大将li标签按照从小到大的顺序排列文字变成从大到小

　　2 、点击按钮将li随机排序

　　<style>
　　* {
　　padding: 0;
　　margin: 0;
　　list-style: none;
　　}
　　.wrap {
　　width: 440px;
　　margin: 50px auto;
　　text-align: center;
　　}
　　ul li {
　　float: left;
　　width: 100px;
　　height: 130px;
　　margin-right: 10px;
　　margin-bottom: 10px;
　　font-size: 12px;
　　}
　　ul li img {
　　width: 100px;
　　height: 100px;
　　}
　　ul li p {
　　line-height: 30px;
　　text-align: center;
　　font-size: 12px;
　　}
　　.wrap button {
　　display: inline-block;
　　width: 100px;
　　height: 40px;
　　text-align: center;
　　line-height: 40px;
　　background-color: red;
　　border: none;
　　margin-right: 20px;
　　margin-bottom: 20px;
　　color: #fff;
　　font-size: 16px;
　　}
　　</style>

　　<div class="wrap">
　　<button>从大到小</button><button>随机排序</button>
　　<ul>
　　<li>
　　<img src="./img1.jfif" alt="">
　　柴犬<span>1</span>
　　</li>
　　<li>
　　<img src="./img2.jfif" alt="">
　　柴犬<span>2</span>
　　</li>
　　<li>
　　<img src="./img3.jfif" alt="">
　　柴犬<span>3</span>
　　</li>
　　<li>
　　<img src="./img4.jfif" alt="">
　　柴犬<span>4</span>
　　</li>
　　<li>
　　<img src="./img5.jfif" alt="">
　　柴犬<span>5</span>
　　</li>
　　<li>
　　<img src="./img6.jfif" alt="">
　　柴犬<span>6</span>
　　</li>
　　<li>
　　<img src="./img7.jfif" alt="">
　　柴犬<span>7</span>
　　</li>
　　<li>
　　<img src="./img8.jfif" alt="">
　　柴犬<span>8</span>
　　</li>
　　</ul>

　<script>
　　/*
　　2. 效果
　　2.1 点击按钮
　　如果按钮文字是从大到小 将li标签按照从大到小的顺序排列 文字改成从小到大
　　如果按钮文字是从小到大 将li标签按照从小到大的顺序排列 文字变成从大到小
　　2.2 点击按钮 将li随机排序
　　标签排序比较快
　　注意:
　　获取元素方式:
　　document/父元素.getElementsByTagName()
　　document/父元素.getElementsByClassName()
　　*/
　　// 1.获取元素 button li ul
　　var btns = document.getElementsByTagName('button');
　　var lis = document.getElementsByTagName('li');
　　var ul = document.getElementsByTagName('ul')[0];
　　console.log(btns, lis, ul);
　　// 5.将集合转成数组
　　var liarr = [];
　　for (var i = 0; i < lis.length; i++) {
　　liarr.push(lis[i]);
　　}
　　console.log(liarr);
　　// 2.添加事件
　　btns[0].onclick = function () {
　　// 3.如果按钮是从大到小
　　if (this.innerText == '从大到小') {
　　// 4.将li标签按照从大到小的顺序排列
　　liarr.sort(function (a, b) {
　　console.log(a, b);
　　// 6.获取a、b中的span
　　var as = a.getElementsByTagName('span')[0].innerText;
　　var bs = b.getElementsByTagName('span')[0].innerText;
　　console.log(as, bs);
　　// 7.设置返回值
　　return bs - as;
　　});
　　// 9.更新文字
　　this.innerText = '从小到大'
　　} else {
　　liarr.sort(function (a, b) {
　　console.log(a, b);
　　var as = a.getElementsByTagName('span')[0].innerText;
　　var bs = b.getElementsByTagName('span')[0].innerText;
　　return as - bs;
　　});
　　this.innerText = '从大到小'
　　}
　　// console.log(liarr);
　　// 8.渲染到ul中
　　// 8.1清空页面中ul的内容
　　ul.innerHTML = '';
　　// 8.2.将liarr里面的每一个数据渲染到页面ul中
　　for (var j = 0; j < liarr.length; j++) {
　　ul.innerHTML += '<li>' + liarr[j].innerHTML + '</li>';
　　}
　　}
　　// 随机排序
　　btns[1].onclick = function () {
　　liarr.sort(function (a, b) {
　　console.log(a, b);
　　return Math.random() - 0.5;
　　});
　　ul.innerHTML = '';
　　for (var j = 0; j < liarr.length; j++) {
　　ul.innerHTML += '<li>' + liarr[j].innerHTML + '</li>';
　　}
　　}
　　</script>

　　效果：

　　从小到大

　　从大到小

　　随机排序

GPU云服务器云服务器 js实现按钮点击 js 实现提交按钮 js实现table排序 js实现点击菜单显示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128193.html

利用Vue.js实现拼图游戏

摘要：之前写过一篇基于的表格分页组件的文章，主要介绍了组件的编写方法，有兴趣的可以访问这里进行阅读前言为了进一步让大家了解的神奇魅力，了解的一种以数据为驱动的理念，本文主要利用实现了一个数字拼图游戏，其原理并不是很复杂，效果图如下展示地址为有能力之前写过一篇《基于Vue.js的表格分页组件》的文章，主要介绍了Vue组件的编写方法，有兴趣的可以访问这里进行阅读：https://segment...

wh469012917 2019-08-22 10:34 评论0 收藏0
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️

响应式可过滤的游戏+工具展示页面用于各种网站以按类别对图像进行排序。在本文中，我将向您展示如何借助 HTML CSS 和 javascript 创建响应式可过滤的游戏+工具展示页面。可过滤作品集是一种流行的网络元素，可用于各种网站。它是一种作品画廊，大量作品整齐地排列在一起。值得注意的一点是，所有作品都可以在这里按类别排序。有一个导航栏，其中对所有类别进行了排序。单击这些类别中的任何一个时。...

Lavender 2021-09-06 15:00 评论0 收藏0
Vue 实现的音乐项目 music app 知识点总结分享

摘要：后两个属性可选。属性定义了项目的缩小比例，默认为，即如果空间不足，该项目将缩小。属性定义了在分配多余空间之前，项目占据的主轴空间。它的默认值为，即项目的本来大小。结合的异步组件和的代码分割功能，轻松实现路由组件的懒加载。项目总结这是我第二个用 Vue 实现的项目，下面内容包括了在实现过程中所记录的知识点以及一些小技巧项目演示地址：https://music-vue.n-y.io源...

meteor199 2019-08-26 11:45 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

lemanli 2019-08-02 15:57 评论0 收藏0