商品 | 价格 | 图片 |
---|
var liElements = document.querySelectorAll ('li');
var tbodyElements = document.querySelector('.table tbody');
liElements.forEach(function (li) {
soldOut(li);
} );
fonction soldOut(li) {
/*
* 以其中给一个li来做逻辑处理
* */ var boutonElement = li.querySelector('bouton ');
var text1Element = li.querySelector('.text1');
var maskElement = li.querySelector('.mask');
var soldOutElement = li.querySelector('.sold_out') ;
var timeSpanElement = li.querySelectorAll('.time span');
var marchandisesPrice = li.querySelector(' .goods_price').innerHTML;
var marchandisesImg = li.querySelector('.img').src;
*
* */
buttonElement.onclick = function() {
var seconds = parseInt(text1Element.value);
* 把seconds变成时分秒的格式,并计算倒计时
* */
var timer = setInterval(function () {
secondes--;
var timeArr = secondes2HMS(secondes).split( '');
timeSpanElement[index].innerHTML = item;
);
} autre {
//时间到了
clearInterval(timer);
timeOver();
add2List();
}
}, 1000);
};
maskElement.style.display = 'block';
// maskElement.style.opacity = '0.5';
animation(maskElement, {
opacité : 0,5
}, 500);
animation(soldOutElement, {
largeur : 198,
hauteur : 198,
gauche : 61,
haut : 76,
opacité : 1
, 500, 'bounceOut');
secouer (li, 'gauche', 20, 2);
}, 200);
}
* 添加当前的商品信息到表格列表中
* * /
fonction add2List() {
tbodyElements.innerHTML += '
var trElements = tbodyElements.querySelectorAll('tr');
Le dernier élément ajouté
// console .log(trElements[trElements.length - 1]);
// animation(trElements[trElements.length - 1], {
// Opacité : 1
// }, 100);
}, 1000);
}
}
H MS (secondes) {
var M = addZero(parseInt(seconds % 3600 / 60)); (secondes % 60));
return H + M + S;
>
return (v < 10 ? '0' : '') + v;
}
* Trembler!
* */
/*
* Obtenez la position de l'élément avant de secouer
var originValue = getCss (élément, attr); function() {
if (drapeau) {
🎜> element.style[ attr] = originValue + range + 'px';
>
}, 16);
}
function getCss(element, attr) {
return parseFloat( element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element)[attr]);/script>
if (ele. timer) {
return;
obj[attr].b = parseFloat(getComputedStyle(ele)[attr ]); obj[attr].c = attrs[attr] - obj[attr].b;
}
var fx = fx || 'linéaire';
var startTime = Date.now();
ele.timer = setInterval(function () {
t = d;
}for (var attr in attrs) { var valeur = Tween[fx](t, obj[attr].b, obj[attr].c, d);
if (attr == 'opacité') {
ele.style[attr] = valeur;
} else {
ele.style[attr] = valeur + 'px';
}
}
if (t == d) {
clearInterval (ele.timer);
ele.timer = null;
callback ();
}
}, 16);
}
var Tween = {
linéaire : fonction (t, b, c, d){ //Vitesse constante
return c*t/d + b;
},
easyIn : fonction ( t, b, c, d){ //Courbe d'accélération
return c*(t/=d)*t + b; //t/=d t = t / d
},
easyOut : function(t, b, c, d){ //Courbe de décélération
return -c *(t/=d)*(t-2) + b;
},
easyBoth: function( t, b, c, d){ //Courbe d'accélération et de décélération
return -c/2 * ((--t)*(t-2) - 1) + b;
} ,
easyInStrong : function(t, b, c, d){ // Courbe de secousse
return c*(t/=d)*t*t*t + b;
},
easyOutStrong : function(t, b, c, d){ //Courbe de décélération
return -c * ((t=t/d-1)*t*t*t - 1) + b;
} ,
easyBothStrong: function(t, b, c, d){ //Courbe d'accélération et de décélération
if ((t/=d/2) < 1) {
return c/2*t *t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn : function(t, b, c, d, a, p){ //Courbe de décroissance sinusoïdale (fondu de rebond)
if (t === 0) {
return b 🎜> return b+ c;
}
if (!p) {
p=d*0.3 ; Math.abs(c )) {
a = c;
var s = p/4;
var s = p/(2*Math.PI) * Math.asin (c/a) ;
}
return -(a*Math.pow(2,10*(t-=1 )) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut : fonction(t, b, c, d, a, p ){ //Courbe de rehaussement sinusoïdal (rebond)
if (t === 0) {
return b; {
P = d*0.3;
}
if ( ! A || a & lt; math.abs (c)) {
a =
var s = p / 4;
* Math.sin( (t*d-s)*(2* Math.PI)/p ) + c + b;
},
elasticBoth : function(t, b, c, d, a, p) {
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0,3*1,5);> A = c;
var s = p/4;
Sinon {
var s = p/(2 * math.pi ) * math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1) ) *
Math.sin( (t *d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t -=1)) *
Math. sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn : function(t, b, c, d, s){ // Accélération de rembobinage (rembobinage progressif)
if (typeof s == 'indéfini') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut : function(t, b, c, d, s){
if (typeof s == 'indéfini') {
s = 3,70158 ; //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
} ,
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
>
if (( t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
retour c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn : function(t, b, c, d){ //弹球减振(弹球渐出)
return c - Tween['bounceOut'](d-t, 0, c, d) + b; < t*t) + b;
} sinon if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b ;
} sinon if (t < (2,5/2,75)) {
return c*(7,5625*(t-=(2,25/2,75))*t + 0,9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth : function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'] (t*2-d, 0, c, d) * 0,5 + c*0,5 + b;
}
};
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!