您的位置: 首页  >  文章  >  小米官网仿造（三）--jQuery（抢购部分）

小米官网仿造（三）--jQuery（抢购部分）

分类: 文章 • 2024-09-23 21:50:22

接上~

效果图：是通过移动ul的移动来进行，但是倒计时没有进行事实的改变~ 最后的时候能够进行禁用箭头的点击效果
小米官网仿造（三）--jQuery（抢购部分）
小米官网仿造（三）--jQuery（抢购部分）

html代码

  <div class="recommend">
    <!-- reconmend部分开始 -->
    <div class="reconmend w clearfix">
      <ul class="reconmendUl">
        <li class="reconmendBar">
          <ul>
            <li>
              <a href="#">
                <div class="iconfont">&#xe501;</div>
                <div>选购手机</div>
              </a>
            </li>
            <li>
              <div class="Barcolor"></div>
            </li>
            <li>
              <a href="#">
                <div class="iconfont">&#xe536;</div>
                <div>企业团购</div>
              </a>
            </li>
            <li>
              <div class="Barcolor"></div>
            </li>
            <li>
              <a href="#">
                <div class="iconfont">&#xe611;</div>
                <div>F码通道</div>
              </a>
            </li>
            <li>
              <div class="Barcolor" style="background:#5f5750"></div>
            </li>
            <li>
              <a href="#">
                <div class="iconfont">&#xe50a;</div>
                <div>米粉卡</div>
              </a>
            </li>
            <li>
              <div class="Barcolor"></div>
            </li>
            <li>
              <a href="#">
                <div class="iconfont">&#xe658;</div>
                <div>以旧换新</div>
              </a>
            </li>
            <li>
              <div class="Barcolor"></div>
            </li>
            <li>
              <a href="#">
                <div class="iconfont">&#xe61a;</div>
                <div>话费充值</div>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#"><img src="../upload/xmad_15381015124677_QcEGp.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="../upload/xmad_15410029988871_TdzPQ.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="../upload/xmad_15410599445473_Ivjsb.jpg" alt="" /></a>
        </li>
      </ul>
    </div>
    <!-- reconmend部分结束 -->
    <!-- 抢购部分开始 -->
    <div class="purchase w">
      <div class="purTop clearfix">
        <span class="fl">小米抢购</span>
        <div class="arrow fr">
          <button id="purArrowF" disabled="disabled">&lt;</button>
          <button id="purArrowR">&gt;</button>
        </div>
      </div>
      <div class="purBot clearfix">
        <div class="purL fl">
          <div class="chang">10:00场</div>
          <div class="putpic">
            <img src="../upload/flashpurchase.png " alt=" " />
          </div>
          <div class="juli">距离结束还有</div>
          <div class="time clearfix">
            <ul>
              <li id="shi">01</li>
              <li>:</li>
              <li id="fen">31</li>
              <li>:</li>
              <li id="miao">51</li>
            </ul>
          </div>
        </div>
        <div class="purR fr">
          <ul class="clearfix " id="purR-pro"></ul>
        </div>
      </div>
      <div>
        <a href="#">
          <img src="../upload/xmad_15464805744595_gfbXL.jpg " alt=" " style="width: 1226px;margin-top: 42px; margin-bottom: 42px" /></a>
      </div>
      <script src="../js/qianggou.js"></script>
    </div>
    <!-- 抢购部分结束 -->
  </div>

css

/* reconmend样式开始 */
.reconmend {
    height: 170px;
    margin-top: 40px;
    margin-bottom: 27px;
}

.reconmend .reconmendUl>li {
    float: left;
}

.reconmend .reconmendUl .reconmendBar {
    width: 233px;
    height: 170px;
    background-color: #5f5750;
    overflow: hidden;
}

.reconmend ul .reconmendBar ul {
    margin-left: 4px;
}

.reconmend ul .reconmendBar li {
    float: left;
    margin-left: 5px;
}

.reconmend ul .reconmendBar li:nth-child(even) {
    padding-top: 9px;
    height: 66px;
    ;
}

.reconmend ul .reconmendBar li:nth-child(even) div {
    width: 1px;
    height: 70px;
    background-color: #665e57;
}

