javascript - 如何将超时功能与 JavaScript 中的文本输入相匹配？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 5 年前。

Improve this question

我正在用 JavaScript 构建一个弹出窗口，但代码出现了一些问题。我正在尝试构建一个弹出窗口，用户可以在文本输入中输入一个数字(假设在 1-10 秒之间)，然后弹出窗口将在他输入的秒数后显示。

function popup() {    
  document.getElementById("outside").style.display = "block"; 
}
setTimeout(popup, 3000); 
function span3() {
  document.getElementById("outside").style.display="none";
}
// catching the value from the user (lets say numbers between 1-5)
var x;
x = document.getElementById("puttime").value;
// putting the value that got into the settimeout
if (x=2) {
  document.getElementById("mybutton").onclick = setTimeout(popup, x); 
}

<input type="text" id="puttime"> 
<button id="mybutton" onclick="setTimeout(popup, 3000);">few seconds</button>
<div id="outside">
  <div id="thediv">
    <p>Some text in the Modal..</p>
    <p id="close" onclick="span3()">&times;</p>
  </div>
</div>

Answer 1

既然你没有给出任何生命迹象，我决定猜测你想要什么:-D

var popup = document.getElementById("popup");
var input = document.getElementById("popup-delay");
var showButton = document.getElementById("popup-show");
var closeButton = document.getElementById("popup-close");

showButton.addEventListener("click", function onShowClick () {
  // get the user input and convert it into a number
  var value = parseInt(input.value, 10);
  // if the input is not a number
  if (isNaN(value)) {
    // warn the user
    alert("NaN (Not A Number) !");
  }
  // otherwise
  else {
    // convert milliseconds to seconds
    var delay = value * 1000;
    // turn off the click listener on the "Show" button
    showButton.removeEventListener("click", onShowClick);
    // start the countdown to show the popup
    setTimeout(function () {
      // show the popup
      popup.style.display = "block";
      // turn on the click listener on the "Close" button
      closeButton.addEventListener("click", function onCloseClick () {
        // turn off the click listener on the "Close" button
        closeButton.removeEventListener("click", onCloseClick);
        // turn on the click listener on the "Show" button
        showButton.addEventListener("click", onShowClick);
        // hide the popup
        popup.style.display = "none";
      });
    }, delay);
  }
});

#popup {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: yellow;
  padding: 1em;
}

Delay: <input type="text" id="popup-delay" />
<button type="button" id="popup-show">Show</button>
<div id="popup">
  <p>I am a popup :-)</p>
  <button type="button" id="popup-close">Close</button>
</div>