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

接上~

效果图：是通过移动ul的移动来进行，但是倒计时没有进行事实的改变~ 最后的时候能够进行禁用箭头的点击效果

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);})
})