商品价格图片

   

<script></p> <p>var liElements = document.querySelectorAll('li');<br>        var tbodyElements = 문서. querySelector('.table tbody');</p> <p>liElements.forEach(함수 (li) {<br>            soldOut(li);<br>        });</p> <p>function saleOut(li) {<br>            /*<br>             *以其中给一个li来做逻辑处리<br>             * */<br>            var buttonElement = li.querySelector('button');<br>            var text1Element = li.querySelector('.text1');<br>            var MaskElement = li.que rySelector('.mask');<br>            varoldOutElement = li.querySelector('.sold_out');<br>            var timeSpanElement = li.querySelectorAll('.timespan');</p> <p>var GoodsName = li.querySelector('.goods_name').innerHTML;<br>            var productsPrice = li.querySelector ('.goods_price').innerHTML;<br>            var GoodsImg = li.querySelector('.img').src;</p> <p>/*<br>             * 点击按钮获取倒计时的时间<br>            * */<br>            buttonElement.onclick = function() { <br>                var second =parseInt(text1Element.value);</p> <p>/*<br>                 * 把seconds变成时分秒的格式，并计算倒计时<br>                * */<br>                var 타이머 = setInterval(function () {<br>                    초--;</p> <p> if (초 >= 0) {<br>                        var timeArr = second2HMS(초).split('');</p> <p>timeArr.forEach(함수 (항목, 색인) {<br>                          timeSpanElement[index ].innerHTML = 항목;<br>                        }) ;<br>                  } else {<br>                        //时间到了<br>                        clearInterval(타이머);<br>            > <br>            };<br></p>function timeOver() {<p>                maskElement .style.display = 'block';<br>//            maskElement.style.opacity = '0.5';</p>                animation(maskElement, {<p>                    불투명도: 0.5<br>               }, 500);</p> <p>soldOutElement.style.display = '차단'; and 1,<br>                  상위: 76,<br>                    불투명도: 1<br>              }, 500, 'bounceOut');<br><br>setTimeout(function () {</p>                   흔들기 (li, '왼쪽', 20, 2);<p>                }, 200);<br>            }<br><br>/*<br>            * 添加当前的商品信息到表格列表中<br>            * */<br>            function add2List() {<br></p> <p>tbodyElements.innerHTML += '<tr><td>'+goodsName+'</td><td>'+goodsPrice+'</td><td><img src="'+goodsImg+ '"/></td></tr>';</p> <p>var trElements = tbodyElements.querySelectorAll('tr');<br>                                                          >                                / console.log(trElements[trElements.length - 1]);<br>// animation(trElements[trElements.length - 1], {<br>// 불투명도: 1<br>//             }, 100);<br></p>trElements.forEach( 함수(tr) {<p>                     animation(tr, {<br>                          불투명도: 1<br>                                       ‐ ‐ – – – – – -100); (초 % 3600 /60)); 초 % 60 ));<br><br>return H + M + S;</p> }<p><br>function addZero(v) {</p>                                                                   떨려요! " lement, attr);<p>               /*<br>               * 표시 + 또는 - <br>         * */<br>       var flag = true;<br></p>var 타이머 = setInterval(function () {<p><br>if (flag) {<br> | = OriginValue - 범위 + 'px';</p>                                                                                  범위 -= 단계;<p><br>if (범위 <= 0) {</p>                             element.style[ attr] = OriginValue + 'px';<p>                                      ~                   6);<br><br>}</p> <p>기능 getCss(element, attr) {<br>                 return parseFloat( element.currentStyle ? element.currentStyle[attr] : getCompulatedStyle(element)[attr]);<br>     }<br>   </script>


function animation(ele, attrs, Duration . = {};
          obj[attr].b =parseFloat(getCompulatedStyle(ele)[attr]);           obj[attr].c = attrs[attr] - obj[attr ].b;
}

var fx = fx || 'linear';
var callback = 콜백 || function(){};

var startTime = Date.now();

ele.timer = setInterval( 함수 () {

var t = Date.now () - startTime;

if (t>= d) {
, obj[attr].c, d);

if (attr == '불투명도') {
               ele.style[attr] = value;
           } else {
               ele.style[attr] = value + 'px';
           }
       }

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

}, 16);
}

var Tween = {
선형: 함수 (t, b, c, d){ //균일한 속도
        return c*t/d + b;
  },
 easeIn: 함수(t, b, c, d){ / /가속 곡선 t Return C*(t/= d)*t + b; // t/= d t/d
},
완화: 함수 (t, b, c, d) {// 감속 곡선
                                                                           사용 중          through out through out out through out out out through out through out off 's ' through ‐ to ‐ ‐‐‐‐‐ ,
to d를 사용하여 -c *(t/=d)*(t-2를 반환합니다. ) + b;
},
easyBoth: function(t, b, c, d){ },
easyInStrong: function(t, b, c, d){ //저크 곡선
      return c*(t/=d )*t*t*t + b;
},
 easeOutStrong: function(t, b, c, d) {// 속도 곡선 감소
return -c*((t = t/d -)*t* t*t -1) + b
},
Easebothstrong: 함수 (T, B, C, C, C, C, C, C, C, C, C, C, C, C, C, d){ //가속 및 감속 곡선
                                                                                                   > 2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: 함수(t, b, c, d, a, p){ //정현파 붕괴 곡선(바운스 기울기)
          if (t === 0) {
                 
            if (!p) {
              p =d*0.3 ;
                                                                                                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: function(t, b, c, d, a, p){ //정현파 향상 곡선(바운스 아웃)
if ( t = == 0) {
                 반환 b;                                                                           |
            a = c
          var s = p / 4;
      } else {
              var s = p/(2*Math.PI) * Math.asin (c/a);
} }
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(t, b, c, d, a, p){
                                                           사용 사용     사용 사용     사용 ' s ' 사용 ' 통해 ' 사용 ' 사용 사용 ' s ' 사용 통해 '' 통해 ‐‐‐‐‐ 2) {
                                                                    Math.abs(c) ) {
a = c;
        var s = p/4;
                                                                > >                 
      }
          반품 *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){ //뒤로 가속(되감기 페이드인)
        if (typeof s == 'undefine') {                       s = 1.70158;
       }
       return c*(t/=d)*t*((s+1)*t - s) + b;
   },
   backOut: function(t, b, c, d, s){
       if ( typeof s == '정의되지 않음') {
           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 == '정의되지 않음') {
           s = 1.70158;
       }
       if ((t /= d/2 ) < 1) {
          c/반품 2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
       }
       return 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;
   },
   bounceOut: function(t, b, c, d){
       if ((t/=d) < (1/2.75)) {
           return c*(7.5625*t*t) + b;
       } else if (t < (2/2.75)) {
           return c*(7.5625*(t-=(1.5/ 2.75))*t + 0.75) + b;
       } else if (t < (2.5/2.75)) {
           return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b ;
}} 반환 c*(7.5625*(t- = (2.625/2.75))*t + 0.984375) + b;
},
bounceboth : function (t, b, c, d) {
if (t & lt ; 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;
   }
};

위 내용은 제품제거 특수효과 제작 : 타이머, 카운트다운, 디더링 특수효과 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：nodeJS의 바이너리 버퍼 객체 인스턴스에 대한 자세한 설명다음 기사：nodeJS의 바이너리 버퍼 객체 인스턴스에 대한 자세한 설명

관련 기사

더보기