【问题标题】:Javasacript Countdown timer in Days, Hours, Minute, SecondsJavascript 倒数计时器,以天、小时、分钟、秒为单位
【发布时间】:2014-11-28 05:47:10
【问题描述】:

我正在尝试创建一个基于时间的倒计时时钟。它不是基于 current_dates。将被拉出的初始时间将来自一个单独的 php 文件。这将用于基于浏览器的游戏。当有人单击按钮启动此脚本时。它将检查是否满足某些要求,如果满足,则此脚本将启动。根据对象的级别,它将为该进行级别拉动初始计时器。希望这是有道理的。无论如何,我将计时器脚本基于我提供的第一个代码。

这个脚本只占分钟和秒。我修改它以包括天和小时。在这个过程中的某个地方我搞砸了,脚本甚至根本不起作用。我也不太确定这是否是计算它的最佳方法。因此,如果您有更清洁的方法来执行此操作,请分享。提前谢谢你。

此脚本基于我看到的分钟/秒脚本。以下是原文:

<span id="countdown" class="timer"></span>
<script>
   var seconds = 60;
   function secondPassed() {
   var minutes = Math.round((seconds - 30)/60);
   var remainingSeconds = seconds % 60;
   if (remainingSeconds < 10) {
      remainingSeconds = "0" + remainingSeconds; 
   }
   document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
   if (seconds == 0) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerHTML = "Buzz Buzz";
   } else {
    seconds--;
   }
   }
   var countdownTimer = setInterval('secondPassed()', 1000);
</script>

这是我试图包含天、小时、分钟和秒的修改后的脚本。

<span id="countdown"></span>
<script>
     var current_level = 93578;

     function timer() {

        var days = Math.round(current_level/86400);
        var remainingDays = Math.round(current_level - (days * 86400));

        if (days <= 0){
             days = current_level;
        }

        var hours = Math.round(remainingDays/3600);
        var remainingHours = Math.round(remainingDays - (hours * 3600));

        if (hours >= 24){
             hours = 23;
        }

        var minutes = Math.round(remainingHours/60);
        var remainingMinutes = Math.round(remainingHours - (minutes * 60));

        if (minutes >= 60) {
             minutes = 59;
        }

        var seconds = Math.round(remainingMinutes/60);

        document.getElementById('countdown').innerHTML = days + ":" + hours ":" + minutes + ":" + seconds;

        if (seconds == 0) {
             clearInterval(countdownTimer);
             document.getElementById('countdown').innerHTML = "Completed";
        }
     }
     var countdownTimer = setInterval('timer()', 1000);
</script>

