javascript - 在我的网站上显示倒数计时器时出现问题

Question

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// Settings are here
var total_items = 50;
var d = new Date();
var min_items_left = 12;
var max_items_left = 20;
var remaining_items = randomIntFromInterval(min_items_left, max_items_left);
var min_of_remaining_items = 1;
var decrease_after = 1.7;
var decrease_after_first_item = 0.17;


(function($) {
  $.fn.progressbar = function() {
    var a = "<p>Hurry! Only <span class='count'>" + remaining_items + "</span> left in stock.</p>" + "<div class='progressbar'><div style='width:100%'></div></div>";
    this.addClass('items-count');
    this.html(a + this.html());
    updateMeter(this);
    var b = this;
    setTimeout(function() {
      remaining_items--;
      if (remaining_items < min_of_remaining_items) {
        remaining_items = randomIntFromInterval(min_items_left, max_items_left)
      }
      $('.count').css('background-color', '#CE0201');
      $('.count').css('color', '#fff');
      setTimeout(function() {
        $('.count').css('background-color', '#fff');
        $('.count').css('color', '#CE0201')
      }, 1000 * 60 * 0.03);
      b.find(".count").text(remaining_items);
      updateMeter(b)
    }, 1000 * 60 * decrease_after_first_item);
    setInterval(function() {
      remaining_items--;
      if (remaining_items < min_of_remaining_items) {
        remaining_items = randomIntFromInterval(min_items_left, max_items_left)
      }
      $('.count').css('background-color', '#CE0201');
      $('.count').css('color', '#fff');
      setTimeout(function() {
        $('.count').css('background-color', '#fff');
        $('.count').css('color', '#CE0201')
      }, 1000 * 60 * 0.03);
      b.find(".count").text(remaining_items);
      updateMeter(b)
    }, 1000 * 60 * decrease_after)
  };

  function updateMeter(a) {
    var b = 100 * remaining_items / total_items;
    if (remaining_items < 10) {
      a.find('.progressbar div:first').addClass('less-than-ten')
    }
    a.find('.progressbar').addClass('active progress-striped');
    setTimeout(function() {
      myanimate(a.find('.progressbar div:first'), b);
      a.find('.progressbar').removeClass('active progress-striped')
    }, 1000)
  }
}(jQuery));

function myanimate(a, b) {
  var c = 0;
  var d = parseInt(a.closest('.progressbar').css('width'));
  var e = Math.floor(100 * parseInt(a.css('width')) / d);
  if (e > b) {
    c = e
  }

  function frame() {
    if (e > b) {
      c--
    } else {
      c++
    }
    a.css('width', c + '%');
    if (c == b || c <= 0 || c >= 100) clearInterval(f)
  }
  var f = setInterval(frame, 40)
}
$(document).ready(function() {
  $("#progress_bar").progressbar();
  var tag = "ctdn-12-12".match(/\d+/g);
  var hour = 14;
  var theDaysBox = $("#numdays");
  var theHoursBox = $("#numhours");
  var theMinsBox = $("#nummins");
  var theSecsBox = $("#numsecs");
  var d = new Date();
  var n = d.getDay();
  var date = 1;
  var gg = 0;
  var hh = 0;
  var ii = 0;
  var nsec = 0 - d.getSeconds();
  if (nsec < 0) {
    nsec = 60 - d.getSeconds();
    gg = 1
  }
  var nmin = 0 - d.getMinutes() - gg;
  if (nmin < 0) {
    nmin = 60 - d.getMinutes() - gg;
    hh = 1
  }
  var nhrs = 14 - d.getHours() - hh;
  if (nhrs < 0) {
    nhrs = 38 - d.getHours() - hh;
    ii = 1
  }
  var ndat = date - 1;
  if (ndat < 0) {
    var mmon = d.getMonth();
    ndat = 30 + date - d.getDate() - ii
  }
  theSecsBox.html(nsec);
  theMinsBox.html(nmin);
  theHoursBox.html(nhrs);
  theDaysBox.html(ndat);
  var refreshId = setInterval(function() {
    var e = theSecsBox.text();
    var a = theMinsBox.text();
    var c = theHoursBox.text();
    var b = theDaysBox.text();
    if (e == 0 && a == 0 && c == 0 && b == 0) {} else {
      if (e == 0 && a == 0 && c == 0) {
        theDaysBox.html(b - 1);
        theHoursBox.html("23");
        theMinsBox.html("59");
        theSecsBox.html("59")
      } else {
        if (e == 0 && a == 0) {
          theHoursBox.html(c - 1);
          theMinsBox.html("59");
          theSecsBox.html("59")
        } else {
          if (e == 0) {
            theMinsBox.html(a - 1);
            theSecsBox.html("59")
          } else {
            theSecsBox.html(e - 1)
          }
        }
      }
    }
  }, 1000);
});

