倒计时功能

原创于 2020-08-02 23:30:03 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

js 专栏收录该内容

61 篇文章

订阅专栏

本文详细介绍了使用JavaScript实现倒计时功能的方法，包括如何计算两个时间点之间的毫秒差，以及如何更新显示剩余时间，适用于多种场景如订单截止、直播开播等。

倒计时
完整代码

<div id="timer" class='font'></div>

<script type="text/javascript" language="javascript">
        $(function(){
            //daoJiShi()//调动执行函数
            run();
        })
//定时器
function run(){
    end='2020-10-28 0:00:00';//结束时间
    endDate=new Date(end.replace("T","/ ").getTime());
    //以500毫秒的速度执行
    var time = 500; 
    setInterval("daoJiShi('"+endDate+"')",time);
}

function daoJiShi(){
        	//var endDate=new Date(2019,8,10,15,0,0);//终点日期的年月日时分秒，月要减去1
        	var now=new Date();//获取当前日期
        	var oft=Math.round((endDate-now)/1000);
        	var ofd=parseInt(oft/3600/24);//天
        	var ofh=parseInt((oft%(3600*24))/3600);//小时
        	// if(ofh<9){ofh="0"+ofh}
        	var ofm=parseInt((oft%3600)/60);//分
        	// if(ofm<9){ofm="0"+ofm}
        	var ofs=oft%60;//秒
        	$('#timer').html('还有 '+ofd+' 天 ' +ofh+ ' 小时 ' +ofm+ ' 分钟 ' +ofs+ ' 秒');
        	if(ofs<0){$('#timer').html('倒计时结束！');return;};
</script>

倒计时-计算俩个时间毫秒差

$(function(){
	countdown()
})
function countdown() {
    var end = '2020-10-28 0:00:00';//结束时间
    enddate = new Date(end.replace('-', '/')).getTime();//转换成毫秒
    var time = 1000;//1000毫秒执行一次
    setInterval("djs('" + enddate + "')", time);
}
//修改订单倒计时
function djs(enddate) {
    var nowDate = new Date();
    var time = (enddate - nowDate.getTime());
    if (time < 0) {
        $('.plConfirm').removeClass('No-btn')
    }
}

更新

$(function(){
var endDate = new Date(2021, 1, 10, 15, 0, 0);//年月日时分秒，月要减去1
            endDate = endDate.getTime();
            TimeDown(endDate);
})
        function TimeDown(endDate) {
            var now = new Date().getTime();
            var oft =Math.round((endDate - now) / 1000);;
            var ofd = parseInt(oft / 3600 / 24);
            var ofh = parseInt((oft % (3600 * 24)) / 3600);
            var ofm = parseInt((oft % 3600) / 60);
            var ofs = oft % 60;
            if (oft < 0) {
                $('#times').hide();
            } else {
                $('#times').html("距离开播<span>" + ofh + "</span> 时 <span>" + ofm + "</span> 分 <span>" + ofs + "</span> 秒")
            }
            //延迟一秒执行自己
            if (ofh == "00" && ofm == "00" && parseInt(ofs) - 1 < 0) {
            } else {
                setTimeout(function () {
                    
                    TimeDown(parseInt(endDate));
                }, 1000)
            }

        }