JavaScript 带定时器的警报框

Question

I want to display the alert box but for a certain interval.我想显示警告框，但要显示一定的时间间隔。 Is it possible in JavaScript? JavaScript可以吗？

Answer 1

If you want an alert to appear after a certain about time, you can use this code:如果您希望在一段时间后出现警报，可以使用以下代码：

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

If you want an alert to appear and disappear after a specified interval has passed, then you're out of luck.如果您希望警报在指定的时间间隔过后出现和消失，那么您就不走运了。 When an alert has fired, the browser stops processing the javascript code until the user clicks "ok".当alert触发时，浏览器将停止处理 javascript 代码，直到用户单击“确定”。 This happens again when a confirm or prompt is shown.当显示confirm或prompt时，会再次发生这种情况。

If you want the appear/disappear behavior, then I would recommend using something like jQueryUI's dialog widget .如果您想要出现/消失的行为，那么我建议使用类似jQueryUI's dialog widget 的东西。 Here's a quick example on how you might use it to achieve that behavior.这是一个关于如何使用它来实现该行为的快速示例。

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

Answer 2

May be it's too late but the following code works fine可能为时已晚，但以下代码工作正常

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

In short, the answer is no.简而言之，答案是否定的。 Once you show an alert , confirm , or prompt the script no longer has control until the user returns control by clicking one of the buttons.显示alert 、 confirm或prompt ，脚本将不再具有控制权，直到用户通过单击其中一个按钮返回控制权。

To do what you want, you will want to use DOM elements like a div and show, then hide it after a specified time.为了做你想做的事，你需要使用 DOM 元素，比如div和 show，然后在指定的时间后隐藏它。 If you need to be modal (takes over the page, allowing no further action) you will have to do additional work.如果您需要模态化（接管页面，不允许进一步操作），您将不得不做额外的工作。

You could of course use one of the many "dialog" libraries out there.您当然可以使用那里的众多“对话”库之一。 One that comes to mind right away is the jQuery UI Dialog widget马上想到的是jQuery UI Dialog 小部件

Answer 5

I finished my time alert with a unwanted effect.... Browsers add stuff to windows.我完成了我的时间警报，但产生了不需要的效果......浏览器向窗口添加了东西。 My script is an aptated one and I will show after the following text.我的脚本是改编的，我将在以下文本之后展示。

I found a CSS script for popups, which doesn't have unwanted browser stuff.我找到了一个弹出窗口的 CSS 脚本，它没有不需要的浏览器内容。 This was written by Prakash:- https://codepen.io/imprakash/pen/GgNMXO .这是由 Prakash 编写的：- https://codepen.io/imprakash/pen/GgNMXO 。 This script I will show after the following text.这个脚本我将在以下文本之后展示。

This CSS script above looks professional and is alot more tidy.上面的这个 CSS 脚本看起来很专业，而且更整洁。 This button could be a clickable company logo image.此按钮可以是可点击的公司徽标图像。 By suppressing this button/image from running a function, this means you can run this function from inside javascript or call it with CSS, without it being run by clicking it.通过禁止此按钮/图像运行函数，这意味着您可以从 javascript 内部运行此函数或使用 CSS 调用它，而无需通过单击它来运行它。

This popup alert stays inside the window that popped it up.此弹出警报保留在弹出它的窗口内。 So if you are a multi-tasker you won't have trouble knowing what alert goes with what window.因此，如果您是一个多任务处理者，那么您就不会知道哪个窗口有什么警报。

The statements above are valid ones.... (Please allow).以上陈述是有效的......（请允许）。 How these are achieved will be down to experimentation, as my knowledge of CSS is limited at the moment, but I learn fast.如何实现这些将取决于实验，因为目前我对 CSS 的了解有限，但我学得很快。

CSS menus/DHTML use mouseover(valid statement). CSS 菜单/DHTML 使用鼠标悬停（有效声明）。

