js點(diǎn)擊按鈕實(shí)現(xiàn)圖片排序
本文實(shí)例為大家分享了js點(diǎn)擊按鈕實(shí)現(xiàn)圖片排序的具體代碼,供大家參考,具體內(nèi)容如下
效果
1 、點(diǎn)擊按鈕
如果按鈕文字是從大到小 將li標(biāo)簽按照從大到小的順序排列 文字改成從小到大
如果按鈕文字是從小到大 將li標(biāo)簽按照從小到大的順序排列 文字變成從大到小
2 、點(diǎn)擊按鈕 將li隨機(jī)排序
<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>隨機(jī)排序</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 點(diǎn)擊按鈕? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果按鈕文字是從大到小 將li標(biāo)簽按照從大到小的順序排列 文字改成從小到大 ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果按鈕文字是從小到大 將li標(biāo)簽按照從小到大的順序排列 文字變成從大到小 ? ? ? ? ? ? ? ? ? ? ? ? 2.2 點(diǎn)擊按鈕 將li隨機(jī)排序? ? ? ? ? ? ? ? ? ? ? 標(biāo)簽排序比較快 ? ? ? ? ? ? ? ? ? ? 注意:? ? ? ? ? ? ? ? ? ? ? ? ? 獲取元素方式: ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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.將集合轉(zhuǎn)成數(shù)組 ? ? ? ? ? ? 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標(biāo)簽按照從大到小的順序排列 ? ? ? ? ? ? ? ? ? ? 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.設(shè)置返回值 ? ? ? ? ? ? ? ? ? ? ? ? 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的內(nèi)容 ? ? ? ? ? ? ? ? ul.innerHTML = ''; ? ? ? ? ? ? ? ? // 8.2.將liarr里面的每一個(gè)數(shù)據(jù)渲染到頁面ul中 ? ? ? ? ? ? ? ? for (var j = 0; j < liarr.length; j++) { ? ? ? ? ? ? ? ? ? ? ul.innerHTML += '<li>' + liarr[j].innerHTML + '</li>'; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? // 隨機(jī)排序 ? ? ? ? ? ? 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>
效果:
從小到大
從大到小
隨機(jī)排序
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于js實(shí)現(xiàn)的圖片拖拽排序源碼實(shí)例
- JS實(shí)現(xiàn)簡易的圖片拖拽排序?qū)嵗a
- avalon js實(shí)現(xiàn)仿google plus圖片多張拖動排序附源碼下載
- avalon js實(shí)現(xiàn)仿微博拖動圖片排序
- js實(shí)現(xiàn)圖片放大縮小功能后進(jìn)行復(fù)雜排序的方法
- JS實(shí)現(xiàn)的點(diǎn)擊表頭排序功能示例
- JS實(shí)現(xiàn)點(diǎn)擊表頭表格自動排序(含數(shù)字、字符串、日期)
- JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法
相關(guān)文章
js實(shí)現(xiàn)獲取div坐標(biāo)的方法
這篇文章主要介紹了js實(shí)現(xiàn)獲取div坐標(biāo)的方法,通過調(diào)用jQuery插件實(shí)現(xiàn)獲取div元素坐標(biāo)的功能,非常簡單實(shí)用,需要的朋友可以參考下2015-11-11javascript輕松實(shí)現(xiàn)當(dāng)鼠標(biāo)移開時(shí)已彈出子菜單自動消失
本文為大家詳細(xì)介紹下使用javascript實(shí)現(xiàn)當(dāng)鼠標(biāo)移開時(shí)已彈出子菜單自動消失,具體如下,感興趣的朋友不要錯(cuò)過2013-12-12Javascript 中 null、NaN和undefined的區(qū)別總結(jié)
js中的數(shù)據(jù)類型有undefined,boolean,number,string,object等5種,前4種為原始類型,第5種為引用類型,接下來與大家分享下它們之間的區(qū)別2013-04-04微信小程序bindtap與catchtap的區(qū)別詳解
本文主要介紹了微信小程序bindtap與catchtap的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09