Produktion von Spezialeffekten zur Produktentfernung: Timer, Countdown, Dithering-Spezialeffektcode-js-Tutorial-php.cn

.clear:after { content: ''; display: block; clear: Both; } ul { list-style: none; margin: 100px auto 0; padding: 0; width: 1300px; Rahmen: 1 Pixel durchgezogen #000; } li { padding: 10px; float: left; width: 300px; position: relative; } li div { text-align: center; } li div:nth-of-type(2) { margin: 20px 0; text-align: center; div:nth-of- type(2) span { padding: 10px; background: #e15671; color: weiß; border-radius: 10px; } .text1 { Breite: 240 Pixel; Zeilenhöhe: 40px; } .img { width: 100px; height: 140px; } li { Position: absolut; links: -38px; -left: 61px; top: 0; -top: 76px; width: 396px; -wi dth: 198px; height: 396px; -height: 198px; Deckkraft: 0; Anzeige: keine; z-index: 999999; } li .mask. { Breite: 100 %; Höhe: 100 %; Position: absolut; links: 0; oben: 0; z-index: 999; Hintergrund: rgb(0 ,0,0); Deckkraft : 0; 🎜> /*top: 134px;*/ /*width: 132px;*/ /*height: 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); } );

function soldOut(li) { /* * 以其中给一个li来做逻辑处理 * */ var buttonElement = li.querySelector('button '); var text1Element = li.QuerySelector('.text1'); ; var timeSpanElement = li.querySelectorAll('.time span');

var warenName = li.querySelector('.goods_name').innerHTML;

var warenPreis = li.querySelector(' .goods_price').innerHTML; vargoodsImg = li.querySelector('.img').src;

/*

* 点击按钮获取倒计时的时间 * */ buttonElement.onclick = function() { var seconds = parseInt(text1Element.value);

/*

* Sekunden的格式，并计算倒计时 * */ var timer = setInterval(function () { seconds--;

if (seconds >= 0) {

var timeArr = seconds2HMS(seconds).split( ''); timeArr.forEach(function (item, index) {

timeSpanElement[index].innerHTML = item; }); } else { //时间到了 clearInterval(timer); timeOver(); add2List(); }

}, 1000);

}; function timeOver() {

maskElement.style.display = 'block'; // maskElement.style.opacity = '0.5'; anim ation(maskElement, { Deckkraft: 0,5 }, 500);

soldOutElement.style.display = 'block';

animation(soldOutElement, { Breite: 198, Höhe: 198, links: 61, oben: 76, Deckkraft: }, 500, 'bounceOut');

setTimeout(function () { shake (li, 'links', 20, 2);

}, 200); }

/* * 添加当前的商品信息到表格列表中

* * / function add2List() {

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

var trElements = tbodyElements.querySelectorAll('tr'); Das zuletzt hinzugefügte Element // Konsole .log(trElements[trElements.length - 1]); // animation(trElements[trElements.length - 1], { // Deckkraft: 1 // }, 100);

& HMS (Sekunden) { var H = addZero(parseInt(seconds / 3600)); var M = addZero(parseInt(seconds % 3600 / 60)); (seconds % 60));

return H + M + S;

} function addZero(v) {

return (v }

/* * Zittern! * */

function shake(element, attr, range, step) { /* * Ermitteln Sie die Position des Elements vor dem Schütteln

* */ var originValue = getCss (element, attr); function() {

if (flag) { 🎜> element.style[ attr] = originValue + range + 'px'; Element. style[attr] = originValue + 'px'; >

}, 16); }

function getCss(element, attr) {

return parseFloat( element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element)[attr]); ;/script> function animation(ele , attrs, duration, fx, callback) {

if (ele. timer) { return; = {}; obj[attr].b = parseFloat(getComputedStyle(ele)[attr ]); obj[attr].c = attrs[attr] - obj[attr].b; }

var fx = fx || 'linear'; 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 value = Tween[fx](t, obj[attr].b, obj[attr].c, d);

if (attr == 'opacity') { ele.style[attr] = value; } else { ele.style[attr] = value + 'px'; } }

}, 16); }