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

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

WBOY

Freigeben： 2016-05-16 16:34:16

Original

1357 Leute haben es durchsucht

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.