I have a CSS menu script of my own which is adapted from 'Javascript for dummies' that pops up a menu alert.我有一个自己的 CSS 菜单脚本，它改编自 'Javascript for dummies'，它会弹出一个菜单警报。 This works, but text size is limited.这有效，但文本大小有限。 This hides under the top window banner.这隐藏在顶部窗口横幅下。 This could be set to be timed alert.这可以设置为定时警报。 This isn't great, but I will show this after the following text.这不是很好，但我会在下面的文字之后展示这一点。

The Prakash script above I feel could be the answer if you can adapt it.如果你能改编它，我觉得上面的 Prakash 脚本可能就是答案。

Scripts that follow:- My adapted timed window alert, Prakash's CSS popup script, my timed menu alert.下面的脚本：- 我改编的定时窗口警报、Prakash 的 CSS 弹出脚本、我的定时菜单警报。

1. 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. 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. 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

tooltips can be used as alerts.工具提示可以用作警报。 These can be timed to appear and disappear.这些可以定时出现和消失。

CSS can be used to create tooltips and menus. CSS 可用于创建工具提示和菜单。 More info on this can be found in 'Javascript for Dummies'.更多信息可以在“Javascript for Dummies”中找到。 Sorry about the label of this book... Not infuring anything.抱歉这本书的标签......没有激怒任何东西。

Reading other peoples answers here, I realized the answer to my own thoughts/questions.在这里阅读其他人的答案，我意识到了我自己的想法/问题的答案。 SetTimeOut could be applied to tooltips. SetTimeOut 可以应用于工具提示。 Javascript could trigger them. Javascript 可以触发它们。

Answer 8

Pure html 5 seconds alert box using the details element toggling.使用details元素切换的纯 html 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>

Answer 9

by using this code you can set the timer on the alert box , and it will pop up after 10 seconds.通过使用此代码，您可以在警报框上设置计时器，它会在 10 秒后弹出。

setTimeout(function(){
         alert("after 10 sec i will start");
         },10000);

Answer 10

You can now use the HTMLDialogElement .您现在可以使用HTMLDialogElement 。

In this example a dialog is created when you click the button, and a timeout function is created to close it:在此示例中，当您单击按钮时会创建一个对话框，并创建超时 function 以关闭它：

 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>

If you want you can test it on codepen .如果你愿意，你可以在codepen上测试它。

JavaScript 带定时器的警报框

问题描述

10 个解决方案

解决方案1
41 已采纳 2009-12-26 08:09:58

解决方案2
11 2014-07-13 06:00:46

解决方案3
8 2009-12-26 08:04:16

解决方案4
1 2009-12-26 08:12:24

解决方案5
1 2016-07-25 10:24:48

解决方案6
0 2012-08-30 14:14:42

解决方案7
0 2016-07-24 12:30:50

解决方案8
0 2021-03-02 20:54:25

解决方案9
0 2021-10-13 11:03:32

解决方案10
0 2023-01-27 17:37:02

JavaScript 带定时器的警报框

问题描述

10 个解决方案

解决方案1 41 已采纳 2009-12-26 08:09:58

解决方案2 11 2014-07-13 06:00:46

解决方案3 8 2009-12-26 08:04:16

解决方案4 1 2009-12-26 08:12:24

解决方案5 1 2016-07-25 10:24:48

解决方案6 0 2012-08-30 14:14:42

解决方案7 0 2016-07-24 12:30:50

解决方案8 0 2021-03-02 20:54:25

解决方案9 0 2021-10-13 11:03:32

解决方案10 0 2023-01-27 17:37:02

解决方案1
41 已采纳 2009-12-26 08:09:58

解决方案2
11 2014-07-13 06:00:46

解决方案3
8 2009-12-26 08:04:16

解决方案4
1 2009-12-26 08:12:24

解决方案5
1 2016-07-25 10:24:48

解决方案6
0 2012-08-30 14:14:42

解决方案7
0 2016-07-24 12:30:50

解决方案8
0 2021-03-02 20:54:25

解决方案9
0 2021-10-13 11:03:32

解决方案10
0 2023-01-27 17:37:02