您的位置:首页 > 其它

模仿了一个夸张的商品倒计时效果,设计的精简当然也很丑,只是为了检测自己说明问题

2016-12-09 21:41 597 查看
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#box{
width: 1002px;
margin: 100px auto;
box-shadow: 1px 1px 5px 1px;
}
#top{
width: 1000px;
height: 300px;
border: 1px solid black;
position: relative;
}
#top ul,li,input{
margin: 0;
padding: 0;
}
#top ul{
height: 300px;
position: absolute;
top: 0;
}
#top li{
border: 1px solid black;
display:inline-block;
list-style: none;
width: 250px;
height: 300px;
position: absolute;
opacity: 1;
}
input{
width: 160px;
}
.btn{
width: 80px;
}
#top li div{
width: 250px;
height: 300px;
opacity: 1;
position: absolute;
}
.xj{
background:#998a8a;
color:#fff;
text-align: center;
}
.time{

display: inline-block;
}

</style>
<script type="text/javascript" src="doMove.js"></script>
<script type="text/javascript" src="opacity.js"></script>
<script type="text/javascript" src="shake.js"></script>
<script type="text/javascript">
window.onload=function(){
var aLi=document.getElementsByTagName('li');
var middle=document.getElementById('middle');
var bottom=document.getElementById('bottom');
var oP=document.getElementsByTagName('p')[0];
var arrdiv=[];
for(var i=0;i<aLi.length;i++){
aLi[i].style.left=i*250+"px";
var aDiv=aLi[i].getElementsByTagName('div');
for(var j=0;j<aDiv.length;j++){
arrdiv.push(aDiv[j])}
}

var str="";
var timer0=null;
var timer1=null;
var timer2=null;
var timer3=null;
var time=document.getElementById('time');
var tmdiv=time.getElementsByTagName('div');
var aInp0=tmdiv[0].getElementsByTagName('input');
var aInp1=tmdiv[1].getElementsByTagName('input');
var aInp2=tmdiv[2].getElementsByTagName('input');
var aInp3=tmdiv[3].getElementsByTagName('input');
aInp0[1].onclick=function(){

timer0=setInterval(function(){
var mytime=new Date();
str=aInp0[0].value;
var future=new Date(str);
var sjc=(future-mytime)/1000;
if(sjc>=0){
tian=Math.floor(sjc/86400);
shi=Math.floor(sjc%86400/3600);
fen=Math.floor(sjc%86400%3600/60);
miao=Math.floor(sjc%60);
aInp0[2].value=add0(tian)+'天'+add0(shi)+'时'+add0(fen)+'分'+add0(miao)+'秒';
}else{
clearInterval(timer0);
spxj(arrdiv[0],aLi[0]);

}

},1000)
}

aInp1[1].onclick=function(){
timer1=setInterval(function(){
var mytime=new Date();
str=aInp1[0].value;
var future=new Date(str);
var sjc=(future-mytime)/1000;
if(sjc>=0){
tian=Math.floor(sjc/86400);
shi=Math.floor(sjc%86400/3600);
fen=Math.floor(sjc%86400%3600/60);
miao=Math.floor(sjc%60);
aInp1[2].value=add0(tian)+'天'+add0(shi)+'时'+add0(fen)+'分'+add0(miao)+'秒';
}else{
clearInterval(timer1);
spxj(arrdiv[1],aLi[1]);

}

},1000)
}

aInp2[1].onclick=function(){
timer2=setInterval(function(){
var mytime=new Date();
str=aInp2[0].value;
var future=new Date(str);
var sjc=(future-mytime)/1000;
if(sjc>=0){
tian=Math.floor(sjc/86400);
shi=Math.floor(sjc%86400/3600);
fen=Math.floor(sjc%86400%3600/60);
miao=Math.floor(sjc%60);
aInp2[2].value=add0(tian)+'天'+add0(shi)+'时'+add0(fen)+'分'+add0(miao)+'秒';
}else{
clearInterval(timer2);
spxj(arrdiv[2],aLi[2]);

}

},1000)
}

aInp3[1].onclick=function(){
timer3=setInterval(function(){
var mytime=new Date();
str=aInp3[0].value;
var future=new Date(str);
var sjc=(future-mytime)/1000;
if(sjc>=0){
tian=Math.floor(sjc/86400);
shi=Math.floor(sjc%86400/3600);
fen=Math.floor(sjc%86400%3600/60);
miao=Math.floor(sjc%60);
aInp3[2].value=add0(tian)+'天'+add0(shi)+'时'+add0(fen)+'分'+add0(miao)+'秒';
}else{
clearInterval(timer3);
spxj(arrdiv[3],aLi[3]);

}

},1000)
}
function spxj(obj,li){
var sum=0;
shake(obj,'left',function(){
doMove(obj,'top',5,300);
opacity(obj,0.01,0,function(){

li.className="xj";

li.innerHTML="该商品已下架";

middle.innerHTML+="<div style='background:"+obj.style.background+";width:1000px;height:30px'>"+obj.innerHTML+"</div>";
var omsp=middle.getElementsByTagName("span");

for(var a=0; a<omsp.length;a++){ sum+=Number(omsp[a].innerHTML)}

var obsp=bottom.getElementsByTagName("span")[0];

obsp.innerHTML=sum;

});
});
}//商品下架

function add0(n){
if(n<10){return n="0"+n}else{return n=""+n}
}//时间前加0

}
</script>
</head>
<body>
<div id="box">
<div id="time">
<div class="time">
<input type="text" value="December 22,2016 6:0:0">
<input class="btn" type="button" value="开始倒计时" ><br>
剩余时间:<input type="text">
</div>
<div class="time">
<input type="text" value="December 22,2016 6:0:0">
<input class="btn" type="button" value="开始倒计时"><br>
剩余时间:<input type="text">
</div>
<div class="time">
<input type="text" value="December 22,2016 6:0:0">
<input class="btn" type="button" value="开始倒计时"><br>
剩余时间:<input type="text">
</div>
<div class="time">
<input type="text" value="December 22,2016 6:0:0">
<input class="btn" type="button" value="开始倒计时"><br>
剩余时间:<input type="text">
</div>
</div>
<div id="top">
<ul>
<li><div style="background: pink">苹果<span>30</span>元</div></li><li>
<div style="background: yellow">香蕉<span>40</span>元</div></li><li>
<div style="background: orange">菠萝<span>50</span>元</div></li><li>
<div style="background: red">西瓜<span>60</span>元</div></li>
</ul>
</div>
<div id="middle"></div>
<div id="bottom">
<p>共计:<span>0</span>元</p>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: