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：我不想在页面被装满之前显示消息，直到5分钟过去。之后，我希望每隔5分钟显示一次。怎么可能？

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

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

Answer 1

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

From MDN：

.setInterval（）重复调用函数或执行代码片段，每次调用该函数之间都有固定的时间延迟。返回intervalID。

修改

您必须创建自己的弹出窗口（搜索Google）并显示消息。

然后您可以在显示
后使用.hide()隐藏该div
在用户与之互动之前，您无法使用javacript关闭提醒框。

Answer 2

这可以通过在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 demo

Answer 3

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

您只需要更改动画名称。

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

来自Hari Krishnan的小费完美无缺。（我在演示中使用过它。）

行$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>

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

3 个答案: