js-Popup-Eingabeaufforderungsfeld, Beispielcode in der unteren rechten Ecke

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

WBOY

Freigeben： 2016-05-16 15:20:31

Original

1316 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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.