.reconmend ul .reconmendBar li:nth-child(odd) {
    padding-top: 19px;
    padding-bottom: 19px;
    text-align: center;
    width: 64px;
    height: 47px;
    border-bottom: 1px solid #665e57;
}

.reconmend ul .reconmendBar li a {
    color: #fff;
}

.reconmend .reconmendUl>li:nth-child(2) {
    margin-left: 14px;
    margin-right: 14px;
}

.reconmend .reconmendUl>li:nth-child(3) {
    margin-right: 14px;
}

.reconmend .reconmendUl>li:nth-child(1) li {
    float: left;
    /* width: 79px; */
}

.reconmend .reconmendUl>li img {
    width: 316px;
    height: 170px;
}
/* reconmend样式结束 */
/* 抢购部分样式开始 */
.purTop {
    padding-top: 18px;
}

.purTop span {
    margin-bottom: 18px;
    font-size: 22px;
}

.purTop .arrow {
    padding-top: 8px;
}

.purTop .arrow button {
    width: 35px;
    height: 23px;
}

.purBot .purL {
    padding-top: 60px;
    /* padding-bottom: 48px; */
    width: 234px;
    text-align: center;
    height: 278px;
    background-color: #f1eded;
    border-top: 1px solid #e53935;
}

.purBot .purL .chang {
    font-size: 18px;
    margin-bottom: 34px;
}

.purBot .purL .juli {
    font-size: 14px;
    margin-top: 36px;
}

.purBot .time ul {
    list-style: none;
    /*设定宽度*/
    width: 168px;
    margin-top: 33px;
    margin-left: 33px;
}

.purBot .time ul li {
    float: left;
}

.purBot .time ul li:nth-child(odd) {
    width: 46px;
    background-color: #605751;
    height: 46px;
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #fff;
}

.purBot .time ul li:nth-child(even) {
    font-size: 4px;
    margin: 0 6px;
    margin-top: 17px;
}

.purBot .purR {
    overflow: hidden;
    width: 992px;
    height: 339px;
}

.purBot .purR ul {
    position: relative;
    width: 400%;
}

.purBot .purR li {
    float: left;
    padding-top: 40px;
    margin-left: 14px;
    width: 234px;
    height: 299px;
    text-align: center;
    background-color: #fff;
}

.purBot .purR li a img {
    margin-bottom: 33px;
    height: 158px;
}

.purBot .purR .purPrice {
    font-size: 12px;
    color: #fa7d09;
}

.purBot .purR li a>a {
    font-size: 12px;
    color: #822020;
}

.purBot .purR li a span:last-child {
    font-size: 12px;
    color: #adadad;
}
/* 抢购部分样式结束 */

jq：

$(function() {
    // 抢购部分开始
    // 倒计时部分
    var shiBox = $('#shi');
    var fenBox = $('#fen');
    var miaoBox = $('#miao');
    var hh = parseInt(shiBox.text())
    var mm = parseInt(fenBox.text())
    var ss = parseInt(miaoBox.text())
    var time = setInterval(function() {
        ss--;
        if (ss < 0) {
            ss = 59;
            mm--;
        }
        if (mm < 0) {
            mm = 59;
            hh--;
        }
        if (hh < 0) {
            hh = 0
        }
        var sss = ss < 10 ? '0' + ss : ss;
        var mmm = mm < 10 ? '0' + mm : mm;
        var hhh = hh < 10 ? '0' + hh : hh;
        shiBox.text(hhh)
        fenBox.text(mmm)
        miaoBox.text(sss)
        if (hh === 0 && mm === 0 && ss === 0) {
            clearInterval(timer);
            miaoBox.innerText = '了';
            fenBox.innerText = '束';
            shiBox.innerText = '结';
        }
    }, 1000)
    var purTemp = '';
    var purRArr = [{
        img: '../upload/05c5b22c8ae030b6c5de7d36114a32e4.jpg',
        name: '小米米家对讲机1S蓝色',
        intorduct: '再次出发，陪你轻聊一路',
        preic: '9.9元',
        before: '249元'
    }, {
        img: '../upload/90553f751c9eb6bda9a2ae7c4bce012b.jpg',
        name: '小米电视4A 58英寸 黑色',
        intorduct: '4K HDR，人工智能语音系统',
        preic: '2499元',
        before: '2999元'
    }, {
        img: '../upload/pms_1516011154.79573723.jpg',
        name: '小米电视4A 50英寸 黑色',
        intorduct: '4K HDR，人工智能语音系统',
        preic: '1899元',
        before: '2199元'
    }, {
        img: '../upload/553e9c2b-0023-e9a7-3bdb-26ec66a4007c.jpg',
        name: '小米移动电源10000mAh高配',
        intorduct: '轻薄设计，轻松出行',
        preic: '139元',
        before: '1499元'
    }, {
        img: '../upload/2e24730eb6fb2963b9b59493a6e5a0c7.jpg',
        name: '小米移动电源10000mAh高配',
        intorduct: '轻薄设计，轻松出行',
        preic: '139元',
        before: '1499元'
    }, {
        img: '../upload/3803a3bc-87b5-9ea8-a917-b753d429d1f4.jpg',
        name: '小米移动电源10000mAh高配',
        intorduct: '轻薄设计，轻松出行',
        preic: '139元',
        before: '1499元'
    }, {
        img: '../upload/761af25d-aebe-7568-dc6d-08e0690d69d2.png',
        name: '小米移动电源10000mAh高配',
        intorduct: '轻薄设计，轻松出行',
        preic: '139元',
        before: '1499元'
    }, {
        img: '../upload/ef88f3b004a4ca83b672896925e3d9fe.jpg',
        name: '小米移动电源10000mAh高配',
        intorduct: '轻薄设计，轻松出行',
        preic: '139元',
        before: '1499元'
    }, {
        img: '../upload/pms_1537842310.77778515.jpg',
        name: '小米移动电源10000mAh高配',
        intorduct: '轻薄设计，轻松出行',
        preic: '139元',
        before: '1499元'
    }, {
        img: '../upload/pms_1538191811.69072723.jpg',
        name: '小米移动电源10000mAh高配',
        intorduct: '轻薄设计，轻松出行',
        preic: '139元',
        before: '1499元'
    }, {
        img: '../upload/xmad_15281923207128_rOfDp.png',
        name: '小米移动电源10000mAh高配',
        intorduct: '轻薄设计，轻松出行',
        preic: '139元',
        before: '1499元'
    }, {
        img: '../upload/xmad_15350951136177_QUuVm.png',
        name: '小米移动电源10000mAh高配',
        intorduct: '轻薄设计，轻松出行',
        preic: '139元',
        before: '1499元'
    }]
    for (var i = 0; i < purRArr.length; i++) {
        purTemp += '<li>' +
            '<a href="#">' +
            '<img src="' + purRArr[i].img + '" alt=""><br/>' +
            '<a href="#">' + purRArr[i].name + '</a>' +
            '<div>' + purRArr[i].intorduct + '</div>' +
            '<span class="purPrice">' + purRArr[i].preic + '</span>' +
            '<span><del>' + purRArr[i].before + '</del></span>' +
            '</a>' +
            ' </li>'
    }
    $('#purR-pro').html(purTemp);
    // 随机数函数封装
    function getrad(n) {
        return Math.floor(Math.random() * (n + 1))
    }
    for (var i = 0; i < purRArr.length; i++) {
        $('#purR-pro li')[i].style.borderTop = '1px solid rgb(' + getrad(255) + ',' + getrad(255) + ',' + getrad(255) + ')'
    }
    var purRNum = 0
    $('.arrow #purArrowR').on('click', function() {
        purRNum++;
        $('#purR-pro').animate({ left: -992 * purRNum }, 1000);
        if (purRNum == 2) {
            $('#purArrowR').prop('disabled', true);
        };
        $('#purArrowF').prop('disabled', false);
    })
    $('.arrow #purArrowF').on('click', function() {
        if (purRNum <= 1) {
            $('#purArrowF').prop('disabled', true);
        };
        purRNum--;
        $('#purR-pro').animate({ left: -992 * purRNum }, 1000)
        $('#purArrowR').prop('disabled', false);
    })
})

相关推荐