定时器的问题，大家帮帮忙啊！！

<!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个倒计时不能分别执行？老师，同学，有空给看看啊

铃铛3

浏览 1086回答 1

1回答

随时随地看视频慕课网APP