今天给大家分享一个简单又炫酷的网站小工具-倒计时代码,挺适合网站做一些限时推广、限时会员、限时售东西等等。话不多说,现在就分享代码!?
倒计时HTML+CSS+JS都放到一起了,如果觉得不妥,自己修改吧!
代码:
<html > <head> <style type="text/css"> .se-kl{width:190px;height:275px;background-color:#e83632;margin:auto;position:relative}.se-cn{position:absolute;top:42px;left:0;width:100%;text-align:center;font-size:34px;color:#fff}.se-en{position:absolute;top:90px;left:0;width:100%;text-align:center;font-size:20px;color:rgba(255,255,255,.5)}.se-io{width:20px;height:33px;position:absolute;background:url(https://img.wiiuii.cn/img/seckill.png) no-repeat;background-position:-32.5px 0;background-size:52.5px 40px;left:85px;top:126px;display:block}.se-info{position:absolute;top:170px;text-align:center;width:100%;font-size:16px;color:#fff}.se-count{position:absolute;top:212px;left:30px;height:40px}.se-day{display:none}.se-hour,.se-min,.se-sec{position:relative;background-color:#2f3430;width:40px;height:40px;float:left;text-align:center;line-height:40px;margin-right:5px}.se-txt{font-size:20px;font-weight:700;color:#fff}.se-txt:before{content:"";display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background-color:#e83632} </style> </head> <body> <div class="se-kl"> <div class="se-cn">倒计时</div> <div class="se-en">COUNT DOWN</div> <i class="se-io"></i> <div class="se-info">距离结束还剩</div> <div class="se-count"> <div class="se-day"></div> <div class="se-hour"><span class="se-txt">00</span></div> <div class="se-min"><span class="se-txt">00</span></div> <div class="se-sec"><span class="se-txt">00</span></div> </div> </div> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var oDate = new Date(); var nowTime = oDate.getTime(); //现在的毫秒数 oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天 var targetDate = new Date(oDate.toLocaleDateString()); run(targetDate); }); function run(enddate) { getDate(enddate); setInterval("getDate('" + enddate + "')", 500); } function getDate(enddate) { var oDate = new Date(); //获取日期对象 var nowTime = oDate.getTime(); //现在的毫秒数 var enddate = new Date(enddate); var targetTime = enddate.getTime(); // 截止时间的毫秒数 var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数 var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天;一天有24*60*60=86400秒 ; second = second % 86400; //余数代表剩下的秒数; var hour = Math.floor(second / 3600); //整数部分代表小时; second %= 3600; //余数代表 剩下的秒数; var minute = Math.floor(second / 60); second %= 60; var spanH = $('.se-txt')[0]; var spanM = $('.se-txt')[1]; var spanS = $('.se-txt')[2]; spanH.innerHTML = tow(hour); spanM.innerHTML = tow(minute); spanS.innerHTML = tow(second); } function tow(n) { return n >= 0 && n < 10 ? '0' + n : '' + n; } </script> </body> </html>
效果:
倒计时
COUNT DOWN
距离结束还剩
00
00
00
一、本站上的部份代码及教程来源于互联网,仅供网友学习交流。如有侵权,无意侵害您的权益,请发送邮件至zhangshen#ahap.cn或点击右侧 联系我们,我们将尽快处理。
二、请勿将购买的资源教程转载或分享与他人!
二、请勿将购买的资源教程转载或分享与他人!