#progress_bar {
  margin-top: 15px
}
.progressbar.progressbar {
  background: #ffe8e8;
  border: 0px solid whitesmoke;
  height: 11px
}
.progressbar.progressbar div {
  background: #d95350;
  height: 11px
}
.progressbar.progressbar.active div {
  -webkit-animation: 2s linear 0s normal none infinite running progress-bar-stripes;
  animation: 2s linear 0s normal none infinite running progress-bar-stripes
}
.progress-striped.progressbar.progressbar div {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-size: 40px 40px
}
.items-count {
  margin-top: 0px;
  margin-bottom: 0px
}
.count {
  color: #a94442;
  padding: 1px
}
.items-count p {
  padding-bottom: 5px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  font-family: "Open Sans", Arial, sans-serif
}
.progressbar {
  position: relative;
  display: block;
  background-color: #ca0000;
  border: 1px solid #ddd;
  margin-bottom: 15px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1)
}
.progressbar > div {
  background-color: #ca0000;
  width: 0;
  margin-bottom: 0;
  height: 15px
}
.progressbar > div.less-than-ten {
  background-color: #ca0000 !important
}
#clock-ticker {
  display: block;
  margin-bottom: 15px
}
#clock-ticker .block {
  position: relative;
  color: #000;
  font-weight: bold;
  float: left;
  text-align: center;
  width: 25%
}
#clock-ticker .block .flip-top {
  width: 88px;
  height: 39px;
  line-height: 40px;
  font-size: 40px;
  text-align: center
}
#clock-ticker .block .label,
span.flip-top {
  color: #000;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  width: 88px;
  line-height: 25px;
  font-family: "Open Sans", Arial, sans-serif
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items-count" id="progress_bar"></div>
<div id="clock-ticker" class="clearfix">
  <div class="block"><span class="flip-top" id="numdays">0</span>
    <br><span class="label">Days</span>
  </div>
  <div class="block"><span class="flip-top" id="numhours">1</span>
    <br><span class="label">Hours</span>
  </div>
  <div class="block"><span class="flip-top" id="nummins">23</span>
    <br><span class="label">Minutes</span>
  </div>
  <div class="block"><span class="flip-top" id="numsecs">36</span>
    <br><span class="label">Seconds</span>
  </div>

我想在网站上显示一个倒数计时器，它应该说快点，只有 X 库存，下面是红色条，然后是一个带有数字的计时器。带数字的计时器工作正常，但我看不到只抓紧时间和显示红色进度条。谁能指出我正确的方向？谢谢

代码在这里，

<style>#progress_bar{margin-top:15px}.progressbar.progressbar{background:#ffe8e8;border:0px solid whitesmoke;height:11px}.progressbar.progressbar div{background:#d95350;height:11px}.progressbar.progressbar.active div{-webkit-animation:2s linear 0s normal none infinite running progress-bar-stripes;animation:2s linear 0s normal none infinite running progress-bar-stripes}.progress-striped.progressbar.progressbar div{background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));background-size:40px 40px}.items-count{margin-top:0px;margin-bottom:0px}.count{color:#a94442;padding:1px}.items-count p{padding-bottom:5px;margin:0;text-transform:uppercase;font-weight:700;text-align:center;font-family:"Open Sans",Arial,sans-serif}.progressbar{position:relative;display:block;background-color:#ca0000;border:1px solid #ddd;margin-bottom:15px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1)}.progressbar > div{background-color:#ca0000;width:0;margin-bottom:0;height:15px}.progressbar > div.less-than-ten{background-color:#ca0000 !important}#clock-ticker{display:block;margin-bottom:15px}#clock-ticker .block{position:relative;color:#000;font-weight:bold;float:left;text-align:center;width:25%}#clock-ticker .block .flip-top{width:88px;height:39px;line-height:40px;font-size:40px;text-align:center}#clock-ticker .block .label,span.flip-top{color:#000;font-weight:bold;text-align:center;font-size:14px;text-transform:uppercase;width:88px;line-height:25px;font-family:"Open Sans",Arial,sans-serif}</style>

<script type="text/javascript">
function randomIntFromInterval(min, max) {return     Math.floor(Math.random() * (max - min + 1) + min);}

// Settings are here
var total_items = 50;
var d = new Date();
var min_items_left = 12;
var max_items_left = 20;
var remaining_items = randomIntFromInterval(min_items_left,    max_items_left);
var min_of_remaining_items = 1;
var decrease_after = 1.7; 
var decrease_after_first_item = 0.17; 


(function($){$.fn.progressbar=function(){var a="<p>Hurry! Only <span class='count'>"+remaining_items+"</span> left in stock.</p>"+"<div class='progressbar'><div style='width:100%'></div></div>";this.addClass('items-count');this.html(a+this.html());updateMeter(this);var b=this;setTimeout(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$('.count').css('background-color','#CE0201');$('.count').css('color','#fff');setTimeout(function(){$('.count').css('background-color','#fff');$('.count').css('color','#CE0201')},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after_first_item);setInterval(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$('.count').css('background-color','#CE0201');$('.count').css('color','#fff');setTimeout(function(){$('.count').css('background-color','#fff');$('.count').css('color','#CE0201')},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after)};function updateMeter(a){var b=100*remaining_items/total_items;if(remaining_items<10){a.find('.progressbar div:first').addClass('less-than-ten')}a.find('.progressbar').addClass('active progress-striped');setTimeout(function(){myanimate(a.find('.progressbar div:first'),b);a.find('.progressbar').removeClass('active progress-striped')},1000)}}(jQuery));function myanimate(a,b){var c=0;var d=parseInt(a.closest('.progressbar').css('width'));var e=Math.floor(100*parseInt(a.css('width'))/d);if(e>b){c=e}function frame(){if(e>b){c--}else{c++}a.css('width',c+'%');if(c==b||c<=0||c>=100)clearInterval(f)}var f=setInterval(frame,40)} $(document).ready(function(){$("#progress_bar").progressbar();var tag="ctdn-12-12".match(/\d+/g);var hour=14;var theDaysBox=$("#numdays");var theHoursBox=$("#numhours");var theMinsBox=$("#nummins");var theSecsBox=$("#numsecs");var d=new Date();var n=d.getDay();var date=1;var gg=0;var hh=0;var ii=0;var nsec=0-d.getSeconds();if(nsec<0){nsec=60-d.getSeconds();gg=1}var nmin=0-d.getMinutes()-gg;if(nmin<0){nmin=60-d.getMinutes()-gg;hh=1}var nhrs=14-d.getHours()-hh;if(nhrs<0){nhrs=38-d.getHours()-hh;ii=1}var ndat=date-1;if(ndat<0){var mmon=d.getMonth();ndat=30+date-d.getDate()-ii}theSecsBox.html(nsec);theMinsBox.html(nmin);theHoursBox.html(nhrs);theDaysBox.html(ndat);var refreshId=setInterval(function(){var e=theSecsBox.text();var a=theMinsBox.text();var c=theHoursBox.text();var b=theDaysBox.text();if(e==0&&a==0&&c==0&&b==0){}else{if(e==0&&a==0&&c==0){theDaysBox.html(b-1);theHoursBox.html("23");theMinsBox.html("59");theSecsBox.html("59")}else{if(e==0&&a==0){theHoursBox.html(c-1);theMinsBox.html("59");theSecsBox.html("59")}else{if(e==0){theMinsBox.html(a-1);theSecsBox.html("59")}else{theSecsBox.html(e-1)}}}}},1000);});</script>
<div class="items-count" id="progress_bar"></div><div id="clock-ticker" class="clearfix"><div class="block"><span class="flip-top" id="numdays">0</span><br><span class="label">Days</span></div><div class="block"><span class="flip-top" id="numhours">1</span><br><span class="label">Hours</span></div><div class="block"><span class="flip-top" id="nummins">23</span><br><span class="label">Minutes</span></div><div class="block"><span class="flip-top" id="numsecs">36</span><br><span class="label">Seconds</span></div>

Answer 1

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// Settings are here
var total_items = 50;
var d = new Date();
var min_items_left = 12;
var max_items_left = 20;
var remaining_items = randomIntFromInterval(min_items_left, max_items_left);
var min_of_remaining_items = 1;
var decrease_after = 1.7;
var decrease_after_first_item = 0.17;


(function($) {
  $.fn.progressbar = function() {
    var a = "<p>Hurry! Only <span class='count'>" + remaining_items + "</span> left in stock.</p>" + "<div class='progressbar'><div style='width:100%'></div></div>";
    this.addClass('items-count');
    this.html(a + this.html());
    updateMeter(this);
    var b = this;
    setTimeout(function() {
      remaining_items--;
      if (remaining_items < min_of_remaining_items) {
        remaining_items = randomIntFromInterval(min_items_left, max_items_left)
      }
      $('.count').css('background-color', '#CE0201');
      $('.count').css('color', '#fff');
      setTimeout(function() {
        $('.count').css('background-color', '#fff');
        $('.count').css('color', '#CE0201')
      }, 1000 * 60 * 0.03);
      b.find(".count").text(remaining_items);
      updateMeter(b)
    }, 1000 * 60 * decrease_after_first_item);
    setInterval(function() {
      remaining_items--;
      if (remaining_items < min_of_remaining_items) {
        remaining_items = randomIntFromInterval(min_items_left, max_items_left)
      }
      $('.count').css('background-color', '#CE0201');
      $('.count').css('color', '#fff');
      setTimeout(function() {
        $('.count').css('background-color', '#fff');
        $('.count').css('color', '#CE0201')
      }, 1000 * 60 * 0.03);
      b.find(".count").text(remaining_items);
      updateMeter(b)
    }, 1000 * 60 * decrease_after)
  };

  function updateMeter(a) {
    var b = 100 * remaining_items / total_items;
    if (remaining_items < 10) {
      a.find('.progressbar div:first').addClass('less-than-ten')
    }
    a.find('.progressbar').addClass('active progress-striped');
    setTimeout(function() {
      myanimate(a.find('.progressbar div:first'), b);
      a.find('.progressbar').removeClass('active progress-striped')
    }, 1000)
  }
}(jQuery));

function myanimate(a, b) {
  var c = 0;
  var d = parseInt(a.closest('.progressbar').css('width'));
  var e = Math.floor(100 * parseInt(a.css('width')) / d);
  if (e > b) {
    c = e
  }

  function frame() {
    if (e > b) {
      c--
    } else {
      c++
    }
    a.css('width', c + '%');
    if (c == b || c <= 0 || c >= 100) clearInterval(f)
  }
  var f = setInterval(frame, 40)
}
$(document).ready(function() {
  $("#progress_bar").progressbar();
  var tag = "ctdn-12-12".match(/\d+/g);
  var hour = 14;
  var theDaysBox = $("#numdays");
  var theHoursBox = $("#numhours");
  var theMinsBox = $("#nummins");
  var theSecsBox = $("#numsecs");
  var d = new Date();
  var n = d.getDay();
  var date = 1;
  var gg = 0;
  var hh = 0;
  var ii = 0;
  var nsec = 0 - d.getSeconds();
  if (nsec < 0) {
    nsec = 60 - d.getSeconds();
    gg = 1
  }
  var nmin = 0 - d.getMinutes() - gg;
  if (nmin < 0) {
    nmin = 60 - d.getMinutes() - gg;
    hh = 1
  }
  var nhrs = 14 - d.getHours() - hh;
  if (nhrs < 0) {
    nhrs = 38 - d.getHours() - hh;
    ii = 1
  }
  var ndat = date - 1;
  if (ndat < 0) {
    var mmon = d.getMonth();
    ndat = 30 + date - d.getDate() - ii
  }
  theSecsBox.html(nsec);
  theMinsBox.html(nmin);
  theHoursBox.html(nhrs);
  theDaysBox.html(ndat);
  var refreshId = setInterval(function() {
    var e = theSecsBox.text();
    var a = theMinsBox.text();
    var c = theHoursBox.text();
    var b = theDaysBox.text();
    if (e == 0 && a == 0 && c == 0 && b == 0) {} else {
      if (e == 0 && a == 0 && c == 0) {
        theDaysBox.html(b - 1);
        theHoursBox.html("23");
        theMinsBox.html("59");
        theSecsBox.html("59")
      } else {
        if (e == 0 && a == 0) {
          theHoursBox.html(c - 1);
          theMinsBox.html("59");
          theSecsBox.html("59")
        } else {
          if (e == 0) {
            theMinsBox.html(a - 1);
            theSecsBox.html("59")
          } else {
            theSecsBox.html(e - 1)
          }
        }
      }
    }
  }, 1000);
});

#progress_bar {
  margin-top: 15px
}
.progressbar.progressbar {
  background: #ffe8e8;
  border: 0px solid whitesmoke;
  height: 11px
}
.progressbar.progressbar div {
  background: #d95350;
  height: 11px
}
.progressbar.progressbar.active div {
  -webkit-animation: 2s linear 0s normal none infinite running progress-bar-stripes;
  animation: 2s linear 0s normal none infinite running progress-bar-stripes
}
.progress-striped.progressbar.progressbar div {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-size: 40px 40px
}
.items-count {
  margin-top: 0px;
  margin-bottom: 0px
}
.count {
  color: #a94442;
  padding: 1px
}
.items-count p {
  padding-bottom: 5px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  font-family: "Open Sans", Arial, sans-serif
}
.progressbar {
  position: relative;
  display: block;
  background-color: #ca0000;
  border: 1px solid #ddd;
  margin-bottom: 15px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1)
}
.progressbar > div {
  background-color: #ca0000;
  width: 0;
  margin-bottom: 0;
  height: 15px
}
.progressbar > div.less-than-ten {
  background-color: #ca0000 !important
}
#clock-ticker {
  display: block;
  margin-bottom: 15px
}
#clock-ticker .block {
  position: relative;
  color: #000;
  font-weight: bold;
  float: left;
  text-align: center;
  width: 25%
}
#clock-ticker .block .flip-top {
  width: 88px;
  height: 39px;
  line-height: 40px;
  font-size: 40px;
  text-align: center
}
#clock-ticker .block .label,
span.flip-top {
  color: #000;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  width: 88px;
  line-height: 25px;
  font-family: "Open Sans", Arial, sans-serif
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items-count" id="progress_bar"></div>
<div id="clock-ticker" class="clearfix">
  <div class="block"><span class="flip-top" id="numdays">0</span>
    <br><span class="label">Days</span>
  </div>
  <div class="block"><span class="flip-top" id="numhours">1</span>
    <br><span class="label">Hours</span>
  </div>
  <div class="block"><span class="flip-top" id="nummins">23</span>
    <br><span class="label">Minutes</span>
  </div>
  <div class="block"><span class="flip-top" id="numsecs">36</span>
    <br><span class="label">Seconds</span>
  </div>