欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js點(diǎn)擊按鈕實(shí)現(xiàn)圖片排序

 更新時(shí)間:2022年07月12日 15:44:46   作者:星嶼H  
這篇文章主要為大家詳細(xì)介紹了js點(diǎn)擊按鈕實(shí)現(xiàn)圖片排序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js實(shí)現(xiàn)獲取div坐標(biāo)的方法

    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-11
  • js實(shí)現(xiàn)文字滾動效果

    js實(shí)現(xiàn)文字滾動效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)文字滾動效果,類似于新聞板塊中的公示公告,,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-03-03
  • js事件流、事件委托與事件階段實(shí)例詳解

    js事件流、事件委托與事件階段實(shí)例詳解

    事件委托應(yīng)用在很多開發(fā)場景之中,但是很多同學(xué)對委托的原理、特別是對JS原生實(shí)現(xiàn)委托不太了解,下面這篇文章主要給大家介紹了關(guān)于js事件流、事件委托與事件階段的相關(guān)資料,需要的朋友可以參考下
    2022-02-02
  • javascript輕松實(shí)現(xiàn)當(dāng)鼠標(biāo)移開時(shí)已彈出子菜單自動消失

    javascript輕松實(shí)現(xiàn)當(dāng)鼠標(biāo)移開時(shí)已彈出子菜單自動消失

    本文為大家詳細(xì)介紹下使用javascript實(shí)現(xiàn)當(dāng)鼠標(biāo)移開時(shí)已彈出子菜單自動消失,具體如下,感興趣的朋友不要錯(cuò)過
    2013-12-12
  • 詳解ES6中的let命令

    詳解ES6中的let命令

    let是ES6里面新的復(fù)制命令,let賦值命令只可以在{}代碼塊中被調(diào)用。這篇文章主要介紹了ES6中的let命令,需要的朋友可以參考下
    2016-12-12
  • Javascript 中 null、NaN和undefined的區(qū)別總結(jié)

    Javascript 中 null、NaN和undefined的區(qū)別總結(jié)

    js中的數(shù)據(jù)類型有undefined,boolean,number,string,object等5種,前4種為原始類型,第5種為引用類型,接下來與大家分享下它們之間的區(qū)別
    2013-04-04
  • 詳解微信小程序動畫Animation執(zhí)行過程

    詳解微信小程序動畫Animation執(zhí)行過程

    這篇文章主要介紹了微信小程序動畫Animation執(zhí)行過程 / 實(shí)現(xiàn)過程 / 實(shí)現(xiàn)方式,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-09
  • 微信小程序bindtap與catchtap的區(qū)別詳解

    微信小程序bindtap與catchtap的區(qū)別詳解

    本文主要介紹了微信小程序bindtap與catchtap的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • js實(shí)現(xiàn)上傳圖片功能

    js實(shí)現(xiàn)上傳圖片功能

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • JavaScript實(shí)現(xiàn)代碼雨效果

    JavaScript實(shí)現(xiàn)代碼雨效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)代碼雨效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01

最新評論