Title <br> .clear:after {<br> content: '';<br> display: block;<br> clear: both;<br> }<br> ul {<br> list-style: none;<br> margin: 100px auto 0;<br> padding: 0;<br> width: 1300px;<br> border: 1px solid #000;<br> }<br> li {<br> padding: 10px;<br> float: left;<br> width: 300px;<br> position: relative;<br> }<br> li div {<br> text-align: center;<br> }<br> li div:nth-of-type(2) {<br> margin: 20px 0;<br> text-align: center;<br> }<br> li div:nth-of-type(2) span {<br> padding: 10px;<br> background: #e15671;<br> color: white;<br> border-radius: 10px;<br> }<br> .text1 {<br> width: 240px;<br> }<br> li div:nth-of-type(3) {<br> padding: 20px;<br> }<br> .goods_name {<br> line-height: 40px;<br> }<br> .img {<br> width: 100px;<br> height: 140px;<br> }<br> li .sold_out {<br> position: absolute;<br> left: -38px;<br> -left: 61px;<br> top: 0;<br> -top: 76px;<br> width: 396px;<br> -width: 198px;<br> height: 396px;<br> -height: 198px;<br> opacity: 0;<br> display: none;<br> z-index: 999999;<br> }<br> li .mask {<br> width: 100%;<br> height: 100%;<br> position: absolute;<br> left: 0;<br> top: 0;<br> z-index: 999;<br> background: rgb(0,0,0);<br> opacity: 0;<br> display: none;<br> }<br> /*li .sold_out {*/<br> /*position: absolute;*/<br> /*left: 84px;*/<br> /*top: 134px;*/<br> /*width: 132px;*/<br> /*height: 132px;*/<br> /*}*/</p> <p>.table {<br> margin: 30px auto 0;<br> width: 1300px;<br> }<br> tbody tr {<br> opacity: 0;<br> }<br> tbody img {<br> width: 50px;<br> height: 50px;<br> }<br> 确定 剩余： 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 商品 价格 图片 </p> <p>var liElements = document.querySelectorAll('li');<br> var tbodyElements = document.querySelector('.table tbody');</p> <p>liElements.forEach(function (li) {<br> soldOut(li);<br> });</p> <p>function soldOut(li) {<br> /*<br> * 以其中给一个li来做逻辑处理<br> * */<br> var buttonElement = li.querySelector('button');<br> var text1Element = li.querySelector('.text1');<br> var maskElement = li.querySelector('.mask');<br> var soldOutElement = li.querySelector('.sold_out');<br> var timeSpanElement = li.querySelectorAll('.time span');</p> <p>var goodsName = li.querySelector('.goods_name').innerHTML;<br> var goodsPrice = li.querySelector('.goods_price').innerHTML;<br> var goodsImg = li.querySelector('.img').src;</p> <p>/*<br> * 点击按钮获取倒计时的时间<br> * */<br> buttonElement.onclick = function() {<br> var seconds = parseInt(text1Element.value);</p> <p>/*<br> * 把seconds变成时分秒的格式，并计算倒计时<br> * */<br> var timer = setInterval(function () {<br> seconds--;</p> <p>if (seconds >= 0) {<br> var timeArr = seconds2HMS(seconds).split('');</p> <p>timeArr.forEach(function (item, index) {<br> timeSpanElement[index].innerHTML = item;<br> });<br> } else {<br> //时间到了<br> clearInterval(timer);<br> timeOver();<br> add2List();<br> }</p> <p><br> }, 1000);</p> <p><br> };</p> <p>function timeOver() {<br> maskElement.style.display = 'block';<br>// maskElement.style.opacity = '0.5';<br> animation(maskElement, {<br> opacity: 0.5<br> }, 500);</p> <p>soldOutElement.style.display = 'block';<br> animation(soldOutElement, {<br> width: 198,<br> height: 198,<br> left: 61,<br> top: 76,<br> opacity: 1<br> }, 500, 'bounceOut');</p> <p>setTimeout(function () {<br> shake(li, 'left', 20, 2);<br> }, 200);<br> }</p> <p>/*<br> * 添加当前的商品信息到表格列表中<br> * */<br> function add2List() {</p> <p>tbodyElements.innerHTML += '<tr><td>'+goodsName+'</td><td>'+goodsPrice+'</td><td><img src="' +goodsImg+'"/> The latest element added</p>// console.log(trElements[trElements.length - 1]);<p>// animation(trElements[trElements.length - 1], {<br/>// opacity: 1 <br/>// 100); }, 100);<br/> }, 1000);<br/><br/>}</p> ; (seconds) {<p><br/>var H = addZero(parseInt(seconds / 3600));<br/> var M = addZero(parseInt(seconds % 3600 / 60));<br/> var S = addZero(parseInt (seconds % 60));<br/></p>return H + M + S;<p> }<br/></p>function addZero(v) {<p> return (v < 10 ? '0' : '') + v;<br/> }<br/><br/>/*<br/> * Tremble! </p> * */<p> function shake(element, attr, range, step) {<br/><br/>/*</p> * Get the position of the element before shaking<p> * */<br/> var OriginValue = getCSS (Element, Attr); </p>/* <p>* Represents+or-<br/>**/<br/> Var Flag = TRUE; </p><p> Var Timer = Setinterval (function () () {<br/><br/>if (flag) {<br/> element.style[ Attr] = Originvalue + Range + 'PX'; </p> // Self -reduced <p> Range- = STEP; <br/>## If (Range & LT; = 0) {<br/> Element.style [ATTR] = originValue + 'px';<br/> = originValue + 'px'; #}<br/><br/>function getCss(element, attr) {<br/> return parseFloat(element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element)[attr]); ;/script><br></body></p></html><p></p>function animation(ele, attrs, duration, fx, callback) {<p><br>if (ele. timer) {<br> return;<br> }<br> var d = duration || 1000;<br> var obj = {};<br> for (var attr in attrs) {</p> obj[attr] = {};<p> obj[attr].b = parseFloat(getComputedStyle(ele)[attr]); obj[attr].c = attrs[attr] - obj[attr].b;<br> }<br><br>var fx = fx || 'linear';<br> var callback = callback || function(){};</p> <p>var startTime = Date.now();</p> <p> ele.timer = setInterval(function () {</p> <p>var t = Date.now() - startTime;</p> <p>if (t >= d) {<br> t = d;<br> }<br><br>for (var attr in attrs) {<br> var value = Tween[fx](t, obj[attr].b, obj[attr].c, d);</p> <p>if (attr == 'opacity') {<br> ele.style[attr] = value;<br> } else {<br> ele.style[attr] = value + 'px';<br> }<br> }</p> <p>if (t == d) {<br> clearInterval(ele.timer);<br> ele.timer = null;<br> callback();<br> }</p> <p>}, 16);<br>}</p> <p>var Tween = {<br> linear: function (t, b, c, d){ //Constant speed<br> return c*t/d + b;<br> },<br> easeIn: function( t, b, c, d){ //Acceleration curve<br> return c*(t/=d)*t + b; //t/=d t = t / d<br> },<br> easeOut: function(t, b, c, d){ //Deceleration curve<br> return -c *(t/=d)*(t-2) + b;<br> },<br> easeBoth: function(t , b, c, d){ //Acceleration and deceleration curve<br> if ((t/=d/2) < 1) {<br> return c/2*t*t + b;<br> }<br> return -c/2 * ((--t)*(t-2) - 1) + b;<br> },<br> easeInStrong: function(t, b, c, d){ //Add Acceleration curve<br> return c*(t/=d)*t*t*t + b;<br> },<br> easeOutStrong: function(t, b, c, d){ //Deceleration curve<br> return -c * ((t=t/d-1)*t*t*t - 1) + b;<br> },<br> easeBothStrong: function(t, b, c, d){ / /Acceleration and deceleration curve<br> if ((t/=d/2) < 1) {<br> return c/2*t*t*t*t + b;<br> }<br> return -c/2 * ((t-=2)*t*t*t - 2) + b;<br> },<br> elasticIn: function(t, b, c, d, a, p){ / /Sinusoidal decay curve (bounce fade-in)<br> if (t === 0) {<br> return b; # Return b+c;<br> ) {<br> a = c;<br> var s = p/4;<br> } else {<br> var s = p/(2*Math.PI) * Math.asin (c/a); <br> }<br> return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;<br> },<br> elasticOut: function(t, b, c, d, a, p){ //Sine enhancement curve (bounce out)<br> if (t === 0) { <br> return b; p = d*0.3; <br>} <br> if (! a || a & lt; math.abs (c) {<br> a = c; <br> var s = p / 4; <br> } else {<br> var s = p/(2*Math.PI) * Math.asin (c/a);<br> var s = p/(2*Math.PI) * Math.asin (c/a); Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;<br> },<br> elasticBoth: function(t, b, c, d, a, p){ <br> if (t === 0) {<br> Return b; <br>} <br> if ((t /= d /2) == 2) {<br> Return b+c; <br> # a = c;<br> var s = p/4;<br> }<br> var s = p/(2*Math.PI) * Math.asin (c/a);<br> }<br> ’ ’ ’ s ’ to ’ t ’s through through out out through out out through out out out through out through over over over''''''‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐‐ ‐ ‐ ‐ ‐ 1) d-s)*(2*Math.PI)/p )) + b;<br> }<br> return a*Math.pow(2,-10*(t-=1)) Math.sin ( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;<br> },<br> backIn: function(t, b, c, d, s){ //Back Reverse acceleration (rewind and fade in)<br> if (typeof s == 'undefined') {<br> s = 1.70158;<br> }<br> return c*(t/=d)*t*((s+1)*t - s) + b;<br> },<br> backOut: function(t, b, c, d, s){<br> if (typeof s == 'undefined') {<br> s = 3.70158; //回缩的距离<br> }<br> return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;<br> },<br> backBoth: function(t, b, c, d, s){<br> if (typeof s == 'undefined') {<br> s = 1.70158;<br> }<br> if ((t /= d/2 ) < 1) {<br> return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;<br> }<br> return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;<br> },<br> bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出）<br> return c - Tween['bounceOut'](d-t, 0, c, d) + b;<br> },<br> bounceOut: function(t, b, c, d){<br> if ((t/=d) < (1/2.75)) {<br> return c*(7.5625*t*t) + b;<br> } else if (t < (2/2.75)) {<br> return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;<br> } else if (t < (2.5/2.75)) {<br> return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;<br> }<br> return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;<br> },<br> bounceBoth: function(t, b, c, d){<br> if (t < d/2) {<br> return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;<br> }<br> return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;<br> }<br>};</p> <p><img src="https://img.php.cn/upload/article/000/000/001/5fa6a5e10e00ce3232440358e691e233-0.gif" alt=""></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
