商品下架特效製作:定時器,倒數計時,抖動特效程式碼
.clear:after {
內容: '';
}
ul {
列表樣式:無;
邊距:100px auto 0;
填充:0;
# 心#000;
}
li {
內邊距:10px;
浮動:左;
寬度:300px;
# 寬度:300px;
# div {
文字對齊:置中;
}
li div:nth-of-type(2) {
邊距: 20px 0;
:nth-of-類型(2)跨度{
內邊界:10px;
背景:#e15671;
}
.text1 {
寬度: 240px;
}
li div:nth-of-type(3) {
內邊距: 20px;
行高: 40px;
}
.img {
寬度: 100px;
高度: 140px;# c 位置: 絕對;
左:-38px;
-左:61px;
# 上方:0;
-上方:76px;
1 寬度為寬度:396 寬度# 右:396px;
-高度: 198px;
不透明度: 0;
顯示:無;
# 寬度: 100%;
高度:100 %;
位置:絕對;
左:0;
背景:rgb(0,0,0);
不透明度: 0 ;
顯示:無;
}
/*li .sold_out {*/
84px;*/
/*上方: 134px;*/
/*寬度: 132px;*/
/*高度: 132px;*/##
.table {
margin: 30px auto 0;
width: 1300px;
}
tbody tr {
opacity: 0;
}
tbody img {
width: 50px;
height: 50px;
}
剩余:
0
0
:
0
0
:
0
0
iphone6s
抢购价:¥ 6000
剩余:
0
0
:
0
0
:
0
0
iMac
抢购价:¥ 19999
剩余:
0
0
:
0
0
:
0
0
ipod
抢购价:¥ 1000
剩余:
0
0
:
0
0
:
0
0
iWatch
抢购价:¥ 2000
商品 | 价格 | 图片 |
---|
<script></script>
var liElements = document.querySelectorAll ('li' );
var tbodyElements = document.querySelector('.table tbody');
liElements.forEach(function (li) {
soldOut(li);
#function sellOut(li) {
* 其中給予一個li一個邏輯處理
Selector('button ');
var text1Element = li.querySelector('.text1');
var maskElement = li.querySelector('.mask');
var. var timeSpanElement = li.querySelectorAll('.time span');
vargoodsName = li.querySelector('.goods_name').innerHTML;
vargoodsPrice = li.hquerySelector(' .goodinvarsPrice; ## var GoodsImg = li.querySelector('.img').src;
buttonElement.onclick = function( ) {
var times = parseInt(text1Element.value);
# var timeArr = setInterval(function () {
秒--;
##if (秒>= 0) {
'' 從秒 2099999999999%
time );
} else {
arInterval(timer );
timeOver();
}
}, 1000);
};
};
function timeOver() {
maskElement.style.display = 'block';
// , {
不透明度: 0.5
soldOutElement.style.display = 'block';
高度: 198,
左: 61,
與選擇 1, 10,0,0,0 )>
##setTimeout(function () {
搖晃(li, ' left', 20, 2);
}, 200);
}
##o/*
函數add2List() {
tbodyElements.innerHTML += '
var trElements = tbodyElements.querySelectorAll('tr');
目前最新一次新增的元素
// console.log(trElements[trElements.length - 1]);
// opacity: 1
// }, 100);
opacity: 1
}, 100);
}, 1000);
}
# * 將秒鐘轉換為時分格式為 秒# (seconds) {
var H = addZero(parseInt(seconds / 3600));
var M = addZero(parseInt(seconds % 3600 / 60)) 對# 是(seconds % 60));
}
function addZero(v) {
}
* 顫抖!
* */
function shake(element, attr, range, step) {
/*
1
/*
? var originValue = getCss(element, attr);
* 表示+或-
#var timer = setInterval(function () {
if (flag) {
//先負
} else {
element.style[ attr] = originValue + range + 'px';
//自減
clearInterval(timer);
#flag = !flag;
}, 16);
}
function getCss(element, attr) {