每隔「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>