此示例演示了如何为商品设置限购时间，当时间到达时，商品元素会抖动并下落至购物清单，同时计算总价。通过此demo，可以实践JavaScript函数封装和参数传递，涉及动画效果如移动、抖动和透明度变化。以下是实现效果和代码详情。
本文的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;
}
最低0.47元/天 解锁文章
5951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
