溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Js自定義多選框效果的實(shí)例代碼

發(fā)布時(shí)間：2020-09-06 23:30:06 來源：腳本之家 閱讀：157 作者：kerush 欄目：web開發(fā)

前端入坑紀(jì) 27

工作中的一個(gè)多選效果，感覺不算太難，就上傳來分享下。

Js自定義多選框效果的實(shí)例代碼

以上圖文，純屬測(cè)試，如有雷同，請(qǐng)勿當(dāng)真

HTML 結(jié)構(gòu)

  <div id="selexWps" class="seletProds clear">
    <div>
      <span>積分<em>5000</em></span>
      ![](wrap/img/pic.png)
      <p>請(qǐng)選擇</p>
    </div>
    <div>
      <span>積分<em>5000</em></span>
      ![](wrap/img/pic.png)
      <p>請(qǐng)選擇</p>
    </div>
    <div>
      <span>積分<em>6000</em></span>
      ![](wrap/img/pic.png)
      <p>請(qǐng)選擇</p>
    </div>
    <div>
      <span>積分<em>7000</em></span>
      ![](wrap/img/pic.png)
      <p>請(qǐng)選擇</p>
    </div>
    <div>
      <span>積分<em>8000</em></span>
      ![](wrap/img/pic.png)
      <p>請(qǐng)選擇</p>
    </div>
    <div>
      <span>積分<em>9000</em></span>
      ![](wrap/img/pic.png)
      <p>請(qǐng)選擇</p>
    </div>
  </div>
  <div class="endBtnsWrp clear">
    <a class="endBtn" href="javascript:;" rel="external nofollow" rel="external nofollow" >積分:<em id="talval">0</em></a>
    <a class="endBtn" href="javascript:;" rel="external nofollow" rel="external nofollow" >結(jié)算</a>
  </div>

這真不曉得什么要特意說明，真要有的話，那底部的結(jié)算條，它是fixed 布局，固定在屏幕底部。

CSS 結(jié)構(gòu)

    body {
      padding: 0;
      margin: 0;
      background-color: #fff;
      padding-bottom: 60px;
    }

    p {
      padding: 0;
      margin: 0;
    }

    ul,
    li {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #525252;
    }

    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

    .clear::after {
      display: block;
      content: "";
      clear: both;
    }

    .seletProds>div {
      float: left;
      position: relative;
      text-align: center;
      border: 2px solid #d8d8d8;
      box-sizing: border-box;
      width: 30%;
      margin: 1.666%;
    }

    .seletProds p {
      font-size: 14px;
      line-height: 37px;
      border-top: 2px solid #d8d8d8;
      text-align: center;
      background-color: #fff;
      color: #525252;
    }

    .seletProds>div img {
      width: 80%;
    }

    .seletProds>div span {
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(255, 92, 92, 0.79);
      padding: 0 3px;
      color: #fff;
      height: 17px;
      font-size: 12px;
    }

    .seletProds>div span em,
    .endBtnsWrp a em {
      font-style: normal;
    }

    .seletProds>div.on p {
      color: #fff;
      background-image: linear-gradient(-90deg, #53a0fe 0%, #5063ed 100%);
    }

    .endBtnsWrp {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    }

    .endBtn {
      display: block;
      float: left;
      width: 50%;
      line-height: 50px;
      font-size: 17px;
      color: #fff;
      background: #4a4a4a;
      text-align: center;
    }

    .endBtnsWrp a:first-child {
      background: #646464;
      width: 60%;
    }

    .endBtnsWrp a:last-child {
      background-color: #fcc647;
      width: 40%;
    }

css3的屬性用了不少，因?yàn)檫@個(gè)項(xiàng)目的出發(fā)點(diǎn)就是手機(jī)端的。比如漸變背景，偽元素等。每個(gè)商品是通過浮動(dòng)布局來實(shí)現(xiàn)的。

JS 結(jié)構(gòu)

    var odivs = document.getElementById('selexWps').getElementsByTagName("div");
    var emTal = 0; // 這是總的積分?jǐn)?shù)，初始為0
    for (var i = 0; i < odivs.length; i++) {
       // 先給每個(gè)點(diǎn)擊的項(xiàng)目添加個(gè)自定義屬性，以便區(qū)別點(diǎn)擊前和點(diǎn)擊后，剛開始是off
      odivs[i].setAttribute("clickv", "off");
      odivs[i].onclick = function() {
        // 點(diǎn)擊時(shí)，先獲取里面的積分文字，轉(zhuǎn)成數(shù)字類型
        var themVal = Number(this.getElementsByTagName("em")[0].innerText);
        // 這里判斷未點(diǎn)擊的點(diǎn)擊后，要處理的操作
        if (this.getAttribute("clickv") == "off") {
          emTal += themVal;
          this.className = "on";
          this.getElementsByTagName("p")[0].innerText = "已選擇";
          this.setAttribute("clickv", "on");
        } else {
         // 這里自然是已點(diǎn)擊過，再點(diǎn)擊的操作
          emTal -= themVal;
          this.className = "";
          this.getElementsByTagName("p")[0].innerText = "請(qǐng)選擇";
          this.setAttribute("clickv", "off");
        }
         // 這里自然是把點(diǎn)完后，變更的最終積分?jǐn)?shù)添加到頁(yè)面的結(jié)算里
        document.getElementById("talval").innerText = emTal;
        //  console.log(emTal)
      }
    }

js 備注已添加，相對(duì)來說還算詳細(xì)，有興趣的小伙伴可以嘗試實(shí)驗(yàn)下。加油吧?。?！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手