模仿了一个夸张的商品倒计时效果,设计的精简当然也很丑,只是为了检测自己说明问题
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>
相关文章推荐
- 快速申请Android6.0权限教程!
- 机器学习和数据挖掘推荐书单及简介
- 初入开发组(4)--一个程序员的成长史(19)
- ORB
- PAT--1076. Forwards on Weibo (30)(图的bfs遍历)
- flume学习(三):Flume Interceptors的使用
- STM32学习笔记7——浮点数四舍五入
- Hibernate1基本知识点
- 商业结算中的本票、支票、汇票
- 谈谈持续集成,持续交付,持续部署之间的区别
- 再谈select, iocp, epoll,kqueue及各种I/O复用机制
- 第4章 基于PSO并融合海事规则的已知动态路径规划方法
- JavaWeb前后台开发需要掌握和注意的一些知识点?
- 在redhat上安装MariaDB
- Loadrunner监控Apache
- Android中触摸屏圆点和十字中心位置不对称
- Technocup 2017 - Elimination Round 1 D 贪心
- Jsp详解
- web中异步和同步的理解
- 其他法西斯国家