js 实现倒计时,以及new Date().getTime()的格式化应用兼容性说明

最终效果:用%(mod)等方法计算得出9月10号距离国庆开业的倒计时

js 实现倒计时,以及new Date().getTime()的格式化应用兼容性说明_第1张图片

D:\0910张亮\PC切图\PC切图

html:核心代码

   
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0

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日的毫秒数,先转换为秒,再去计算天,时,分,秒

 

 

 

你可能感兴趣的:(js,jQuery)