Javascript 打开关闭新消息

Javascript open close new message

本文关键字：新消息 开关 Javascript      更新时间：2023-09-26

<script> 
    function closeit(){ 
    document.getElementById('avviso').setAttribute("style", "display:none");
} 
setTimeout("closeit", 3000);
</script>
#avviso{ 
    width:200px; /* Larghezza del box */ 
    padding:5px; position:fixed; z-index:5000;} 
    .box-avviso{ 
    border:4px double #940F04; /* Colore del bordo */ 
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #909090; -moz-box-shadow: 8px 8px 6px #909090; box-shadow: 8px 8px 6px #909090; 
    background-color: #FFEAE9; /* Colore di sfondo */ 
    padding: 8px; font-family: Verdana, Geneva, sans-serif; 
    color: #003366; /* Colore del testo */ 
    } 
    .testo-avviso { /* Stile di AVVISO */ 
    font-size:18pt; 
    font-weight:bold; 
    color:#B4045F; 
    text-shadow: 0px 0px 10px #BA55D3;} 
 <div id="avviso" style="left:20px; top:100px; padding:0;"> 
    <div align="right" style="margin-bottom:-15px;"><b>
<a href="javascript:closeit()" >
<font face="Arial" size="1">CHIUDI</font>&nbsp;<img valign="middle" src="https://lh6.googleusercontent.com/-80LmoXXMIi0/TnsyYeeRVnI/AAAAAAAAUgc/RShnbWF2L_c/chiudi.png" style="vertical-align:middle;" border="0"/></a></b></div> 
    <br/> 
    <fieldset class="box-avviso"> 
    <legend class="testo-avviso" align="center"></legend> 
      Nuova Comunicazione<br/>
    </fieldset>
    </div>

是否可以自动关闭此窗口Javascript，并每10秒创建新消息？

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

是的，您可以使用setInterval()而不是setTimeout()：

setInterval(closeit, 10000); //NOTE Removing double quotes arround function name

注意：您可以使用.style来管理css属性，而不是setAttribute()：

document.getElementById('avviso').style.display="none";

希望这有帮助。

function closeit(){ 
  document.querySelectorAll('.box-avviso')[0].textContent = "New message";
} 
setInterval(closeit, 3000);
#avviso{ 
  width:200px; /* Larghezza del box */ 
  padding:5px; position:fixed; z-index:5000;} 
.box-avviso{ 
  border:4px double #940F04; /* Colore del bordo */ 
  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #909090; -moz-box-shadow: 8px 8px 6px #909090; box-shadow: 8px 8px 6px #909090; 
  background-color: #FFEAE9; /* Colore di sfondo */ 
  padding: 8px; font-family: Verdana, Geneva, sans-serif; 
  color: #003366; /* Colore del testo */ 
} 
.testo-avviso { /* Stile di AVVISO */ 
  font-size:18pt; 
  font-weight:bold; 
  color:#B4045F; 
  text-shadow: 0px 0px 10px #BA55D3;}
<div id="avviso" style="left:20px; top:100px; padding:0;"> 
  <div align="right" style="margin-bottom:-15px;"><b>
    <a href="javascript:closeit()" >
      <font face="Arial" size="1">CHIUDI</font>&nbsp;<img valign="middle" src="https://lh6.googleusercontent.com/-80LmoXXMIi0/TnsyYeeRVnI/AAAAAAAAUgc/RShnbWF2L_c/chiudi.png" style="vertical-align:middle;" border="0"/></a></b></div> 
  <br/> 
  <fieldset class="box-avviso"> 
    <legend class="testo-avviso" align="center"></legend> 
    Nuova Comunicazione<br/>
  </fieldset>
</div>

相关文章：