商品抢购时间倒计时结束后加入购物清单demo

本文的demo实现的功能有：给商品添加限购的时间，限购时间一到，商品就会抖动，然后掉落，商品购物清单中会加入这个下架的商品，并计算出总价格。

经过这个demo,可以练习的是js 中对函数的封装还有传参等练习，用到了一些动画，例如可以移动、抖动、改变透明度等。废话不多说，先看一下效果。

实现代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
padding: 0;
margin: 0;
}

ul {
padding: 0;
margin: 0;
}

li {
list-style: none;
}
/*
* 整个的大布局
*/

.wrap {
width: 800px;
margin: 0 auto;
}
/*
* 限购时间下方的线
*/

.line {
width: 800px;
height: 3px;
background: #303030;
}
/*
* 抢购商品列表的布局
*/

.shopDetails {
padding: 0;
margin: 0;
width: 800px;
height: 300px;
position: relative;
}
/*
* 单个抢购商品列表的布局
*/

.shopDetails li {
width: 199px;
height: 300px;
position: relative;
float: left;
border-right: 1px solid #B1B1B1;
}
/*
* 抢购商品的输入限购时间的布局
*/

.t1 {
width: 120px;
height: 30px;
background: #F1F1EB;
}
/*
* 抢购商品输入时间后的确定的布局
*/

.t2 {
width: 40px;
height: 30px;
color: #843534;
background: #FFFFFF;
border: none;
font-size: 16px;
font-weight: bold;
}
/*
* 列表中单个抢购商品的大布局
*/

.item {
text-align: center;
height: 260px;
position: absolute;
width: 179px;
top: 0;
opacity: 1;
padding: 10px 10px;
}
/*
* 抢购商品中显示剩余时间和商品描述的布局
*/

.item p {
font-size: 12px;
color: #777777;
}
/*
* 让抢购商品中显示商品描述的p的文字在左侧显示
*/

.item p:last-of-type {
text-align: left;
}
/*
* 单个抢购商品中商品的图片的布局
*/

.item img {
width: 160px;
height: 100px;
}
/*
* 单个抢购商品中抢购价的样式
*/

.item strong {
font-size: 12px;
color: #B1B1B1;
}
/*
* 单个抢购商品中价钱的样式
*/

.item span {
font-size: 12px;
color: red;
}
/*
* 当商品下架时显示的图片的样式
*/

.under {
height: 260px;
width: 190px;
display: none;
}
/*
* 下方下架商品列表的头部商品名称和价钱的样式
*/

.title {
width: 800px;
background-color: #F1F1F1;
color: #843534;
height: 30px;
line-height: 30px;
margin: 0 auto;
}
/*
* 头部单个li的样式
*/

.title li {
width: 200px;
height: 30px;
float: left;
text-align: center;
}
/*
* 显示下架商品列表的大布局
*/

.shoppingCar {
width: 800px;
padding: 5px 0;
margin: 0;
}
/*
* 单个下架商品
*/

.shoppingCar li {
width: 780px;
height: 80px;
line-height: 80px;
padding: 0 10px;
background: #F1F1F1;
margin: 0 0 5px 0;
}
/*
* 单个下架商品的布局
*/

.shopItem {
width: 780px;
height: 80px;
line-height: 80px;
}
/*
* 下架商品的商品描述
*/

.shopItem p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 190px;
height: 80px;
display: inline-block;
float: left;
margin: 0;
}
/*
* 下架商品的商品价钱
*/

.shopItem span {
width: 200px;
height: 80px;
display: inline-block;
float: left;
color: red;
text-align: center;
}
/*
* 下架商品的商品图片
*/

.shopItem img {
width: 120px;
height: 70px;
margin: 5px 60px;
float: right;
}
/*
* 显示总价
*/

