Production d'effets spéciaux de suppression de produit : minuterie, compte à rebours, code d'effets spéciaux de gigue-js tutoriel-php.cn

.clear:after { content: ''; affichage : bloquer; clear : les deux ; } ul { list-style : aucun; marge : 100px auto 0; padding : 0; width : 1300px; bordure : 1px solide #000; } li { remplissage : 10px; flotteur : gauche; largeur : 300px; position : relative; } li div { text-align: center; } li div:nth-of-type(2) { margin: 20px 0; li div:nième de- type(2) span { remplissage : 10px; arrière-plan : #e15671; couleur : blanc; rayon de bordure : 10px; } .text1 { largeur : 240 px; } li div:nth-of-type(3) { remplissage : 20px; } .goods_name { hauteur de ligne : 40 px ; } .img { largeur : 100 px; hauteur : 140px; } li .sold_out { position : absolue; gauche : -38px; -gauche : 61px; haut : 0; -haut : 76px; largeur : 396px; -wi dth : 198px; hauteur : 396px; -hauteur : 198px; opacité : 0; affichage : aucun; z-index : 999999; } li .mask { largeur : 100 %; hauteur : 100 %; position : absolue; gauche : 0; haut : 0; z-index : 999; rgb(0, 0,0); opacité : 0; affichage : aucun; > /*li .sold_out {*/ /*position : absolue;*/ /*gauche : */ /*haut: 134px;*/ /*largeur: 132px;*/ /*hauteur: 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

商品 价格 图片

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 marchandisesName = li.querySelector('.goods_name').innerHTML; 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--;

if (secondes >= 0) { var timeArr = secondes2HMS(secondes).split( '');

timeArr.forEach(function (item, index) { timeSpanElement[index].innerHTML = item; ); } autre { //时间到了 clearInterval(timer); timeOver(); add2List(); }

}, 1000);

};

function timeOver() { maskElement.style.display = 'block'; // maskElement.style.opacity = '0.5'; animation(maskElement, { opacité : 0,5 }, 500);

soldOutElement.style.display = 'block'; animation(soldOutElement, { largeur : 198, hauteur : 198, gauche : 61, haut : 76, opacité : 1 , 500, 'bounceOut');

setTimeout(function () { secouer (li, 'gauche', 20, 2); }, 200); }

/* * 添加当前的商品信息到表格列表中 * * / fonction add2List() {

tbodyElements.innerHTML += ' '+goodsName+' '+goodsPrice+' ';

var trElements = tbodyElements.querySelectorAll('tr'); Le dernier élément ajouté // console .log(trElements[trElements.length - 1]); // animation(trElements[trElements.length - 1], { // Opacité : 1 // }, 100);

}, 100); }, 1000);

} }

H MS (secondes) {

var H = addZero(parseInt(seconds / 3600)); var M = addZero(parseInt(seconds % 3600 / 60)); (secondes % 60));

return H + M + S; >

fonction addZero(v) { return (v }

/* * Trembler! * */

function shake(element, attr, range, step) { /* * 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';

élément. style[attr] = originValue + 'px'; > }, 16);

}

function getCss(element, attr) { return parseFloat( element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element)[attr]);/script>

function animation(ele , attrs, durée, fx, rappel) { 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 callback = callback | | function(){}; var startTime = Date.now();

ele.timer = setInterval(function () {

var t = Date.now () - startTime;

if (t >= d) { 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); }