版权声明:所有原创文章未经本人同意不得随意转载,谢谢 https://blog.csdn.net/tangcc110/article/details/82621237
最终效果:用%(mod)等方法计算得出9月10号距离国庆开业的倒计时
html:核心代码
<div class="countdown-block"> <!-- 数字的背景 --> <img class="countdown-block-bg" src="../img/activity/countDown/displayBlock.png" height="84" width="305"/> <!-- 倒计时数字,相对于 “countdown-block”绝对定位 left:0,top:0 看情况调整 --> <div class="countdown-number"> <ul class="activity-day"><li id="day1">0</li><li id="day2">0</li></ul> <ul class="activity-hour"><li id="hour1">0</li><li id="hour2">0</li></ul> <ul class="activity-minute"><li id="minute1">0</li><li id="minute2">0</li></ul> <ul class="activity-second"><li id="second1">0</li><li id="second2">0</li></ul> </div> <!-- 距离开业的图片,相对于 “countdown-block”绝对定位 --> <div class="countdown-title"> <img id="img_countdown_title" src="../img/activity/countDown/opening.png" height="40" width="372"/> </div> </div>
js:
// 以下几种方法都能格式化一个日期,getTime()是获取一个当前设定日期到1970年1月1日的毫秒 var activityEnd_seconds = new Date(2018,10,7,23,59,59).getTime(); // 兼容IE8 IE8+ chrome firefox var activityEnd_seconds = new Date("2018/10/07 23:59:59").getTime(); // 兼容IE8 IE8+ chrome firefox var activityOpening_seconds = new Date("09 28, 2018 23:59:59").getTime(); // 不兼容IE、Edge ,兼容 chrome firefox var now_seconds = new Date().getTime(); // log(11111,"=======",new Date(1538927999000)) var acDay = ""; var acHour = ""; var acMinu = ""; var acSeconds = ""; var diff_seconds; if (new Date().getTime() < activityOpening_seconds) { diff_seconds = Math.floor((activityOpening_seconds - now_seconds) / 1000); // 秒 } else { diff_seconds = Math.floor((activityEnd_seconds - now_seconds) / 1000); // 秒 $("#img_countdown_title").attr("src", "../img/activity/countDown/activityEnd.png") } // var diff_seconds = 3600 * 49 + 180; // 秒 // log("now_seconds ===",now_seconds,"s"); var t1; var $day1 = $("#day1"); var $day2 = $("#day2"); var $hour1 = $("#hour1"); var $hour2 = $("#hour2"); var $minute1 = $("#minute1"); var $minute2 = $("#minute2"); var $second1 = $("#second1"); var $second2 = $("#second2"); function activityContdown(second) { acDay = judgeNumber(Math.floor(second / (3600 * 24))); acHour = judgeNumber(Math.floor(second % (3600 * 24) / (3600))); // 模掉天数后,剩下的是不足一天的数量,再除以小时(3600s)就得到了最大小时数 acMinu = judgeNumber(Math.floor(second % (3600 * 24) % 3600 / 60)); // 模掉天数,再模掉小时后,剩下的就是分钟数了,直接除以分(60s)即可 acSeconds = judgeNumber(Math.floor(second % 60)); // 最简单就是这个秒了,任何数取模60(1分钟),得到的都是分钟外的秒数 $day1.text(acDay.substring(0, 1)); $day2.text(acDay.substring(1)); $hour1.text(acHour.substring(0, 1)); $hour2.text(acHour.substring(1)); $minute1.text(acMinu.substring(0, 1)); $minute2.text(acMinu.substring(1)); $second1.text(acSeconds.substring(0, 1)); $second2.text(acSeconds.substring(1)); if (second > 0) { t1 = setTimeout(function () { activityContdown(second) }, 1000) } else { clearTimeout(t1); return false; } second--; } function judgeNumber(num) { // 判断数字的位数 var newNum = ""; if (/.{2}/g.test(num)) { newNum = num; } else { newNum = "0" + num; } return newNum.toString(); } activityContdown(diff_seconds);
Note:
1.格式化的日期的兼容性
2.取得到1970,1,1日的毫秒数,先转换为秒,再去计算天,时,分,秒