.wrap span {
color: red;
}
</style>
<script>
window.onload = function() {

//定义数组用于存放抢购商品的商品图片
var arrImg = ['img/news.jpg',
'img/news1.jpg',
'img/news2.jpg',
'img/imooc.png'
];

//定义数组用于存放抢购商品的商品描述
var arrP = ['疯狂599,美的爆款微波炉，下拉门散热效果好',
'疯狂3999，海尔洗衣机，智能洗衣，除菌除螨，放心使用',
'索尼电视机，超大弧度屏幕，感受家庭影院般的音效',
'学习用书，让你在知识的海洋里畅游'
];

//定义数组用于存放抢购商品的商品价钱
var aMoney = [599,
3399,
5500,
30
];

var oShopDetailsUl = document.getElementById('shopDetails'); //获取抢购商品的列表
var aDiv = oShopDetailsUl.getElementsByTagName('div'); //获取所有抢购商品的布局div
var aLi = oShopDetailsUl.getElementsByTagName('li'); //获取抢购商品下的所有li
var iNow = null; //定义一个变量用于存放现在的时间

var t = 0; //用于存放未来设定的时间与现在时间的差
var str = '';
var timer = null; //倒计时的timer
var timerMove = null; //移动的timer
var timerOpcity = null; //改变透明度的timer
var timerShake = null; //抖动的timer
var oShoppingCarUl = document.getElementById('shoppingCar'); //获取下架商品列表
var oDiv = document.getElementById('wrap');
var oSpan = oDiv.getElementsByTagName('span')[0]; //总价的ospan
var totalMoney = 0; //总价之和

/*
* 动态往页面添加抢购商品的信息
*/
for(var i = 0; i < aDiv.length; i++) {
aDiv[i].innerHTML = "<input type='text' class='t1' value='December 3,2017 10:00:00' /><input type='button' value='确定' class='t2' /><p>剩余00天00时00分00秒</p>" + "<img src=" + arrImg[i] + "/>" + "<p>" + arrP[i] + "</p><strong>抢购价:</strong><span>" + aMoney[i] + "</span>";
aDiv[i].index = i;
aDiv[i].style.left = 0 + 'px';

}

for(var i = 0; i < aDiv.length; i++) {
//给每个抢购商品添加倒计时功能
Sure(aDiv[i], function(oDiv) {
//倒计时结束后给其添加抖动的功能
shake(oDiv, 'left', function(oDiv) {

var oUnderImg = aLi[oDiv.index].getElementsByTagName('img')[0];
oUnderImg.style.display = 'block'; //抖动后，让下架的图片显示出来
doMove(oDiv, 'top', 30, 300); //抖动后，给其添加移动的功能
//抖动后给其添加改变透明度的功能，让其能边移动边改变透明度
changeOpcity(oDiv, 0.1, 0, function(oDiv) {
addShoppingItem(oDiv);
totalMoney += parseFloat(oDiv.getElementsByTagName('span')[0].innerHTML);
oSpan.innerHTML = totalMoney + '元';
});
});
});
}
/**
* 使div 移动的函数
* @param obj 对象，让谁移动 , attr 属性, dir 每次移动的距离, target 目标点移动到哪里停止，endFn 回调函数，移动后做的事
*/
function doMove(obj, attr, dir, target, endFn) {
clearInterval(obj.timerMove); //清理定时器
//开启定时器
obj.timerMove = setInterval(function() {
var speed = parseInt(getObjStyle(obj, attr)) + dir;
if(speed > target) {
speed = target;
}
obj.style[attr] = speed + 'px';
if(speed == target) {
clearInterval(obj.timerMove);
endFn && endFn();
}
}, 100);
}
/*
* 改变div 的透明度的变化
* @param obj 对象，让谁改变 ,dir 每次改变的大小, target 改变到哪种程度停止，endFn 回调函数，改变透明度后做的事
*/
function changeOpcity(obj, dir, target, endFn) {
clearInterval(obj.timerOpcity);
obj.timerOpcity = setInterval(function() {
var iOpcity = parseFloat(getObjStyle(obj, 'opacity') - dir);
if(iOpcity < target) {
iOpcity = target;
}
obj.style.opacity = iOpcity;
if(iOpcity == target) {
clearInterval(obj.timerOpcity);
endFn && endFn(obj);
}
}, 100);
}

/*
* 返回元素属性的值
* @param obj 对象，attr 属性
*/
function getObjStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
/*
* 设定倒计时
* @param oDiv 对象，endFn 回调函数
*/
function Sure(oDiv, endFn) {
var aInputs = oDiv.getElementsByTagName('input');
var aP = oDiv.getElementsByTagName('p');

aInputs[1].onclick = function() {
var iNew = new Date(aInputs[0].value);
clearInterval(timer);
oDiv.timer = setInterval(function() {
iNow = new Date();
t = Math.floor((iNew - iNow) / 1000);
if(t >= 0) {
str = '剩余' + Math.floor(t / 86400) + '天' + Math.floor(t % 86400 / 3600) + '时' + Math.floor(t % 86400 % 3600 / 60) + '分' + t % 60 + '秒';
aP[0].innerHTML = str;
} else {
clearInterval(oDiv.timer);
endFn && endFn(oDiv);
}
}, 1000);
};

}

/*
* 使商品div 抖动的函数
* @param obj 对象，attr 属性，endFn 回调函数
*/
function shake(obj, attr, endFn) {
var arr = [];
var numShake = 0;
for(var i = 10; i > 0; i -= 2) {
arr.push(i, -i);
}
arr.push(0);
clearInterval(obj.timerShake);
var pos = parseInt(getObjStyle(obj, attr));
obj.timerShake = setInterval(function() {
obj.style[attr] = pos + arr[numShake] + 'px';
numShake++;
if(numShake == arr.length) {
clearInterval(obj.timerShake);
endFn && endFn(obj);
}
}, 50);

}

/*
* 当剩余时间为0的时候添加下方的物品
*/
function addShoppingItem(oDiv) {
var oShoppingCarP = oDiv.getElementsByTagName('p')[1];
var oShoppingCarSpan = oDiv.getElementsByTagName('span')[0];
var oShoppingCarImg = oDiv.getElementsByTagName('img')[0].src;

oShoppingCarUl.innerHTML += "<li><div class='shopItem'><p>" + oShoppingCarP.innerHTML + "</p><span>" + oShoppingCarSpan.innerHTML + "</span><img src=" + oShoppingCarImg + " /></div></li>";
}
};
</script>
</head>

<body>

<div class="wrap" id="wrap">
<h2>限购时间</h2>
<div class="line"></div>


<ul class="shopDetails" id="shopDetails">
<li>
<img src="img/under.jpg" class="under" />


<div class="item">

</div>

</li>
<li>
<img src="img/under.jpg" class="under" />
<div class="item">

</div>
</li>
<li>
<img src="img/under.jpg" class="under" />
<div class="item">

</div>
</li>
<li>
<img src="img/under.jpg" class="under" />
<div class="item">

</div>
</li>
</ul>


<ul class="title">
<li>商品名称</li>
<li>价钱</li>
</ul>


<ul class="shoppingCar" id="shoppingCar">

</ul>

<strong>总价:</strong>
<span></span>
</div>

</body>

</html>