每隔“X”分钟显示DIV消息？

Question

这是我的fiddle视觉理解。我试图每5分钟在左上方显示一条消息。我想让它闪烁几次，然后慢慢消失。我在CSS中并不擅长，并认为它应该用JavaScript来完成。我希望消息位于圆角框内。以下是我的CSS。

在此先感谢！

HTML：

<div id="container"> 
    <div id="map_size" class="map_size"> 
     <div id="msg"> 
     new records available.   
     </div>  
    </div> 
    </div> 

CSS：

/*body*/ 
body{ 
    margin:0px auto; 
    width:80%; 
    height:80%; 
    font-family: Verdana,Geneva,sans-serif; 
} 

/*container for all divs inside*/ 
#container { 
    width:1450px; 
} 

/*map size*/ 
#map_size{ 
    width:1190px; 
    height:1300px; 
    background:#0099FF; 
    border-style: solid; 
    border-color: black; 
    position: relative; 
    float:left; 
} 

/*msg*/ 
.station_info_ { 
    z-index: 100; 
    position: absolute; 
    background-color:white; 
    border-radius: 5px; 
    height: 200px; 
    margin-left: 50px; 
    width: 275px; 
    border:4px solid black; 
} 

JS：我不想要的消息时页面laoded直到5分钟已过显现。之后，我希望它每5分钟显示一次。这怎么可能？

<script type="text/javascript"> 
    $('document').ready(function(){ 
     window.setInerval('test()',3000); 
    }); 

    function test(){ 
    $('#msg').toggle(); 
    } 
</script> 

Answer 1

这可以通过setTimeout()完成后做setInterval()来实现。

工作代码片段：

（我设置的时间为3秒只是让你可以迅速查看您可以将其更改为5分钟。）

$('document').ready(function(){ 
 
    
 
    $('#msg').hide(); 
 
    
 
    window.setTimeout(
 
     function(){ 
 
      $('#msg').show(); 
 
      setInterval(function(){ $('#msg').toggle(); }, 3000); 
 
     }   
 
     ,3000); 
 
});

body{ 
 
    margin:0px auto; 
 
    width:80%; 
 
    height:80%; 
 
    font-family: Verdana,Geneva,sans-serif; 
 
} 
 

 
/*container for all divs inside*/ 
 
#container { 
 
    width:1450px; 
 
} 
 

 
/*map size*/ 
 
#map_size{ 
 
    width:1190px; 
 
    height:1300px; 
 
    background:#0099FF; 
 
    border-style: solid; 
 
    border-color: black; 
 
    position: relative; 
 
    float:left; 
 
} 
 

 
/*msg*/ 
 
.station_info_ { 
 
    z-index: 100; 
 
    position: absolute; 
 
    background-color:white; 
 
    border-radius: 5px; 
 
    height: 200px; 
 
    margin-left: 50px; 
 
    width: 275px; 
 
    border:4px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="map_size" class="map_size"> 
 
     <div id="msg"> 
 
      new records available.   
 
     </div>  
 
    </div> 
 
</div>

jsFiddle demo

Answer 2

setInterval(function(){ alert("After 3000 milliseconds"); }, 3000);使用

From MDN：

.setInterval（）调用的函数或反复执行一个代码段，其中每个调用该函数之间的固定的时间延迟。返回一个intervalID。

编辑：

1. 你必须创建自己的弹出式DIV（谷歌搜索），并显示一条消息。
2. 然后你可以使用.hide()隐藏该div显示

后，直到用户与其进行交互，则不能关闭一个警告框，javacript。

Answer 3

如果您想添加一些动画可以使用animate.css，如下面的演示。您也可以使用jQuery动画，但animate.css更易于使用，并且很多eaiser可以尝试不同的动画。

您只需更改动画名称即可。

查看animate.css网页以查看可用的动画样式。

从哈里克里希南提示完美的作品。 （我在演示中使用过它。）

行$msg.show().removeClass().toggleClass(flag ? inAnimation : outAnimation);是有点棘手。 它显示div和切换到存储在inAnimation中的css。在下一个时间间隔内，该标志是虚假的，将使用存储在outAnimation中的css。 在应用动画CSS之前，removeClass()需要在div中没有​​其他stlyes。 （没有hide()功能，因为CSS fadeOut被自动隐藏。）

演示可在此jsFiddle。

$('document').ready(function() { 
 
    var $msg = $('#msg'); 
 
    var displayTime = 0.1; // in minutes 0.1 = 6 seconds/1 = 1 min. 
 
    var flag = true; 
 
    
 
    $msg.hide(); 
 

 
    setInterval(
 

 
    function() { 
 
     var inAnimation = 'fadeIn animated'; 
 
     var outAnimation = 'fadeOut animated'; 
 
     //console.log(flag); 
 
     $msg.show().removeClass().toggleClass(flag ? inAnimation : outAnimation); 
 
     flag ^= true; 
 
    }, displayTime * 1000 * 60); 
 
});

body { 
 
    margin:0px auto; 
 
    width:80%; 
 
    height:80%; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
} 
 
/*container for all divs inside*/ 
 
#container { 
 
    width:1450px; 
 
} 
 
/*map size*/ 
 
#map_size { 
 
    width:1190px; 
 
    height:1300px; 
 
    background:#0099FF; 
 
    border-style: solid; 
 
    border-color: black; 
 
    position: relative; 
 
    float:left; 
 
} 
 
/*msg*/ 
 
.station_info_ { 
 
    z-index: 100; 
 
    position: absolute; 
 
    background-color:white; 
 
    border-radius: 5px; 
 
    height: 200px; 
 
    margin-left: 50px; 
 
    width: 275px; 
 
    border:4px solid black; 
 
}

<link href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="map_size" class="map_size"> 
 
     <div id="msg">new records available.</div> 
 
    </div> 
 
</div>