javascript - 每 "X"分钟显示一次 DIV 消息？

Question

这是我的 fiddle用于视觉理解。我试图每 5 分钟在顶部显示一条消息。我想让它闪烁几次，然后慢慢消失。我的 CSS 不是很好，我认为它也应该用 JavaScript 来完成吗？我希望消息位于圆 Angular 框内。下面是我的 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:我不想在页面加载 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