每隔X分钟显示一次DIV消息？

debugcn 发表于 Dev

alda1234

这是我对视觉理解的小提琴。我正在尝试每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：我不希望在刷新页面之前显示该消息，直到5分钟为止。之后，我希望它每5分钟显示一次。这怎么可能？

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

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

拉胡尔·德赛（Rahul Desai）

这可以通过setInterval()在setTimeout()完成之后进行来实现。

工作代码段：

（我将计时设置为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演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。