suchen

Heim >Web-Frontend >js-Tutorial >js-Popup-Eingabeaufforderungsfeld, Beispielcode in der unteren rechten Ecke_Javascript-Kenntnisse

js-Popup-Eingabeaufforderungsfeld, Beispielcode in der unteren rechten Ecke_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:20:311308Durchsuche

In diesem Artikel wird der Beispielcode des Werbeinformationsfelds erläutert, das in der unteren rechten Ecke der Webseite angezeigt wird, und er wird als Referenz für alle freigegeben. Der spezifische Inhalt lautet wie folgt:

Rendering:

Spezifischer Code: 

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>网页右下角的信息框</title>
</head>
<style type="text/css">
#winpop {
 width:200px;
 height:0px;
 position:absolute;
 right:0;
 bottom:0;
 border:1px solid #666;
 margin:0;
 padding:1px;
 overflow:hidden;
 display:none;
}
#winpop .title{
 width:100%;
 height:22px;
 line-height:20px;
 background:#FFCC00;
 font-weight:bold;
 text-align:center;
 font-size:12px;
}
#winpop .con{
 width:100%;
 height:90px;
 line-height:80px;
 font-weight:bold;
 font-size:12px;
 color:#FF0000;
 text-decoration:underline;
 text-align:center
}
#silu{
 font-size:12px;
 color:#666;
 position:absolute;
 right:0;
 text-decoration:underline;
 line-height:22px;
}
.close{
 position:absolute;
 right:4px;
 top:-1px;
 color:#FFF;
 cursor:pointer
}
</style>
<script type="text/javascript">
function tips_pop(){
 var MsgPop=document.getElementById("winpop");
 var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字
 if(popH==0){
 MsgPop.style.display="block";//显示隐藏的窗口
 show=setInterval("changeH('up')",2);
 }
 else{ 
 hide=setInterval("changeH('down')",2);
 }
}
function changeH(str){
 var MsgPop=document.getElementById("winpop");
 var popH=parseInt(MsgPop.style.height);
 if(str=="up"){
 if(popH<=100){
 MsgPop.style.height=(popH+4).toString()+"px";
 }
 else{ 
 clearInterval(show);
 }
 }
 if(str=="down"){ 
 if(popH>=4){ 
 MsgPop.style.height=(popH-4).toString()+"px";
 }
 else{ 
 clearInterval(hide); 
 MsgPop.style.display="none"; //隐藏DIV
 }
 }
}
window.onload=function(){
 var oclose=document.getElementById("close");
 var bt=document.getElementById("bt");
 document.getElementById('winpop').style.height='0px';
 setTimeout("tips_pop()",3000);
 oclose.onclick=function(){tips_pop()}
 bt.onclick=function(){tips_pop()}
}
</script>
<body>
<div id="silu">
 <button id="bt">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>
</div>
<div id="winpop">
 <div class="title">您有新的短消息！<span class="close" id="close">X</span></div>
 <div class="con">1条未读信息(</div>
</div>
</body>
</html>

Der obige Code implementiert die von uns benötigten Funktionen. Hier finden Sie eine kurze Einführung in den Implementierungsprozess.
Umsetzungsprinzip:
Das Prinzip ist ganz einfach. Hier eine kurze Schritt-für-Schritt-Anleitung:
1. Platzieren Sie das Fenster in der unteren rechten Ecke der Webseite:
Der Implementierungscode lautet wie folgt:

#winpop {
 width:200px;
 height:0px;
 position:absolute;
 right:0;
 bottom:0;
 border:1px solid #666;
 margin:0;
 padding:1px;
 overflow:hidden;
 display:none;
}

Der obige Code setzt das Windpop-Element auf absolute Positionierung, insbesondere werden seine rechten und unteren Attributwerte auf 0 gesetzt, wodurch sichergestellt wird, dass es sich in der unteren rechten Ecke der Webseite befindet, und auch seine Werte festgelegt werden Höhe auf 0 Pixel, das heißt, es ist standardmäßig ausgeblendet.
2. So zeigen und verbergen Sie:
Die Funktion changeH() wird jedes Mal über die Timer-Funktion setInterval() aufgerufen. Diese Funktion kann die Höhe des Windpops kontinuierlich entsprechend dem übergebenen Wert festlegen und so ein reibungsloses Erscheinen und Verschwinden dieses Fensters erreichen . . Das Prinzip ist ungefähr das gleiche wie oben, daher werde ich es hier nicht viel vorstellen.

Das Obige ist der Implementierungscode für das Popup-Eingabeaufforderungsfeld in der unteren rechten Ecke. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich ist.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So ermitteln Sie den Browserversionstyp basierend auf jQuery1.9 version_jqueryNächster Artikel：So ermitteln Sie den Browserversionstyp basierend auf jQuery1.9 version_jquery

In Verbindung stehende Artikel

Mehr sehen