Question

我想显示警告框但是在一定的时间间隔内。是否可以在JavaScript中使用？

Answer 1

如果您希望在某段时间后显示提醒，则可以使用以下代码：

setTimeout(function() { alert("my message"); }, time);

如果您想要在指定的间隔过后出现并消失警报，那么您就不走运了。当alert被解雇后，浏览器会停止处理javascript代码，直到用户点击“确定”为止。当显示confirm或prompt时会再次发生这种情况。

如果您想要显示/消失行为，那么我建议您使用jQueryUI's dialog widget之类的内容。这是一个关于如何使用它来实现这种行为的快速示例。

var dialog = $(foo).dialog('open');
setTimeout(function() { dialog.dialog('close'); }, time);

Answer 2

可能为时已晚，但以下代码可以正常运行

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>

Answer 3

setTimeout( function ( ) { alert( "moo" ); }, 10000 ); //displays msg in 10 seconds

Answer 4

简而言之，答案是否定的。显示alert，confirm或prompt后，脚本将无法控制，直到用户通过单击其中一个按钮返回控件。

要执行您想要的操作，您需要使用像div这样的DOM元素并显示，然后在指定时间后隐藏它。如果您需要模态（接管页面，不允许进一步操作），您将不得不做额外的工作。

你当然可以使用其中一个“对话”库。立即想到的是jQuery UI Dialog widget

Answer 5

我以不必要的效果完成了我的时间警报....浏览器向窗口添加内容。我的脚本是一个受欢迎的脚本，我将在以下文字后显示。

我找到了弹出窗口的CSS脚本，它没有不需要的浏览器内容。这是由普拉卡什写的： - https://codepen.io/imprakash/pen/GgNMXO。我将在以下文本后显示此脚本。

上面的CSS脚本看起来很专业，而且更加整洁。此按钮可以是可点击的公司徽标图像。通过禁止此按钮/图像运行函数，这意味着您可以从javascript内部运行此函数或使用CSS调用它，而无需通过单击它来运行它。

此弹出警报会保留在弹出警告的窗口内。因此，如果您是一个多任务者，那么您将无法知道什么警报与什么窗口相关。

以上陈述是有效的......（请允许）。如何实现这些将取决于实验，因为我目前对CSS的了解有限，但我学得很快。

CSS菜单/ DHTML使用鼠标悬停（有效语句）。

我有一个自己的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>

Answer 6

如果您要查找间隔后消失的警报，可以尝试使用jQuery UI Dialog小部件。

Answer 7

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

CSS可用于创建工具提示和菜单。有关这方面的更多信息，请参阅＆＃39; Javascript for Dummies＆＃39;。抱歉这本书的标签......没有任何东西。

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

Answer 8

纯 html 使用 details 元素切换的 5 秒警报框。

details > p {
  padding: 1rem;
  background: lightcoral;
  margin: 0;
  display: flex;
  flex-direction: column
}

details[open] {
  visibility: hidden;
  position: fixed;
  width: 33%;
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
  outline: 10000px #000000d4 solid;
  animation: alertBox 5s;
  border: 5px white 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>Powered by html</p>
</details>

带有计时器的JavaScript警报框

8 个答案: