console
window.onload = function() {
var option = byclassName(document, 'option')[0];
var goods = byclassName(option, 'goods');
var box = byclassName(option, 'box');
var inpl = bytagName(option, 'input');
var btn = bytagName(option, 'button');
var gain = byclassName(option, 'gain');
var entry = byclassName(document, 'entry')[0];
var aul = bytagName(entry, 'ul')[0];
var add = byid('add');
for (var i = 0; i < btn.length; i++) {
btn[i].index = i;
btn[i].onclick = function() {
var sum = this.index;
gain[sum].className = 'gain active';
var img = bytagName(box[sum], 'img')[0];
var strong = bytagName(box[sum], 'strong')[0];
var span = bytagName(box[sum], 'span')[0];
var iNow = new Date(inpl[sum].value);
count(iNow, gain[sum], box[sum], img, strong, span);
};
}
function count(iNow, obj, box, img, strong, span) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var iNew = new Date();
var t = Math.floor((iNow - iNew) / 1000);
var str = judge(Math.floor(t % 86400 / 3600)) + '时' + judge(Math.floor(t % 86400 % 3600 / 60)) + '分' + judge(Math.floor(t % 60)) + '秒';
obj.innerHTML = str;
if (iNow <= new Date()) {
clearInterval(obj.timer);
obj.innerHTML = '已下架！';
shake(box, 'left', 0, function() {
box.className = 'box boxs';
move(box, 'top', 10, 150, function() {
aul.innerHTML += '<li><span>' + span.innerHTML + '</span><strong>' + strong.innerHTML + '</strong><img src=' + img.src + ' alt="图片"/></li>';
add.innerHTML = parseFloat(add.innerHTML) + parseFloat(strong.innerHTML.split('￥').join(''));
box.style.display = 'none';
});
});
return;
}
},
1000);
}
}
<title>
Document
</title>
<script src='http://my-code.nos-eastchina1.126.net/jsrun/warehouse.js'>
</script>
</head>
<body>
<div class="option">
<p>
限购时间
</p>
<div class="goods">
<div class='box'>
<input type="text" value='December 20,2017 12:55:22' />
<button>
begin...
</button>
<a href="javascript:;">
<img src="http://my-code.nos-eastchina1.126.net/jsrun/images/1.jpg" alt="商品图片"
/>
<em>
惊爆价 :
</em>
<strong>
￥2100.00
</strong>
<div class='spanbox'>
<span>
小米note 3 1600万美颜自拍，2倍变焦双摄
</span>
</div>
<div class='gain'>
</div>
</a>
</div>
</div>
<div class="goods">
<div class='box'>
<input type="text" value='December 20,2017 12:55:22' />
<button>
begin...
</button>
<a href="javascript:;">
<img src="http://my-code.nos-eastchina1.126.net/jsrun/images/2.jpg" alt="商品图片"
/>
<em>
惊爆价 :
</em>
<strong>
￥699.90
</strong>
<div class='spanbox'>
<span>
红米5A 8天超长待机，137g轻巧机身599元
</span>
</div>
<div class='gain'>
</div>
</a>
</div>
</div>
<div class="goods">
<div class='box'>
<input type="text" value='December 20,2017 12:55:12' />
<button>
begin...
</button>
<a href="javascript:;">
<img src="http://my-code.nos-eastchina1.126.net/jsrun/images/3.jpg" alt="商品图片"
/>
<em>
惊爆价 :
</em>
<strong>
￥6599.99
</strong>
<div class='spanbox'>
<span>
小米笔记本Pro 15.6英寸全金属强化机身
</span>
</div>
<div class='gain'>
</div>
</a>
</div>
</div>
<div class="goods">
<div class='box'>
<input type="text" value='December 20,2017 12:55:12' />
<button>
begin...
</button>
<a href="javascript:;">
<img src="http://my-code.nos-eastchina1.126.net/jsrun/images/4.jpg" alt="商品图片"
/>
<em>
惊爆价 :
</em>
<strong>
￥3299.00
</strong>
<div class='spanbox'>
<span>
小米MIX 2 全面屏2.0概念手机，5.99"大屏
</span>
</div>
<div class='gain'>
</div>
</a>
</div>
</div>
<div class="goods">
<div class='box'>
<input type="text" value='December 20,2017 12:55:12' />
<button>
begin...
</button>
<a href="javascript:;">
<img src="http://my-code.nos-eastchina1.126.net/jsrun/images/5.jpg" alt="商品图片"
/>
<em>
惊爆价 :
</em>
<strong>
￥2980.00
</strong>
<div class='spanbox'>
<span>
小米无人机 航拍利器
</span>
</div>
<div class='gain'>
</div>
</a>
</div>
</div>
</div>
<div class='entry'>
<ul>
</ul>
</div>
<div class='add'>
<span>
共计:
</span>
<div>
<strong id='add'>
0.00
</strong>
<em>
元
</em>
</div>
</div>
* {
margin: 0;
padding: 0;
}
body,
p {
font-family: '微软雅黑';
font-size: 16px;
color: #333;
}
.option {
width: 1190px;
height: 440px;
margin: 50px auto 0;
padding: 5px;
background-color: #E5E1E1;
}
.option p {
padding: 5px 20px;
border-bottom: 5px solid #ccc;
margin-bottom: 15px;
font-weight: bold;
}
.goods {
width: 200px;
height: 380px;
float: left;
margin: 0 18px;
border: 1px solid #ccc;
background: #F6F6F6 no-repeat center;
background-size: 200px;
box-shadow: 0;
background-image: url(http://my-code.nos-eastchina1.126.net/jsrun/images/Image.png);
-webkit-transition: transform 0.4s, box-shadow 0.8s;
-moz-transition: transform 0.4s, box-shadow 0.8s;
-o-transition: transform 0.4s, box-shadow 0.8s;
transition: transform 0.4s, box-shadow 0.8s;
}
.goods:hover {
transform: translate(0, -2px);
-webkit-transform: translate(0, -2px);
-moz-transform: translate(0, -2px);
-o-transform: translate(0, -2px);
box-shadow: 0px 3px 25px #5A5B57;
}
.goods .box {
width: 100%;
height: 100%;
position: relative;
visibility: visible;
-webkit-transition: visibility 0.3s 0.1s;
-moz-transition: visibility 0.3s 0.1s;
-o-transition: visibility 0.3s 0.1s;
transition: visibility 0.3s 0.1s;
}
.goods .boxs {
visibility: hidden;
}
.goods input {
width: 135px;
height: 25px;
vertical-align: top;
border: 0;
}
.goods button {
font-size: 16px;
vertical-align: top;
height: 25px;
padding-left: 3px;
}
.goods a {
display: inline-block;
width: 100%;
height: 360px;
text-decoration: none;
color: #333;
position: relative;
background-color: #F6F6F6;
margin-top: 2px;
}
.goods a img {
width: 200px;
height: 200px;
margin: 30px 0;
}
.goods a em {
font-size: 20px;
padding: 0 10px;
font-weight: bold;
color: red;
}
.goods a strong {
padding-right: 20px;
display: inline-block;
margin-bottom: 15px;
}
.goods a .spanbox {
padding: 0 15px;
position: absolute;
bottom: 10px;
left: 0;
height: 40px;
width: 170px;
}
.goods a span {
line-height: 20px;
font-size: 13px;
}
.goods a .gain {
position: absolute;
color: #fff;
top: 5px;
left: 0;
}
.goods a .active {
-webkit-animation: myfirst 0.8s;
-o-animation: myfirst 0.8s;
-moz-animation: myfirst 0.8s;
animation: myfirst 0.8s;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-moz-keyframes myfirst {
10% {
background: rgba(0, 0, 0, 0.0);
width: 10px;
height: 5px;
}
100% {
background: rgba(0, 0, 0, 0.6);
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
}
}
@-o-keyframes myfirst {
10% {
background: rgba(0, 0, 0, 0.0);
width: 10px;
height: 5px;
}
100% {
background: rgba(0, 0, 0, 0.6);
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
}
}
@-webkit-keyframes myfirst {
10% {
background: rgba(0, 0, 0, 0.0);
width: 10px;
height: 5px;
}
100% {
background: rgba(0, 0, 0, 0.6);
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
}
}
@keyframes myfirst {
10% {
background: rgba(0, 0, 0, 0.0);
width: 10px;
height: 5px;
}
100% {
background: rgba(0, 0, 0, 0.6);
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
}
}
.entry {
width: 1200px;
margin: 0 auto;
margin-top: 20px;
}
.entry ul {
list-style: none;
margin: 0;
padding: 0;
}
.entry ul li {
width: 1140px;
height: 70px;
background-color: #E5E1E1;
margin-top: 5px;
padding: 10px 30px;
text-align: center;
-webkit-transition: transform 0.4s, box-shadow 0.5s;
-moz-transition: transform 0.4s, box-shadow 0.5s;
-o-transition: transform 0.4s, box-shadow 0.5s;
transition: transform 0.4s, box-shadow 0.5s;
}
.entry ul li:hover {
transform: translate(0, -1px);
-webkit-transform: translate(0, -1px);
-moz-transform: translate(0, -1px);
-o-transform: translate(0, -1px);
box-shadow: 0px 2px 10px #5A5B57;
}
.entry ul li span,
.add span {
float: left;
line-height: 70px;
}
.entry ul li span {
width: 320px;
}
.entry ul li strong {
line-height: 70px;
}
.entry ul li img {
width: 70px;
height: 70px;
float: right;
}
.add {
width: 1100px;
margin: 20px auto;
padding: 0 50px;
height: 70px;
line-height: 70px;
background-color: #E5E1E1;
}
.add div {
float: right;
text-align: center;
}