<!DOCTYPE html><html><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="js/test.js"></script><style>* {margin: 0;padding: 0;}#con {width: 970px;}h2 {text-align: left;border-bottom: 2px solid #3a3a3a;}ul li {display: inline-block;list-style-type: none;width: 220px;border-right: 2px solid #3a3a3a;position: relative;top: 0;left: 0;}ul li a {display: block;text-decoration: none;color: #000;width: 200px;margin: 0 auto;}ul li p {text-align: center;}ul li img {display: block;width: 140px;height: 160px;margin: 0 auto;}ul li i {font-style: normal;font-size: 14px;color: #3a3a3a;}ul li span,#total {color: #F53035;}div>p {background: #3a3a3a;width: 970px;margin: 4px;}div>p>span {text-align: center;vertical-align: top;}div>p>span:first-child {display: inline-block;width: 260px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}div>p>span+span {display: inline-block;width: 140px;}div>p>img {width: 80px;height: 60px;border: 1px solid #F53035;float: right;margin-top: 20px;margin-right: 80px;}</style></head><body><div id="con"><h2>限购时间</h2><ul><li><input type="text" value="October 27 2016 14:25:10" /><input type="button" value="确定" /><p>剩余00天00时00分00秒</p><img src="images/淘宝商品广告效果/1.jpg" alt=""><a href="#">疯狂1111，美的微波炉下拉式微博略快来抢购</a><i>抢购价</i><span>￥5999.00</span></li><li><input type="text" value="October 27 2016 14:25:10" /><input type="button" value="确定" /><p>剩余00天00时00分00秒</p><img src="images/淘宝商品广告效果/2.jpg" alt=""><a href="#">疯狂1111，美的微波炉下拉式微博略快来抢购</a><i>抢购价</i><span>￥5999.00</span></li><li><input type="text" value="October 27 2016 14:25:10" /><input type="button" value="确定" /><p>剩余00天00时00分00秒</p><img src="images/淘宝商品广告效果/3.jpg" alt=""><a href="#">疯狂1111，美的微波炉下拉式微博略快来抢购</a><i>抢购价</i><span>￥5999.00</span></li><li><input type="text" value="October 27 2016 14:25:10" /><input type="button" value="确定" /><p>剩余00天00时00分00秒</p><img src="images/淘宝商品广告效果/4.jpg" alt=""><a href="#">疯狂1111，美的微波炉下拉式微博略快来抢购</a><i>抢购价</i><span>￥5999.00</span></li></ul></div><div id="shop"><p><span>商品名称</span><span>单价</span></p></div><b>总价：</b><span id="total">￥00.00</span><b>元</b><script>var oCon = document.getElementById('con'),aLi = oCon.getElementsByTagName('li'),aInput = oCon.getElementsByTagName('input'),aP = oCon.getElementsByTagName('p'),aImg = oCon.getElementsByTagName('img'),aA = oCon.getElementsByTagName('a'),aSpan = oCon.getElementsByTagName('span'),oShop = document.getElementById('shop'),oTotal = document.getElementById('total'),oldtimer = null,timer = null,iNew = null,iNow = null,str = '',t = 0,num = 0;for(var i=0;i<aLi.length;i++){aLi[i].onOff = true;aImg[i].timer = null;}for(var i=1;i<aInput.length;i+=2){aInput[i].index = i;aInput[i].onclick = function(){clearInterval(aImg[(num-1)/2].timer);num = this.index;iNew = new Date(aInput[num-1].value);aImg[(num-1)/2].timer = setInterval(function(){iNow = new Date();t = Math.floor((iNew - iNow)/1000);if(t>=0){str = "剩余"+Math.floor((t/86400))+"天"+Math.floor(t%86400/3600)+"时"+Math.floor(t%86400%3600/60)+"分"+toTwo(Math.floor(t%60))+'秒';aP[(num-1)/2].innerHTML = str;}else{clearInterval(aImg[(num-1)/2].timer);if(aLi[(num-1)/2].onOff){shake(aLi[(num-1)/2],'left',function(){doMove(aLi[(num-1)/2],'top',20,400);changeOpacity(aLi[(num-1)/2],0.2,0,function(){oShop.innerHTML += "<p><span style='line-height: 100px;'>"+aA[(num-1)/2].innerHTML+"</span><span style='line-height: 100px'>"+aSpan[(num-1)/2].innerHTML.substring(1,aSpan[(num-1)/2].innerHTML.length)+"</span><img src='"+aImg[(num-1)/2].src+"'alt=''></p>";});});}}},1000)}}</script></body></html>function doMove(obj,arrt,dir,target,endFn){ clearInterval(obj.timer); dir = parseInt(getStyle( obj,arrt )) > target ? -dir : dir; obj.timer = setInterval(function (){ var speed = parseInt(getStyle( obj,arrt )) + dir ; if( speed > target&&dir > 0 || speed < target&&dir < 0 ){ speed = target; } obj.style[arrt] = speed + 'px'; if(speed === target){ clearInterval(obj.timer); endFn&&endFn(); } },50)}function changeOpacity(obj,dir,target,endFn){ clearInterval(obj.opa); dir = parseFloat(getStyle( obj,'opacity' )) > target ? -dir : dir; obj.opa = setInterval(function (){ var speed = parseFloat(getStyle( obj,'opacity' )) + dir ; if( speed > target&&dir > 0 || speed < target&&dir < 0 ){ speed = target; } obj.style.opacity = speed; if(speed === target){ clearInterval(obj.opa); endFn&&endFn(); } },200)}function getShake(){ var _this = this; shake( _this,'top' );}function shake(obj,arrt,endFn){ clearInterval(obj.shake); var arr = [], num = 0; pos = parseInt(getStyle(obj,arrt)); for(var i = 20;i>0;i-=2){ arr.push(i,-i); } arr.push(0); if(obj.onOff){ obj.onOff = false; obj.shake = setInterval(function(){ obj.style[arrt] = pos + arr[num] + 'px'; num++; if(num === arr.length){ clearInterval(obj.shake); num = 0; obj.onOff = true; endFn&endFn(); } },50) }}function toTwo(n){ return n<10?"0"+n:""+n;}function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];}为什么不能4个倒计时不能分别执行？老师，同学，有空给看看啊
添加回答
举报
0/150
提交
取消