您现在的位置是:网站首页 > 心得笔记

倒计时效果

盛悦2019-03-12554人围观
简介在网站开发过程中,常常需要设置活动等的倒计时,这里刚好总结下关于javascript里的Date

在讲倒计时之前,需要先了解以下几个方法:

/*
 * Date() 返回当前的日期和时间
 * getMonth()+1 返回月份(0-11)
 * getDate() 返回日期(1-31)
 * getDay() 返回星期几(0-6)
 * getHours() 返回小时数(0-23)
 * getMinutes() 返回分钟数(0-59)
 * getSeconds() 返回秒数(0-59)
 * getTime() 返回毫秒数
 * getYear() 返回年份 如19
 * getFullYear() 返回年完整格式 如2019
 *
 * 使用方法:
 * var myDate = new Date();
 * var year = myDate.getFullYear();
 */

1、输出系统时间

                    $(function(){
                        showTime();
                    });
                    //始终两位数显示
                    function checkTime(i) {
                        if (i < 10) {
                            i = '0'+i;
                        }
                        return i;
                    }
                    function showTime() {
                        var weekArray = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
                        var myDate = new Date();
//                        alert(myDate);//Tue Mar 12 2019 14:04:11 GMT+0800 (香港标准时间)
                        var year = myDate.getFullYear();
                        var month = myDate.getMonth()+1;
                        var date = myDate.getDate();
                        var day = weekArray[myDate.getDay()];
                        var hour = myDate.getHours();
                        var minute = checkTime(myDate.getMinutes());
                        var second = checkTime(myDate.getSeconds());
                        $(".date").html(year+'年'+month+'月'+date+'日'+hour+'时'+minute+'分'+second+'秒'+day);
                        setTimeout(showTime,500);//每个param2毫秒执行一次这个param1函数
                    }

2、高考倒计时

//高考倒计时 距离高考还有几天(知道结束时间和当前时间,当前时间又是动态获取到的 用结束的-当前的=所剩时间)
$(function(){
    //当前时间
    var curtime = new Date();
    //结束时间
    var endtime = new Date('2019,6,6');
    //时间差
    var lefttime = endtime.getTime() - curtime.getTime();//毫秒数
    //毫秒数转为天 1天=24*60*60*1000
    var leftday = Math.ceil(lefttime/(24*60*60*1000));//Math.ceil()向上取整 大于或等于参数Math.ceil(12.0) 12 Math.ceil(12.1) 13
    $(".date").html(leftday);
})


3、限时抢购倒计时

//3、限时抢倒计时  还剩10天12小时20分20秒
                    $(function(){
                        showTime();
                    });
                    function showTime(){
//结束时间
                        var endtime = new Date('2019/6/6,09:00:00');
                        //当前时间
                        var curtime = new Date();
                        //时间差
                        var lefttime = parseInt((endtime.getTime() - curtime.getTime())/1000);//秒数
                        var day = parseInt(lefttime/(24*60*60));//天  parseInt()取整数
                        var hour = parseInt(lefttime/(60*60)%24);//小时数%24=天......小时
                        var minute = parseInt(lefttime/60%60);//分钟
                        var second = parseInt(lefttime%60);
//                        alert(day+'---'+hour+'---'+minute+'---'+second);//18035074---432841785---25970507111
                        if (lefttime <= 0) {
                            $(".date").html('团购结束');
                        } else {
                            $(".date").html(day+'天'+hour+'小时'+minute+'分钟'+second+'秒');
                            setTimeout(showTime,500);
                        }

                    }