JS Web ページの右下隅にあるプロンプト ボックスの例_JavaScript スキル

この記事の例では、js Web ページの右下隅にあるプロンプト ボックスの実装方法を説明し、参考のために皆さんに共有します。具体的な方法は以下の通りです。

HTML コード部分は次のとおりです:

コードをコピー コードは次のとおりです。

×

システム プロンプト:

内容
                                                                                       

js コード部分は次のとおりです:

コードをコピー コードは次のとおりです:

関数 messageTip(pJso) {
_.init(this, pJso, {
name: 'msg'//プロンプト ボックスのラベル ID
});
This.eMsg = document.getElementById(this.name);
}

messageTip.prototype =
{
//プロンプト ボックスは常に右下隅にあります
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);
}、

//プロンプトボックスがゆっくりと上昇します
MoveDiv: function(_this) {
/*
ここでは、数秒後に自動的に閉じるように設定できます
...
*/
{
をお試しください 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;
}
catch (e) {
}
}、

//プロンプトボックスを閉じます
閉じる: function() {
This.eMsg.style.visibility = 'hidden';
If (this.objTimer) window.clearInterval(this.objTimer);
}、

//プロンプトボックスを表示
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 = "可視";

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

この記事が皆さんの Web プログラミング設計に役立つことを願っています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。