logo标签列表

JavaScript计时器弹出警报框

javascript
47

我想展示警报框，但需要在一定的时间间隔内显示。这在JavaScript中是否可能？

4
你的意思是要让它在设定的时间内保持可见，然后自动隐藏吗？还是要等一会儿，然后再显示警报框？ - Doug Neiner
11个回答
43

如果您想在一定时间后出现警报，请使用以下代码：

setTimeout(function() { alert("my message"); }, time);
如果您想让一个警报在指定的时间间隔后出现和消失，那么您将没有办法。当警报触发时，浏览器会停止处理javascript代码，直到用户点击“确定”。这种情况也会在显示confirm或prompt时再次发生。
如果您想要出现/消失的行为，则建议使用类似于jQueryUI的对话框小部件。以下是一个快速示例，演示如何使用它来实现该行为。
var dialog = $(foo).dialog('open');
setTimeout(function() { dialog.dialog('close'); }, time);
但是如何打开一个简单的对话框并在其中显示简单的文本呢？ - Nathan B
12

或许有些晚了，但以下代码能够正常工作

document.getElementById('alrt').innerHTML='<b>Please wait, Your download will start soon!!!</b>'; 
setTimeout(function() {document.getElementById('alrt').innerHTML='';},5000);

<div id='alrt' style="fontWeight = 'bold'"></div>
1
顺便提一下，上面的“5000”是以毫秒为单位的。 - user763410
6
setTimeout( function ( ) { alert( "moo" ); }, 10000 ); //displays msg in 10 seconds
我认为那样做不会起作用。代码只会显示一个提示，上面写着“未定义”。这是因为当超时回调被调用时，没有参数传递给它。 - Xavi
什么？它运行良好。当然，你必须将msg设置为某些内容。 - Bjorn
2
BJorn，感谢您的回答。但是我希望警告框在一段时间间隔后消失。 - John
@John 警告框是基于浏览器的模态对话框，无法使用JavaScript移除。您可能希望使用HTML创建非基于浏览器的警告框。有时人们将其称为DOM弹出窗口。 - Bjorn
它并没有回答这个问题。 - Nathan B
1
我使用了一个时间警报，但出现了不良反应... 浏览器会添加一些东西到窗口中。我的脚本是一个改编版，我将在下面的文本后展示它。
我找到了一个CSS弹出框脚本，它没有不必要的浏览器内容。这个脚本是由Prakash编写的：https://codepen.io/imprakash/pen/GgNMXO。我将在下面的文本后展示这个脚本。
上述CSS脚本看起来很专业，而且更加整洁。这个按钮可以是一个可点击的公司标志图像。通过禁止该按钮/图像运行函数，这意味着您可以从javascript内部运行此函数或使用CSS调用它，而无需通过单击运行它。
这个弹出警报保持在弹出它的窗口内。因此，如果您是一个多任务处理者，您不会遇到难以知道哪个警报属于哪个窗口的问题。
上述陈述是有效的...(请允许)。如何实现这些将取决于实验，因为我对CSS的了解目前还有限，但我学得很快。
CSS菜单/DHTML使用mouseover(有效声明)。
我有一个自己编写的CSS菜单脚本，是从“JavaScript for dummies”中改编而来的，可以弹出一个菜单提示。这个脚本能够工作，但是文本大小有限制，会隐藏在顶部窗口横幅下面。它可以被设置为定时警报。虽然不是很好，但我将在以下文字之后展示它。
我认为上面的Prakash脚本可能是答案，如果您能够适应的话。
接下来是一些脚本：我的改编定时窗口警报、Prakash的CSS弹出脚本、我的定时菜单警报。
1.
<html>
      <head>
            <title></title>
            <script language="JavaScript">
        // Variables
            leftposition=screen.width-350
            strfiller0='<table border="1" cellspacing="0" width="98%"><tr><td><br>'+'Alert: '+'<br><hr width="98%"><br>'
            strfiller1='&nbsp;&nbsp;&nbsp;&nbsp; This alert is a timed one.'+'<br><br><br></td></tr></table>'
            temp=strfiller0+strfiller1
        // Javascript
            // This code belongs to Stephen Mayes Date: 25/07/2016 time:8:32 am


            function preview(){
                            preWindow= open("", "preWindow","status=no,toolbar=no,menubar=yes,width=350,height=180,left="+leftposition+",top=0");
                            preWindow.document.open();
                            preWindow.document.write(temp);
                            preWindow.document.close();
                    setTimeout(function(){preWindow.close()},4000); 
            }

             </script>
      </head>
<body>
    <input type="button" value=" Open " onclick="preview()">
</body>
</html>

2.
<style>
body {
  font-family: Arial, sans-serif;
  background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}

h1 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: #06D85F;
  margin: 80px 0;
}

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}
</style>
<script>
    // written by Prakash:- https://codepen.io/imprakash/pen/GgNMXO 
