<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="section">
<h2 class="tit">限时抢购</h2>
<div class="wrap">
<div class="wrap_bar">
<div class="bar">
<div class="inputs">
<input type="text" />
<input type="button" value="确定" />
</div>
<p class = "showTimer">剩余00天00时00分00秒</p>
<div class="content">
<a href="#"><img src="img/pic.jpg" /></a>
<h3>商品标题商品标题商品标题商品标题</h3>
<span>抢购价：</span>
<a class="prise">￥<span>145</span></a>
</div>
</div>
</div>
<div class="wrap_bar">
<div class="bar">
<div class="inputs">
<input type="text" />
<input type="button" value="确定" />
</div>
<p class = "showTimer">剩余00天00时00分00秒</p>
<div class="content">
<a href="#"><img src="img/pic.jpg" /></a>
<h3>商品标题商品标题商品标题商品标题</h3>
<span>抢购价：</span>
<a class="prise">￥<span>145</span></a>
</div>
</div>
</div>
<div class="wrap_bar">
<div class="bar">
<div class="inputs">
<input type="text" />
<input type="button" value="确定" />
</div>
<p class = "showTimer">剩余00天00时00分00秒</p>
<div class="content">
<a href="#"><img src="img/pic.jpg" /></a>
<h3>商品标题商品标题商品标题商品标题</h3>
<span>抢购价：</span>
<a class="prise">￥<span>145</span></a>
</div>
</div>
</div>
<div class="wrap_bar la">
<div class="bar">
<div class="inputs">
<input type="text" />
<input type="button" value="确定" />
</div>
<p class = "showTimer">剩余00天00时00分00秒</p>
<div class="content">
<a href="#"><img src="img/pic.jpg" /></a>
<h3>商品标题商品标题商品标题商品标题</h3>
<span>抢购价：</span>
<a class="prise">￥<span>145</span></a>
</div>
</div>
</div>
</div>
<div class="cart">
<div class="sellTit">
<span>商品名称</span>
<span>价钱</span>
</div>
<div id="sellItem">
<!-- 由js生成倒计时完成的商品条目 -->
</div>
<p>总价：<span id="sumPrise">0</span>元</p>
</div>
</div>
</div>
<script src="doMove.js"></script>
<script src="getId.js"></script>
<!-- <script src="shake.js"></script> -->
<script src="main.js"></script>
</body>
</html>
$(function(){
var oBar = $class('div','bar'); //主要被操作的div
var oContent = $class('div','content'); //商品条目父级div
var oInputDiv = $class('div','inputs'); //输入框按钮的父级div
var oP = $class('p','showTimer'); //显示倒计时的p标签
var oPrise = $('sumPrise'); //商品总价标签
//引子 点击调用倒计时函数
for(var i=0,len=oInputDiv.length; i<len; i++){
//同步事件可以在外面获取按钮
var oBtn = oInputDiv[i].getElementsByTagName('input')[1];
oBtn.index = i;
oBtn.onclick = function(){
//异步事件只能点击了再获取
//获取输入框的内容
//传入setTime倒计时函数
var oInput = oInputDiv[this.index].getElementsByTagName('input')[0].value;
setTime(oInput,this.index);
}
}
//'August 10,2018 1:54:50'
//倒计时函数 回调抖动函数 ---> 抖动回调下滑透明度函数 ----> 透明度回调增加商品条目函数
function setTime(Dates,index){
// 终点时间只用获取一次
// nP为对应的倒计时p标签
var endDate = new Date(Dates);
var nP = oP[index];
//避免定时器重叠，主要清除timer2
clearTimeout(nP.timer);
clearTimeout(nP.timer2);
nP.timer = setTimeout(function timeCnt(){
//****t：相差秒数; 以及后面的相关计算，每次都要计算一次
var newDate = new Date();
var t = Math.floor( (endDate-newDate)/1000 );
var mDay = Math.floor( t/86400 );
var mHour = Math.floor( t%86400/3600 );
var mMin = Math.floor( t%86400%3600/60 );
var mSec = t%60;
////
//赋值
var str = '剩余'+mDay+'天'+mHour+'时'+mMin+'分'+mSec+'秒'
nP.innerHTML = str;
//重复执行
nP.timer2 = setTimeout(timeCnt,1000);
//****t == 0表示倒计时结束
if( t == 0 ){
clearTimeout(nP.timer2);
//****bar抖动完成回调 【下滑】 和 【透明度】 变化两个函数，透明度回调 【添加条目函数】
shake( oBar[index],'left',function(){
doMove( oBar[index],'top',5,130,0,30 );
tOpacity(oBar[index],-0.05,function(){
addItem(index);
});
});
}
////if结束
},0);
}
//抖动函数
function shake( obj,attr,endFn ){
//****抖动参数
var arr = [];
for(var i=10; i>0; i-=1 ){
arr.push( i,-i );
}
arr.push(0);
////
//
// obj.onOff = true;
var i=0;
var oAttr = parseInt( getStyle(obj,attr) );
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//*****基本的改值赋值操作
oAttr += arr[i];
i++;
obj.style[attr] = oAttr + 'px';
//*****
//如果左右抖动停止就执行回调函数
if( arr[i] == 0 ){
(endFn) && (endFn());
}
//*****
},30);
}
//透明度函数
function tOpacity(obj,attr,endFn){
//attr字符串转数字类型
attr = parseFloat(attr);
var arug = null;
setTimeout(function timer(){
//****取当前值，改变当前值，赋值
arug = parseFloat( getStyle(obj,'opacity') );
arug += attr;
obj.style.opacity = arug;
////
//透明度为0停止变化执行回调
if( arug != 0 ){
setTimeout(timer,30);
}else{
obj.style.display = 'none';
endFn();
}
},30);
}
//增加商品条目函数 ----> 回调计算价格函数
function addItem(index){
//找到商品条目父级标签
var oParent = $('sellItem');
//****创建出单个item包含的节点
var eDiv = document.createElement('div');
var eH3 = document.createElement('h3');
var eSpan = document.createElement('span');
var eImg = document.createElement('img');
////
//****找到当前bar的商品数据，标题，价格，图片
var eH3txt = oContent[index].getElementsByTagName('h3')[0].innerHTML;
var eSpantxt = oContent[index].getElementsByTagName('a')[1].getElementsByTagName('span')[0].innerHTML;
var eImgtxt = oContent[index].getElementsByTagName('img')[0].src;
////
//****设置item标签的class属性，给标题赋值，价格赋值，图片地址赋值
eDiv.setAttribute('class','item');
eH3.innerHTML = eH3txt;
eSpan.innerHTML = '￥'+ eSpantxt;
eImg.setAttribute('src',eImgtxt);
////
//****按顺序追加到item里
eDiv.append(eH3);
eDiv.append(eSpan);
eDiv.append(eImg);
oParent.append(eDiv);
////
//价格计算回调，传入bar获取到的数据
counter(eSpantxt);
}
//计算价格函数
function counter(prise){
//转成number类型
prise = parseFloat(prise);
//现有价格转成number类型
var oNum = parseFloat(oPrise.innerHTML);
//计算赋值
oNum += prise;
oPrise.innerHTML = oNum;
}
});
需求：
需求分析：【倒计时】 --> 【对应条目抖动】 --> 【抖动完后下滑并透明】 --> 【完全透明后增加一个条目】 --> 【增加条目后计算总价】
实现思路：
倒计时部分课上有讲，主要是怎样点击按钮后获得输入框的内容会方便点，在HTML里我把输入框和按钮放在一个div里，这样就可以用getElementsByTagName()[]下标来获取，获取到的值传入倒计时函数，倒计时函数经过一些处理后，每秒计算的值放入到显示的p标签，这里要保证p标签的顺序是和输入框按钮的顺序是一样的，因为这里也是通过下标来找。
然后就是倒计时结束后清除定时器，回调抖动函数，抖动结束后回调下滑和透明度变化函数，透明度结束后回调增加商品条目函数，商品条目结束后回调计算总价函数，总共回调5次。
难点：回调太多，不可避免
难点解决方案：将回调函数独立成有名字的函数，通过传参来使用，避免缩进太多
解决不了的难点：回调好像是无法避免的，叫回调地狱，除了上一条的解决方案，还有ES6的promise来解决
涉及到的新知识：ES6的promise解决回调地狱
备注：回调嵌套容易出问题，如果某层修改了一点会整条链子卡在那里，而且deBug不好做
找段时间做一个向某个方向渐移渐隐的函数
转载于:
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
