Question

我目前正在为任何错误创建一个自定义警报框，以下是我正在使用的代码，该警报框看起来不错，但是在600毫秒后不会自动关闭，只有在手动单击关闭按钮。我在这里做错了什么以及如何自动消失警报框

Answer 1

我将setTimeout移到了click事件之外，并设置了div值：

function displayError(errorMessage) {
    var messageObject = "<div class='alert' id='alertbox'><span class='closebtn' id='closebtn'>&times;</span><strong><font color='#f44336;'>Error!</font></strong>"+errorMessage+"</div>"
    document.getElementById("divMessageContainer").innerHTML += messageObject;
    var close = document.getElementsByClassName("closebtn");
    var i;
    for (i = 0; i < close.length; i++) {
        var div = close[i].parentElement;
        setTimeout(function(){div.style.display = "none"; }, 600);
        close[i].onclick = function(){            
            div.style.opacity = "0";            
        }
    }
}

div#alertbox{padding: 10px;bottom: 40px;left: 5px; max-width: 800px; margin-left: auto;margin-right: auto;z-index: 99; max-width: 700px; color: #000;background-color: #EEE;border-radius: 10px; padding-right: 5px; padding-left: 10px;}
span#closebtn {margin-left: 15px;color: black;font-weight: bold;float: right;font-size: 22px;line-height: 20px; cursor: pointer; transition: 0.3s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="divMessageContainer"></div>
<button onclick="displayError()">button</button>
</body>
</html>

Answer 2

我已按照以下步骤操作，并修复了此处报告的问题，以下方法使我可以同时显示多个警报框，并根据消息号自动关闭它们，而不必同时关闭所有警报框

URLConnection con = (new URL(url)).openConnection();
InputStream theStreamIReceive = con.getInputStream();
long start = nanoTime();
String body = IOUtils.toString(theStreamIReceive, encoding);
System.out.println("Time : " + ((double) (nanoTime()-start) /1000000000);
System.out.println("Number of chars :" +body.length());

Answer 3

我建议使用remove()删除警报框，这样就不会留下任何关闭按钮，并且可以删除for循环。

也许这是一个可能的解决方案：

function displayError(errorMessage) {
  var messageObject = "<div id='moo' class='alert alert-danger alert-dismissible' role='alert' auto-close='2000'><div class='alert' id='alertbox'><span class='closebtn' id='closebtn'>&times;</span><strong><font color='#f44336;'>Error!</font></strong>"+errorMessage+"</div>";
  var container = document.getElementById("divMessageContainer");
  container.innerHTML += messageObject;
  var box = document.getElementById("alertbox");
  var close = document.querySelector(".closebtn");
  close.onclick = function(){
    box.remove();
  };
  setTimeout(function(){
    box.style.opacity = 0;
    setTimeout(function() {
      box.remove();
    }, 1000);
  }, 2000);
}

div#alertbox{padding: 10px;bottom: 40px;left: 5px; max-width: 800px; margin-left: auto;margin-right: auto;z-index: 99; max-width: 700px; color: #000;background-color: #EEE;border-radius: 10px; padding-right: 5px; padding-left: 10px; -webkit-transition: opacity 1s linear;}
span#closebtn {margin-left: 15px;color: black;font-weight: bold;float: right;font-size: 22px;line-height: 20px; cursor: pointer; transition: 0.3s;}

<div id="divMessageContainer"></div>
<button onclick="displayError()">button</button>

我还向transition添加了opacity，因此，如果用户不手动关闭警报框，它将消失（在这种情况下，是2秒钟，但是您可以在这段时间内玩游戏）

Answer 4

function displayError(errorMessage) {
    var messageObject = "<div id='moo' class='alert alert-danger alert-dismissible' role='alert' auto-close='2000'><div class='alert' id='alertbox'><span class='closebtn' id='closebtn'>&times;</span><strong><font color='#f44336;'>Error!</font></strong>"+errorMessage+"</div>"
    document.getElementById("divMessageContainer").innerHTML += messageObject;
    var close = document.getElementsByClassName("closebtn");
    var i, index;
    for (i = 0; i < close.length; i++) {
        setTimeout(function(){
        	close[index].parentElement.style.display = "none";
            index++;
        }, 600);
        close[i].onclick = function(){
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}

尝试这个。使用异步时要小心循环。

setTimeout（function（）在javascript中不起作用

4 个答案: