Home>
index.html<! DOCTYPE html><html><head><meta charset = "utf-8"><title>Stopwatch</title><link rel = "stylesheet" href = "styles.css"><script src = "http://code.jquery.com/jquery-1.6.4.min.js"></script></head><body>   00: 00.000   <button>Start</button><button>Stop</button><button>Reset</button><select name = "mintus" id = "mintus">  <option value = "time_1">30</option>  <option value = "time_2">60</option>  <option value = "time_3">90</option></select><button>TimeWay</button>                     <button>Calculation</button>         <button>php</button>  <script src = "main.js"></script></script></body></html>
main js
'use strict';
{
  var timeoutways = [];
  const timer = document.getElementById ('timer');
  const start = document.getElementById ('start');
  const stop = document.getElementById ('stop');
  const reset = document.getElementById ('reset');
  const mintus = document.getElementById ('mintus');
  const math = document.getElementById ('sum');
  const sum_account = document.getElementById ('sum_account');
  const timeway = document.getElementById ('timeway');
  const sum_way = document.getElementById ('sum_way');
  let startTime;
  let timeoutId;
  let elapsedTime = 0;

  function countUp () {
    const d = new Date (Date.now () --startTime + elapsedTime);
    const m = String (d.getMinutes ()). padStart (2, '0');
    const s = String (d.getSeconds ()). padStart (2, '0');
    const ms = String (d.getMilliseconds ()). padStart (3, '0');
    timer.textContent = `${m}: ${s}. ${ms}`;timeoutId = setTimeout (() =>{
      countUp ();
    },

 Ten);
  }
  function setButtonStateInitial () {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = true;
  }
  function setButtonStateRunning () {
    start.disabled = true;
    stop.disabled = false;
    reset.disabled = true;
  }
  function setButtonStateStopped () {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = false;
  }
  // Calculation of remaining time
  function calculateRemaining () {
    let timeTxt = timer.textContent.replace (":", ""). replace (".", "");
    const timeresult = mintus.value;
    switch (timeresult) {
      case'time_1':
        const result1 = String (3000000 --timeTxt);
        reguler (result1);
         break;
      case'time_2':
        const result2 = String (6000000 --timeTxt);
        reguler (result2);
        break;
      case'time_3':
        const result3 = String (9000000 --timeTxt);
        reguler (result3);
        break;
      }
  }
    //Regular expressions
    function reguler (regular) {
        const regulation =/(\ d {2}) (\ d {2}) (\ d {3}) /;
        const timemath = regular.replace (regulation,'$1 minute $2 seconds $3');
        sum_account.innerHTML = timemath;
    }
    // Time display of progress
    function way () {
      let timeTxt = timer.textContent.replace (":", ""). replace (".", "");
      const regulation2 =/(\ d {2}) (\ d {2}) (\ d {3}) /;
      const timemath2 = timeTxt.replace (regulation2,'$1 minute $2 seconds $3');
      timeoutways.push (timemath2);
      sum_way.innerHTML = `<ul><input>${timeoutways.join ("<ul></ul><input>")}</ul>`;
    }setButtonStateInitial ();
  start.addEventListener ('click', () =>{
    setButtonStateRunning ();
    startTime = Date.now ();
    countUp ();
  });
  stop.addEventListener ('click', () =>{
    setButtonStateStopped ();
    clearTimeout (timeoutId);
    elapsedTime + = Date.now () --startTime;
  });
  reset.addEventListener ('click', () =>{
    setButtonStateInitial ();
    timer.textContent = '00: 00.000';
    elapsedTime = 0;
  });

  math.addEventListener ('click', () =>{
    stop.click ();
    calculateRemaining ();
  });
  timeway.addEventListener ('click', () =>{
     way ();
    });
    var timers = document.getElementById ("timers")
    // ajax processing
    $(function () {
      $('# php'). click (function () {
        $.ajax ({{
          url: "more.php",
          type: "post",
          dataType: "json",
          data: {'timer': $("# timer"). val ()}
        }) .done (function (response) {
          let arrye = JSON.parse (response);
          alert (arrye);
        }). fall (function () {
          alert ('not');
        })
      })
    })

}
more.php<? php
$timer = $_POST ('timer');
$arrye = [$timer];
echo json_decode ($arrye);

Currently, what I want to do is that the current tool only displays the time with javascript, so
If i press the button called PHP for the displayed value, it will be stored in BD or text, and I want to do new time management.

As a step toward that, we are now returning the value of timer in php type through ajax.
If i set alert in the done part, it will be displayed, but variables with values ​​etc. will not come back and i am struggling.

Please tell us any knowledge or something close to the web, thank you.

  • Answer # 1

    Let's check step by step where the process is stopped.
    If "If you install alert in the done part, it will be displayed", it means that Ajax communication is occurring, so the confirmation point is beyond that.

    // ajax processing
    $(function () {
      $('# php'). click (function () {
        $.ajax ({{
          url: "more.php",
          type: "post",
          dataType: "json",
          data: {'timer': $("# timer"). val ()}
        }) .done (function (response) {
          console.log (response);// Check here if the contents of the response match your expectations
          let arrye = JSON.parse (response);
          alert (arrye);
        }). fall (function () {
          alert ('not');
        })
      })
    })
    // I'm also worried that it suddenly became jQuery even though it was vanilla so far ...
    <? php
    $timer = $_POST ('timer');
    var_dump ($timer);// Make sure the value passed is what you expected
    $arrye = [$timer];
    var_dump ($arrye);// Make sure the value before JSON is what you expected
    echo json_decode ($arrye);

  • Answer # 2

    $("# timer"). val ()

    Since "#timer" is a div, it doesn't have a value?
    $("#timer"). text () ...