Product removal special effects production: timer, countdown, dithering special effects code-JS Tutorial-php.cn

Title .clear:after { content: ''; display: block; clear: both; } ul { list-style: none; margin: 100px auto 0; padding: 0; width: 1300px; border: 1px solid #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; } li div:nth-of-type(2) span { padding: 10px; background: #e15671; color: white; border-radius: 10px; } .text1 { width: 240px; } li div:nth-of-type(3) { padding: 20px; } .goods_name { line-height: 40px; } .img { width: 100px; height: 140px; } li .sold_out { position: absolute; left: -38px; -left: 61px; top: 0; -top: 76px; width: 396px; -width: 198px; height: 396px; -height: 198px; opacity: 0; display: none; z-index: 999999; } li .mask { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 999; background: rgb(0,0,0); opacity: 0; display: none; } /*li .sold_out {*/ /*position: absolute;*/ /*left: 84px;*/ /*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 maskElement = li.querySelector('.mask'); var soldOutElement = li.querySelector('.sold_out'); var timeSpanElement = li.querySelectorAll('.time span');

var goodsName = li.querySelector('.goods_name').innerHTML; var goodsPrice = li.querySelector('.goods_price').innerHTML; var goodsImg = li.querySelector('.img').src;

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

/* * 把seconds变成时分秒的格式，并计算倒计时 * */ 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'; animation(maskElement, { opacity: 0.5 }, 500);

soldOutElement.style.display = 'block'; animation(soldOutElement, { width: 198, height: 198, left: 61, top: 76, opacity: 1 }, 500, 'bounceOut');

setTimeout(function () { shake(li, 'left', 20, 2); }, 200); }

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

tbodyElements.innerHTML += ' '+goodsName+' '+goodsPrice+' The latest element added

// console.log(trElements[trElements.length - 1]); // animation(trElements[trElements.length - 1], { // opacity: 1 // 100); }, 100); }, 1000);

}

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

return H + M + S; }

function addZero(v) { return (v }

/* * Tremble!

* */ function shake(element, attr, range, step) {

/*

* Get the position of the element before shaking * */ var OriginValue = getCSS (Element, Attr);

/* * Represents+or- **/ Var Flag = TRUE;

Var Timer = Setinterval (function () () {

if (flag) { element.style[ Attr] = Originvalue + Range + 'PX';

// Self -reduced Range- = STEP; ## If (Range & LT; = 0) { Element.style [ATTR] = originValue + 'px'; = originValue + 'px'; #}

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; } var d = duration || 1000; var obj = {}; for (var attr in attrs) {

obj[attr] = {}; 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'; } }

if (t == d) { clearInterval(ele.timer); ele.timer = null; callback(); }

}, 16); }