</script>
<body>
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
    <a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
    <div class="popup">
        <h2>Here i am</h2>
        <a class="close" href="#">&times;</a>
        <div class="content">
            Thank to pop me out of that button, but now i'm done so you can close this window.
        </div>
    </div>
</div>
</body>

3.

<HTML>
<HEAD>
<TITLE>Using DHTML to Create Sliding Menus (From JavaScript For Dummies, 4th Edition)</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- Hide from older browsers

function displayMenu(currentPosition,nextPosition) {

    // Get the menu object located at the currentPosition on the screen
    var whichMenu = document.getElementById(currentPosition).style;

    if (displayMenu.arguments.length == 1) {
        // Only one argument was sent in, so we need to
        // figure out the value for "nextPosition"

        if (parseInt(whichMenu.top) == -5) {
            // Only two values are possible: one for mouseover
            // (-5) and one for mouseout (-90). So we want
            // to toggle from the existing position to the
            // other position: i.e., if the position is -5,
            // set nextPosition to -90...
            nextPosition = -90;
        }
        else {
            // Otherwise, set nextPosition to -5
            nextPosition = -5;
        }
    }

    // Redisplay the menu using the value of "nextPosition"
    whichMenu.top = nextPosition + "px";
}

// End hiding-->
</SCRIPT>

<STYLE TYPE="text/css">
<!--

.menu {position:absolute; font:10px arial, helvetica, sans-serif; background-color:#ffffcc; layer-background-color:#ffffcc; top:-90px}
#resMenu {right:10px; width:-130px}
A {text-decoration:none; color:#000000}
A:hover {background-color:pink; color:blue}

 -->

</STYLE>

</HEAD>

<BODY BGCOLOR="white">

<div id="resMenu" class="menu" onmouseover="displayMenu('resMenu',-5)" onmouseout="displayMenu('resMenu',-90)"><br />
<a href="#"> Alert:</a><br>
<a href="#"> </a><br>
<a href="#"> You pushed that button again... Didn't yeah? </a><br>
<a href="#"> </a><br>
<a href="#"> </a><br>
<a href="#"> </a><br>
</div>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
<input type="button" value="Wake that alert up" onclick="displayMenu('resMenu',-5)">
</BODY>
</HTML>
1
简而言之，答案是否定的。一旦您显示了alert、confirm或prompt，直到用户通过单击其中一个按钮返回控制，脚本就不再控制。
要做您想要的事情，您需要使用DOM元素，如div，在指定时间后显示，然后隐藏它。如果您需要是模态的（接管页面，不允许进一步操作），则还需要进行其他工作。
当然，您可以使用其中许多“对话框”库之一。一个迅速想到的是jQuery UI对话框小部件。
1

使用details元素进行切换的纯HTML + CSS 5秒警告框。

details > p {
  padding: 1rem;
  margin: 0
}

details[open] {
  visibility: hidden;
  position: fixed;
  width: 33%;
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
  transform-origin: center center;
  outline: 10000px #000000d4 solid;
  animation: alertBox 5s;
  border: 15px yellow solid
}

details[open] summary::after {
  content: '❌';
  float: right
}

@keyframes alertBox {
  0%   { visibility: unset}
  100% { visibility: hidden }
}
<details>
  <summary>Show the box 5s</summary>
  <p>HTML and CSS popup with 5s tempo.</p>
  <p><b>Powered by HTML</b></p>
</details>

注：当关闭时，可见性保持隐藏，尚未找到从CSS中恢复它的方法，我们可能需要使用js来切换类以再次显示它。如果有人只用CSS找到了方法，请编辑此帖子！！
0

通过使用这段代码，您可以在警告框上设置计时器，并且它将在10秒后弹出。

setTimeout(function(){
         alert("after 10 sec i will start");
         },10000);
0
如果您正在寻找一个在一定时间后消失的警告框，您可以尝试使用jQuery UI对话框小部件。
0

工具提示可以用作警报。这些可以定时出现和消失。

CSS可用于创建工具提示和菜单。有关此内容的更多信息可以在“JavaScript for Dummies”中找到。对于这本书的标签，我们很抱歉...并不是在暗示什么。

阅读其他人在这里的答案，我意识到了自己思考/问题的答案。SetTimeOut可以应用于工具提示。JavaScript可以触发它们。

1
欢迎来到Stack Overflow！请记住，您正在回答未来读者的问题。给出一些示例可以帮助那些人更好地了解您提到的方法。 - Blue
0
你现在可以使用HTMLDialogElement。
在这个例子中，当你点击按钮时会创建一个对话框，并创建一个超时函数来关闭它： 

async function showMessage(message) {
  const dialog = document.createElement("dialog");
  document.body.appendChild(dialog);
  dialog.innerText = message;
  dialog.show();
  setTimeout(function () {
    dialog.close();
  }, 1000);
}
<button class="btn" onclick="showMessage('This is my message')">click me!</button>

如果您想的话，可以在codepen上进行测试。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接