Beispiel für ein Eingabeaufforderungsfeld in der unteren rechten Ecke von js web page_javascript skills

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode des Eingabeaufforderungsfelds in der unteren rechten Ecke der js-Webseite und teilt sie als Referenz mit allen. Die spezifische Methode ist wie folgt:

Der HTML-Codeteil lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

×

           

Systemaufforderung:

          

Inhalt
                                                                                     

Der js-Codeteil lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Funktion messageTip(pJso) {
_.init(this, pJso, {
            Name: 'msg'//Prompt-Box-Label-ID
});
This.eMsg = document.getElementById(this.name);
}

messageTip.prototype =
{
//Das Eingabeaufforderungsfeld befindet sich immer in der unteren rechten Ecke
rePosition: function(_this) {
        var divHeight = parseInt(_this.eMsg.offsetHeight, 10);
        var divWidth = parseInt(_this.eMsg.offsetWidth, 10);
        var docWidth = document.body.clientWidth;
        var docHeight = document.body.clientHeight;
​ ​ _this.eMsg.style.top = docHeight - divHeight parseInt(document.body.scrollTop, 10);
​ ​ _this.eMsg.style.left = docWidth - divWidth parseInt(document.body.scrollLeft, 10);
},

//Das Eingabeaufforderungsfeld öffnet sich langsam
MoveDiv: function(_this) {
         /*
​​​​Hier können Sie einstellen, dass es nach einigen Sekunden automatisch geschlossen wird
...
*/
         Versuchen Sie es mit {
If (parseInt(_this.eMsg.style.top, 10) <= (_this.docHeight - _this.divHeight parseInt(document.body.scrollTop, 10))) {
                   window.clearInterval(_this.objTimer);
                  _this.objTimer = window.setInterval(function() { _this.rePosition(_this); }, 1);
            }
​​​​​​​ _this.divTop = parseInt(_this.eMsg.style.top, 10);
​​​​​​ _this.eMsg.style.top = _this.divTop - 1;
}
         Fang (e) {
}
},
 
//Schließen Sie das Eingabeaufforderungsfeld
Schließen: function() {
This.eMsg.style.visibility = 'hidden';
If (this.objTimer) window.clearInterval(this.objTimer);
},

//Eingabeaufforderungsfeld anzeigen
show: function() {
        var divTop = parseInt(this.eMsg.style.top, 10);
This.divTop = divTop;
        var divLeft = parseInt(this.eMsg.style.left, 10);

var divHeight = parseInt(this.eMsg.offsetHeight, 10);
This.divHeight = divHeight;

var divWidth = parseInt(this.eMsg.offsetWidth, 10);
        var docWidth = document.body.clientWidth;
        var docHeight = document.body.clientHeight;
This.docHeight = docHeight;

this.eMsg.style.top = parseInt(document.body.scrollTop, 10) docHeight 10;
This.eMsg.style.left = parseInt(document.body.scrollLeft, 10) docWidth - divWidth;
This.eMsg.style.visibility = "visible";

var _this = this;
This.objTimer = window.setInterval(function() { _this.moveDiv(_this); }, 10);
}
}

var msgTip = new messageTip({ name: 'eMeng' });
window.onload = function() { msgTip.show(); };
window.onresize = function() { msgTip.rePosition(msgTip);

Ich hoffe, dass dieser Artikel für das Webprogrammierungsdesign aller hilfreich sein wird.

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