douyun6399 2017-01-05 18:09
浏览 40
已采纳

如何用JavaScript做一个计数器

I'm making a countdown, which I want to set with a form. Also, I would like to store the data I'm sending in.

I need this counter to be called in other parts of the site as I'm doing this for the admin of a web page.

I'm not sure if local storing or AJAX would be the best option, because I don't want to add a table just for three variables.

That's my question: which way would help me better, or how can I store the data I need? Am I missing something?

Here is my form:

<form action="counter.php"  method="post" > <br>
  <p>Only numbers</p>
  <input type="number" name="year" id="year" placeholder="year" required="true"><br>
  <input type="number" name="month" id="month" placeholder="month" required="true"><br>
  <input type="number"  name="day" id="day" placeholder="day" required="true"><br>
  <br>
  <input type="submit" name="" onclick="sendData()">
</form>

My idea was to pass it by post, but it didn't work as I expected, because every time I call counter.php it sends me an "Undefined index: year" error.

Next, my counter.php:

 <?php

$dty = $_POST['year'];
$dtm = $_POST['month'];
$dtd = $_POST['day'];

echo $dty; ?>

<div class="row">    
  <div class="col-xs-12" align="rigth">
    <table class="countdownContainer" >
      <tr class="info">
        <td align="center" id="days"></td>
        <td align="center" id="hours"></td>
        <td align="center" id="minutes"></td>
        <td align="center" id="seconds"></td>
      </tr>
      <tr>
        <td class="px7" align="center">Día</td>
        <td class="px7" align="center">hora</td>
        <td class="px7" align="center">min</td>
        <td class="px7" align="center">seg</td>
      </tr>
    </table>
  </div>    
  <br><br>
</div>

<br>
</div>
</div>

Finally, I'm using this JavaScript to make the countdown. Right now it's static; the plan is to store the data somewhere so I can pass it to the countDown function.

<script type="text/javascript">

    function  countDown(){
        var now = new Date();
        var eventDay = new Date(2018,11,12);// año, dia, mes
        var currentTime = now.getTime();
        var eventTime = eventDay.getTime();

        var remTime = eventTime - currentTime;
        var s = Math.floor(remTime/1000);
        var m = Math.floor(s/60);
        var h = Math.floor(m/60);
        var d = Math.floor(h/24);

        h %= 24;
        m %= 24;
        s %= 60;

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;

        document.getElementById('days').textContent = d;
        document.getElementById('days').innerText = d;

        document.getElementById('hours').textContent = h;
        document.getElementById('minutes').textContent = m;
        document.getElementById('seconds').textContent = s;


        setTimeout(countDown, 1000);
    }

    countDown();

</script>
  • 写回答

