本文的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;
}