【问题讨论】:

    标签: javascript php timer countdowntimer


    【解决方案1】:

    我终于回头看这个并重新编写了代码,这就像一个魅力。

    var upgradeTime = 172801;
    var seconds = upgradeTime;
    function timer() {
      var days        = Math.floor(seconds/24/60/60);
      var hoursLeft   = Math.floor((seconds) - (days*86400));
      var hours       = Math.floor(hoursLeft/3600);
      var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
      var minutes     = Math.floor(minutesLeft/60);
      var remainingSeconds = seconds % 60;
      function pad(n) {
        return (n < 10 ? "0" + n : n);
      }
      document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
      if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed";
      } else {
        seconds--;
      }
    }
    var countdownTimer = setInterval('timer()', 1000);
    &lt;span id="countdown" class="timer"&gt;&lt;/span&gt;

    【讨论】:

    • 使用 javascript 发布工作演示会更好。
    • 这对我帮助很大
    【解决方案2】:

    我个人会使用 jquery 倒数计时器集成。它很简单,并且有许多选项可以以不同的格式显示。由于我对 JS 也很陌生,因此这是我发现的最简单的获取计数/计时器的方法。

    http://keith-wood.name/countdown.html

    【讨论】:

    • 再一次,这个 sn-p 用于提取日期,而不是在原始源代码中以秒为单位显示的设置变量,在修改后的版本中显示为 current_level
    【解决方案3】:

    这是我根据您的代码制定和测试的示例

    <span id="countdown"></span>
    <script>
         var current_level = 3002;
    
         function timer() {
    
            var days = Math.floor(current_level/86400);
            var remainingDays = current_level - (days * 86400);
    
            //if (days <= 0){
            //    days = current_level;
            //}
    
            var hours = Math.floor(remainingDays/3600);
            var remainingHours = remainingDays - (hours * 3600);
    
            //if (hours >= 24){
            //     hours = 23;
            //}
    
            var minutes = Math.floor(remainingHours/60);
            var remainingMinutes = remainingHours - (minutes * 60);
    
            //if (minutes >= 60) {
            //     minutes = 59;
            //}
    
            var seconds = remainingMinutes;
    
            document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds;
    
            //if (seconds == 0) {
            //    clearInterval(countdownTimer);
            //     document.getElementById('countdown').innerHTML = "Completed";
            //}
    
            current_level--;
         }
         var countdownTimer = setInterval(timer, 1000);
    </script>
    

    【讨论】:

      【解决方案4】:

      此代码将帮助您处理在单个页面上处理多个计时器的问题

          var seconds_inputs =  document.getElementsByClassName('deal_left_seconds');
          var total_timers = seconds_inputs.length;
          for ( var i = 0; i < total_timers; i++){
              var str_seconds = 'seconds_'; var str_seconds_prod_id = 'seconds_prod_id_';
              var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
              var cal_seconds = seconds_inputs[i].getAttribute('value');
      
              eval('var ' + str_seconds + seconds_prod_id + '= ' + cal_seconds + ';');
              eval('var ' + str_seconds_prod_id + seconds_prod_id + '= ' + seconds_prod_id + ';');
          }
          function timer() {
              for ( var i = 0; i < total_timers; i++) {
                  var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
      
                  var days = Math.floor(eval('seconds_'+seconds_prod_id) / 24 / 60 / 60);
                  var hoursLeft = Math.floor((eval('seconds_'+seconds_prod_id)) - (days * 86400));
                  var hours = Math.floor(hoursLeft / 3600);
                  var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
                  var minutes = Math.floor(minutesLeft / 60);
                  var remainingSeconds = eval('seconds_'+seconds_prod_id) % 60;
      
                  function pad(n) {
                      return (n < 10 ? "0" + n : n);
                  }
                  document.getElementById('deal_days_' + seconds_prod_id).innerHTML = pad(days);
                  document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = pad(hours);
                  document.getElementById('deal_min_' + seconds_prod_id).innerHTML = pad(minutes);
                  document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(remainingSeconds);
      
                  if (eval('seconds_'+ seconds_prod_id) == 0) {
                      clearInterval(countdownTimer);
                      document.getElementById('deal_days_' + seconds_prod_id).innerHTML = document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = document.getElementById('deal_min_' + seconds_prod_id).innerHTML = document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(0);
                  } else {
                      var value = eval('seconds_'+seconds_prod_id);
                      value--;
                      eval('seconds_' + seconds_prod_id + '= ' + value + ';');
                  }
              }
          }
      
          var countdownTimer = setInterval('timer()', 1000);
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <input type="hidden" class="deal_left_seconds" data-value="1" value="10">
      <div class="box-wrapper">
          <div class="date box"> <span class="key" id="deal_days_1">00</span> <span class="value">DAYS</span> </div>
      </div>
      <div class="box-wrapper">
          <div class="hour box"> <span class="key" id="deal_hrs_1">00</span> <span class="value">HRS</span> </div>
      </div>
      <div class="box-wrapper">
          <div class="minutes box"> <span class="key" id="deal_min_1">00</span> <span class="value">MINS</span> </div>
      </div>
      <div class="box-wrapper hidden-md">
          <div class="seconds box"> <span class="key" id="deal_sec_1">00</span> <span class="value">SEC</span> </div>
      </div>

      【讨论】:

        【解决方案5】:

        const Panel = ({ label, n }) => (
          <div className="panel">
            <small>{label}</small>
            <span>{n < 10 ? '0' + n : n}</span>
          </div>
        )
        
        const App = () => {
          const [secondsLeft, setSecondsLeft] = React.useState(86403)
        
          React.useEffect(() => {
            const interval = setInterval(() => {
              if (secondsLeft == 0) {
                clearInterval(interval)
                console.log('Times up!')
              } else {
                setSecondsLeft(secondsLeft - 1)
              }
            }, 1000)
            return () => clearInterval(interval)
          })
          const days = Math.floor(secondsLeft / 24 / 60 / 60)
          const hoursLeft = Math.floor(secondsLeft - days * 86400)
          const hours = Math.floor(hoursLeft / 3600)
          const minutesLeft = Math.floor(hoursLeft - hours * 3600)
          const minutes = Math.floor(minutesLeft / 60)
          const seconds = secondsLeft % 60
        
          return (
            <div className="root">
              <Panel label="Days" n={days} />
              <Panel label="Hours" n={hours} />
              <Panel label="Minutes" n={minutes} />
              <Panel label="Seconds" n={seconds} />
            </div>
          )
        }
        
        ReactDOM.render(<App />, document.getElementById('root'))
        .root {
          display: flex;
        }
        
        .panel {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 8px;
          color: #444;
        }
        
        .panel small {
          font-size: 9px;
          text-transform: uppercase;
          font-family: sans-serif;
        }
        
        .panel span {
          font-size: 3em;
          font-weight: bold;
          font-family: serif;
        }
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
        <div id="root"></div>

        【讨论】:

          猜你喜欢
          • 2017-10-15
          • 1970-01-01
          • 1970-01-01
          • 2019-11-24
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-09-12
          • 1970-01-01
          相关资源
          最近更新 更多