2条回答 默认 最新

  • donglu5041 2017-01-05 18:53
    关注

    As far as i understood you want to make a basic countdown? that is running clientside. I've modified you're code to make it work, if you have any questions regarding the code feel free to ask them!

    Counter

      if(isset($_POST)) { // Check if POST is send
        if(isset($_POST['year']) && isset($_POST['month']) && isset($_POST['day'])) { // Check if post contains year, month, day
          $year = $_POST['year']; // Overule default data with post data
          $month = $_POST['month'];
          $day = $_POST['day'];
        }
      }
    ?>
    
    <div class="row">
      <div class="col-xs-12" align="rigth">
        <table class="countdownContainer" >
            <tr class="info">
              <td align="center" id="days"></td>
              <td align="center" id="hours"></td>
              <td align="center" id="minutes"></td>
              <td align="center" id="seconds"></td>
    
            </tr>
            <tr>
              <td class="px7" align="center">Día</td>
              <td class="px7" align="center">hora</td>
              <td class="px7" align="center">min</td>
              <td class="px7" align="center">seg</td>
            </tr>
        </table>
        </div>
    </div>
    
    <script type="text/javascript">
    var year = "<?=$year?>"; // Create javascript variables filled with php variables
    var month = "<?=$month?>";
    var day = "<?=$day?>";
    countDown();
    
    function  countDown(){
      var now = new Date();
      var eventDay = new Date(year,month,day);// año, dia, mes
      var currentTime = now.getTime();
      var eventTime = eventDay.getTime();
    
      var remTime = eventTime - currentTime;
      var s = Math.floor(remTime/1000);
      var m = Math.floor(s/60);
      var h = Math.floor(m/60);
      var d = Math.floor(h/24);
    
      h %= 24;
      m %= 24;
      s %= 60;
    
      h = (h < 10) ? "0" + h : h;
      m = (m < 10) ? "0" + m : m;
      s = (s < 10) ? "0" + s : s;
    
      document.getElementById('days').textContent = d;
      document.getElementById('days').innerText = d;
    
      document.getElementById('hours').textContent = h;
      document.getElementById('minutes').textContent = m;
      document.getElementById('seconds').textContent = s;
    
      setTimeout(countDown, 1000);
    }
    </script>
    

    Index

    <form action="counter.php" method="POST">
      <p>Only numbers</p>
      <input type="number" name="year" id="year" placeholder="year" required="true">
      <input type="number" name="month" id="month" placeholder="month" required="true">
      <input type="number"  name="day" id="day" placeholder="day" required="true">
      <input type="submit" value="Set timer">
    </form>
    

    UPDATE 05-01-2017 (21:54) Found a way to store the "year", "month", "day" variables in a text document. this way its possible to edit data and keep it as long as the server is "alive".

    New counter page

      // Set default timer data
      $year = "2018";
      $month = "11";
      $day = "12";
    
      if(isset($_POST)) { // Check if POST is send
        if(isset($_POST['year']) && isset($_POST['month']) && isset($_POST['day'])) { // Check if post contains year, month, day
          $year = $_POST['year']; // Overule default data with post data
          $month = $_POST['month'];
          $day = $_POST['day'];
    
          file_put_contents($filename, $year + "," + $month + "," + $day);
        }
      } else if(file_exists($filename)) {
          $fileData = file_get_contents($filename);
          $fileData = explode(",", $fileData);
    
          $year = $fileData[0];
          $month = $fileData[1];
          $month = $fileData[2];
      }
    ?>
    
    <div class="row">
      <div class="col-xs-12" align="rigth">
        <table class="countdownContainer" >
            <tr class="info">
              <td align="center" id="days"></td>
              <td align="center" id="hours"></td>
              <td align="center" id="minutes"></td>
              <td align="center" id="seconds"></td>
    
            </tr>
            <tr>
              <td class="px7" align="center">Día</td>
              <td class="px7" align="center">hora</td>
              <td class="px7" align="center">min</td>
              <td class="px7" align="center">seg</td>
            </tr>
        </table>
        </div>
    </div>
    
    <script type="text/javascript">
    var year = "<?=$year?>";
    var month = "<?=$month?>";
    var day = "<?=$day?>";
    
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    
    countDown();
    
    function  countDown(){
      var now = new Date();
      var end = new Date(year,month,day);// año, dia, mes
      var distance = end - now;
      if(distance > 0) {
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);
    
        document.getElementById('days').innerHTML = days;
        document.getElementById('hours').innerHTML = hours;
        document.getElementById('minutes').innerHTML = minutes;
        document.getElementById('seconds').innerHTML = seconds;
    
        setTimeout(countDown, 1000);
      }
    }
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 python使用pulp线性优化时报错
  • ¥15 开源或低价数据中台哪个最好
  • ¥15 arduino编程出现字符串疑似覆盖现象
  • ¥15 我的b站在没有碰到屏幕的情况下偶尔会自动跳出进度条,就像在屏幕上点了一下一样,但我并没有点。而且视频进度并没有变。这可能是什么原因造成的?
  • ¥30 STK matlab python仿真
  • ¥15 关于IMageEnView 图标定位问题
  • ¥20 求解答(matlab)
  • ¥30 ffmpeg库使用过程中遇到的问题
  • ¥15 pyqt5 中python如何通过Qtwebchannel主动发消息给web前端
  • ¥15 关于HTML中title获取xml内容的问题