当前位置：你问我答网 > 科技

淘宝团购 倒计时图片怎么弄的？

2020-04-17 科技 92阅读
这是利用时间倒计时模块做出来的。
用JavaScript获取服务器时间，然后做页面倒计时的程序代码如下：
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


untitled</title> <br /><script type="text/javascript"><br />get=function (id){<br />return document.getElementById(id)<br />} <br />if(document.all){ <br />window.XMLHttpRequest=function(){ <br />var get=['Microsoft.XMLHTTP','Msxml2.XMLHTTP']; <br />for(var i=0;i<get.length;i++)<br />{<br />try{<br />return new ActiveXObject(get[i])<br />}<br />catch(e){}<br />}; <br />}; <br />} <br />webDate=function(fn){ <br />var Htime=new XMLHttpRequest(); <br />Htime.onreadystatechange=function(){<br />Htime.readyState==4&&(fn(new Date(Htime.getResponseHeader('Date'))))<br />}; <br />Htime.open('HEAD', '/?_='+(-new Date)); Htime.send(null); <br />} <br />window.time=new Date(); <br />targetTime=new Date(); <br />time2String=function (t){ <br />with(t)return [getFullYear(),'年' ,('0'+(getMonth()+1)).slice(-2),'月' ,('0'+getDate()).slice(-2),'日 ' ,('0'+getHours()).slice(-2),': ' ,('0'+getMinutes()).slice(-2),': ' ,('0'+getSeconds()).slice(-2)].join('') <br />} <br />int2time=function (m){<br />m-=(D=parseInt(m/86400000))*86400000; m-=(H=parseInt(m/3600000))*3600000; S=parseInt((m-=(M=parseInt(m/60000))*60000)/1000); <br />return D+'天'+H+'小时'+M+'分'+S+'秒' <br />} <br />setInterval(function (){ <br />webDate(function (webTime){ <br />get('web').innerHTML=time2String(time=webTime); <br />}) <br />get('locale').innerHTML=time2String(new Date); <br />get('time').innerHTML=int2time(targetTime-time); <br />if ((targetTime-time)<0) { <br />get('time').innerHTML = 'Game Over'; <br />} },1000) <br /></script> <br /></head> <br /><body> <br />设定时间：2015年06月18日0时0分0秒<br> 服务器时间:<span id='web'>loading...</span><br> <br />本地时间:<span id="locale">loading...</span><br> <br />倒计时时间:<span id="time">loading...</span> <br /><script type="text/javascript" charset="utf-8"> targetTime=new Date(2015,06,18,00,00,00); </script> <br /></body> <br /></html><br />注：原理用xmlhttp来获取服务器上的时间，后台用js做倒计时显示到页面上，由于获取服务器时间这个在本地运行不一定能成功，最好是在服务器上运行。 </div> <div class="tags"> </div> <div class="clear"> <div class="shares"> <b>声明：你问我答网所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流。若您的权利被侵害，请联系fangmu6661024@163.com</b> <div id="share" class="share-component social-share" data-sites="weibo,qzone,qq,wechat"> </div> </div> <div class="act"> <a href="JavaScript:" onclick="zan('264747007')" class="zan" title="赞"> <i class="iconfont bx bx-like"></i> <span id="zan">0</span> </a> </div> </div> <div class="clear"></div> </div> <div class="ny-ad"> </div> <div class="ny-ad"> </div> <div class="like"> <h3 class="title">最新文章</h3> <div class="piclist likep"> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/942589595637809572.html" title="惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/942589595637809572.html" title="惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置">惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-15 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 2.5万阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/709929852732135965.html" title="如何做好把一个新产品推向市场"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/709929852732135965.html" title="如何做好把一个新产品推向市场">如何做好把一个新产品推向市场</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-16 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 86阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/1309089613027686979.html" title="西门子冰箱"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/1309089613027686979.html" title="西门子冰箱">西门子冰箱</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-16 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 112阅读 </span> </div> </div> <div class="clear"></div> </div> </div> <div class="ny-ad"> </div> </div> <div class="sidebar"> <div class="widget postlist"> <h3>猜你喜欢</h3> <ul class="hasimg"> <li> <a href="https://w.sf024.com/info/264747007.html" title="淘宝团购 倒计时图片怎么弄的？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="淘宝团购 倒计时图片怎么弄的？"> </a> <a href="https://w.sf024.com/info/264747007.html" target="">淘宝团购 倒计时图片怎么弄的？...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-17 </span><span> <i class="iconfont bx bx-show"></i> 92阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1704371763640986220.html" title="求天猫淘宝倒计时代码能加在图片上的" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="求天猫淘宝倒计时代码能加在图片上的"> </a> <a href="https://w.sf024.com/info/1704371763640986220.html" target="">求天猫淘宝倒计时代码能加在图片上...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 03-10 </span><span> <i class="iconfont bx bx-show"></i> 130阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/751009292922561132.html" title="2019回家倒计时图片？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="2019回家倒计时图片？"> </a> <a href="https://w.sf024.com/info/751009292922561132.html" target="">2019回家倒计时图片？...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 09-30 </span><span> <i class="iconfont bx bx-show"></i> 75阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/494463176.html" title="10秒倒计时动态图片" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="10秒倒计时动态图片"> </a> <a href="https://w.sf024.com/info/494463176.html" target="">10秒倒计时动态图片...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-06 </span><span> <i class="iconfont bx bx-show"></i> 66阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1952199132788932508.html" title="如何制作同学聚会倒计时图片" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何制作同学聚会倒计时图片"> </a> <a href="https://w.sf024.com/info/1952199132788932508.html" target="">如何制作同学聚会倒计时图片...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-30 </span><span> <i class="iconfont bx bx-show"></i> 92阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/624459978483738444.html" title="60秒倒计时GIF图片" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="60秒倒计时GIF图片"> </a> <a href="https://w.sf024.com/info/624459978483738444.html" target="">60秒倒计时GIF图片...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-03 </span><span> <i class="iconfont bx bx-show"></i> 118阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/2117302597969400227.html" title="婚礼天数倒计时图片制作20天图片" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="婚礼天数倒计时图片制作20天图片"> </a> <a href="https://w.sf024.com/info/2117302597969400227.html" target="">婚礼天数倒计时图片制作20天图片...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-18 </span><span> <i class="iconfont bx bx-show"></i> 124阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/554547148.html" title="求一个倒计时动态图片,100分." class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="求一个倒计时动态图片,100分."> </a> <a href="https://w.sf024.com/info/554547148.html" target="">求一个倒计时动态图片,100分....</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 05-04 </span><span> <i class="iconfont bx bx-show"></i> 275阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1821259908627591628.html" title="淘宝买东西申请退款的时候确认收货时间还在倒计时吗？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="淘宝买东西申请退款的时候确认收货时间还在倒计时吗？"> </a> <a href="https://w.sf024.com/info/1821259908627591628.html" target="">淘宝买东西申请退款的时候确认收货...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 08-10 </span><span> <i class="iconfont bx bx-show"></i> 442阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/14836576.html" title="怎样制作一个考研倒计时桌面图片" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="怎样制作一个考研倒计时桌面图片"> </a> <a href="https://w.sf024.com/info/14836576.html" target="">怎样制作一个考研倒计时桌面图片...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-11 </span><span> <i class="iconfont bx bx-show"></i> 55阅读 </span> </p> </li> </ul> </div> </div> </div> </section><footer class="footer"> <div class="container"> <p class="copyright">COPYRIGHT 2013 - 2024 你问我答网®. ALL RIGHTS RESERVED. | <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2020035127号</a></p> </div></footer><script> let search_type="1"; var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?752ceaa2e03e39366ceff9a414a1f6a7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();</script> <script type="text/javascript" src="https://w.sf024.com/assets/js/jquery.share.min.js"></script> </body> </html>