Question

我创建了几个输入，它们输入到JavaScript命令中以创建自定义语句。用户输入或选择的任何内容都会添加到句子框架中。当用户选择提交时，该句子将在文本区域中创建。

我想在我的应用程序中添加一个计时器，该计时器在用户开始在第一个输入字段中输入时启动，并在用户点击“提交”时停止。用户可以看到该计时器。我将如何创建它？

<!DOCTYPE html>
<html>

  <head>
	<title>Hi</title>

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

	<style type="text/css">
  table,td,th {margin-left: auto;margin-right: auto}
  .display {display: flex;align-items: center;justify-content: center;}
  p {text-align: center;}
  textarea {display: block;margin-left:auto;margin-right: auto;}
  .chosen-select {width:200px}
	</style>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

  <script type="text/javascript">

  function sentence() {
    document.getElementById("s1").value = "";// reset
    document.getElementById("s1").style.display = "block";
    document.getElementById("r1").style.display = "block";

    if (document.getElementById("z1").value == "") {
      alert("Year, Make, and Model are needed");
      document.getElementById("z1").focus();
    }

    else {
      const input1 = document.getElementById("z1").value;

            var input3 = $('#z3').val();
            console.log(input3);

            var input3Formatted = "";
            if(input3.length==1){
              // Only one value...
              input3Formatted = input3[0];
            }
            if(input3.length==2){
              // Two values... Just add and "and"
              input3Formatted = input3[0]+" and "+input3[1];
            }
            if(input3.length>2){
              // more than 2 values...
              for(i=0;i<input3.length-1;i++){
                input3Formatted += input3[i]+", ";
              }
              input3Formatted += "and "+input3[input3.length-1];
            }



            const input5 = "It has minor curb rash on the "+input3Formatted+"."
            const input7 = document.getElementById("z5").value;




      document.getElementById("s1").value =
        "This is my " +input1+ ". It is in good condition.The vehicle's rims have curb rash. "+input5+" The "+input1+"'s color is "+input7+"."

    }

  }

  function reset() {
    document.getElementById("s1").value = "";
  }

</script>

<script type="text/javascript">
  $(function() {
    $(".chosen-select").chosen({
      disable_search_threshold: 4
    })
});
</script>


  </head>

  <body>
    <table>
      <tr>
        <td>
          <input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100" >
        </td>
        <td>
            <select data-placeholder="Minor Curb Rash" name="minorrash" multiple class="chosen-select" id="z3">
              <option value=""></option>
              <option value="front left rim">Front Left Rim</option>
              <option value="back left rim">Back Left Rim</option>
              <option value="front right rim">Front Right Rim</option>
              <option value="back right rim">Back Right Rim</option>
            </select>
          </td>
          <td>
            <input type="text" id="z5" placeholder="Color" name="name" maxlength="100">
          </td>
        </tr>
    </table>
    <br>
    <div class="display">
      <button onclick="sentence()"> Submit </button>
    </div>
    <hr>
    <br>
    <textarea rows="10" cols="100" id="s1"></textarea>
    <br>
    <p></p>

    <div class="display">
      <button onclick="reset()" id="r1">Reset</button>
    </div>

  </body>
</html>

Answer 1

将div添加到HTML中以显示经过的秒数。

在按下键盘上的输入时，触发setTimeout()并使用回调来更新经过的时间，并在提交时使用clearTimeout()停止计时器。

有关更多信息，请参见：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

选择提交后停止的计时器

1 个答案: