倒计时代码指定开始时间和结束时间倒计时js代码

目前网上很多倒计时代码，相对来说都是比较齐全的，很多商家在做活动的时候也需要一个倒计时js代码的功能，需要指定开始时间和截止时间（结束时间）倒计时功能，在这里把实际可用的代码分享给大家，期望对大家有所帮助，大家也可以拿去做一个参考：

指定开始时间和结束时间倒计时进度条代码，使用Bootstrap，jQuery和momentjs创建了一个示例进度条实例一：

JS代码：

$(document).ready(function(){
  var start = moment('2023-02-21 05:38:33');//开始时间
  var end = moment('2023-03-21 20:00:00');//结束时间
  var formattedPercentage = 0;//初始时间为0
  
  var interval = setInterval(function(){
    var now = moment();//获取当前时间
    var percentage = now.diff(start) / end.diff(start) * 100;//计算百分比进度条

    if (percentage > 100) {
      formattedPercentage = 100;
      clearInterval(interval);
    } else {
      formattedPercentage = percentage.toFixed(2);//保存计算百分比保留后两位小数，若不需要请把2修改成0即可。
    }
    // Use formattedPercentage as you need
    $('#example-progress-bar .progress-bar').width(formattedPercentage+'%').html(formattedPercentage+'%')//这里是指定ID区域显示对应的百分比和进度条。

  }, 500);
});

HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="example-progress-bar" class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

以上就是指定开始时间和结束时间的倒计时百分比进度条，可以做适当的修改，完成自己需要的样式即可。

下面再次分享倒计时00:00:00倒计时；比如还剩多少时间就到期了之类的能使用上实例二；

<meta charset="utf-8">
<div id="all">
    <div class="timetext">
        <div>
            <span id="t_h"></span>
            <span id="t_m"></span>
            <span id="t_s"></span>
        </div>
    </div>
</div>
<div class="count"></div>
<script type="text/javascript">
function getRTime() {
    var EndTime = new Date("2023/03/04 18:00:00"); //截止时间
    var NowTime = new Date();
    var t = EndTime.getTime() - NowTime.getTime();
    var d = Math.floor(t / 1000 / 60 / 60 / 24);
    var h = Math.floor(t / 1000 / 60 / 60 % 24);
    var m = Math.floor(t / 1000 / 60 % 60);
    var s = Math.floor(t / 1000 % 60);
	//补零
  if(h < 10){
    h = '0' + h;
  }
  if(m < 10){
    m = '0' + m;
  }
  if(s < 10){
    s = '0' + s;
  }
    //document.getElementById("t_d").innerHTML = d + "";
    document.getElementById("t_h").innerHTML = h + "";
    document.getElementById("t_m").innerHTML = m + "";
    document.getElementById("t_s").innerHTML = s + "";

	if (t <= 0) {//这里是表示若是到了时间，就全部归零，这里只加了小时、分钟、秒钟的时间，若有需要可以增加日期信息
		document.querySelector("#t_h").innerHTML = "00";
		document.querySelector("#t_m").innerHTML = "00";
		document.querySelector("#t_s").innerHTML = "00";
	return;
}
}
setInterval(getRTime, 0);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

代码应该都能看明白，在时间结束后也可以增加一个提示语在指定的位置，下面就是提示语源码分享实例三：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时代码，时间到期后会显示出提醒内容</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:18px; text-align:center;}
.time{ height:30px; padding:200px;}
</style>
</head>
<body>
    <div class="time">
        <span id="t_d">00天</span>
        <span id="t_h">00时</span>
        <span id="t_m">00分</span>
        <span id="t_s">00秒</span>
        <span id="daoqi"></span>
    </div>
<script>
   function GetRTime(){
       var EndTime= new Date('2023/04/20 10:00:00');//这里设置你预定的时间
       var NowTime = new Date();
       var t =EndTime.getTime() - NowTime.getTime();
       var d=Math.floor(t/1000/60/60/24);
       var h=Math.floor(t/1000/60/60%24);
       var m=Math.floor(t/1000/60%60);
       var s=Math.floor(t/1000%60);

       document.getElementById("t_d").innerHTML = d + "天";
       document.getElementById("t_h").innerHTML = h + "时";
       document.getElementById("t_m").innerHTML = m + "分";
       document.getElementById("t_s").innerHTML = s + "秒";
       if(s=="0" && m=="0" && h=="0" && d=="0"){
       document.getElementById("daoqi").innerHTML ="活动已到期";//这里设置到期时间后的提醒内容
       document.getElementById("daoqi").style.color="red";}
}
   setInterval(GetRTime,0);
</script>
</body>
</html>

倒计时js代码差不多就是这样的，需要进度条直接修改一下样式即可，欢迎互相交流，期望源码能帮助到你，感谢阅读，祝你生活愉快。