Webページのタイトルバーの点滅プロンプト効果のJS実装例分析_JavaScriptスキル

この記事の例では、js を使用して Web ページのタイトル バーの点滅するプロンプト効果を実現する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

現在のトラフィックの多いチャット ルームなどの一部のチャット ツールでは、Web ページのタイトル バーの点滅効果がよく見られます。興味があれば、以下に Web ページのタイトル バーの点滅プロンプトを実現するためのコードをまとめます。を参照してください。

この新しいメッセージ プロンプト効果は会社のプロジェクトで使用されており、主に新しいメッセージがあることをユーザーに思い出させるために使用されます。具体的な実装コードは次のとおりです:

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

var newMessageRemind={
_ステップ: 0,
_title: document.title,
_timer: null、
// 新しいメッセージのプロンプトを表示します
show:function(){
var temps = newMessageRemind._title.replace("【 】", "").replace("【新しいメッセージ】", "");
newMessageRemind._timer = setTimeout(function() {
newMessageRemind.show();
// ここに Cookie オペレーションを書き込みます
newMessageRemind._step ;
if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };
if (newMessageRemind._step == 1) { document.title = "【 】" temps };
if (newMessageRemind._step == 2) { document.title = "[新しいメッセージ]" temps };
}, 800);
return [newMessageRemind._timer, newMessageRemind._title];
}、
// 新しいメッセージのプロンプトをキャンセルします
クリア: function(){
clearTimeout(newMessageRemind._timer);
document.title = newMessageRemind._title;
// ここに Cookie オペレーションを書き込みます
}
};

新しいメッセージのリマインダーを表示するために呼び出します: newMessageRemind.show();
新しいメッセージのリマインダーをキャンセルするには呼び出します: newMessageRemind.clear();
上記のコードを読んで、何はともあれ自分で最適化して、吸収して習得できれば良いと思います。 :) 私は主に、彼のコード内の newMessageRemind フィールドが多用されすぎていると感じました。それを新鮮な方法で表示したかったので、次のコードを思いつきました。

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

var newMessageRemind = function () {
var i = 0、
title = document.title,
ループ

リターン {
show: function () {
ループ = setInterval(function () {
私は
If ( i == 1 ) document.title = '[新しいニュース]' タイトル
If ( i == 2 ) document.title = '【 】' title; If ( i == 3 ) i = 0; }、800); }、
停止: function () {
,,,,,,,,,、 document.title = タイトル; }
};
} ();

すごく新鮮じゃないですか？ ^_^

コードをコピー

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

<頭>




停止
<スクリプトタイプ="text/javascript">
var newMessageRemind = function () {
 var i = 0,
  タイトル = document.title,
  ループ;
 戻り値 {
  show: function () {
   ループ = setInterval(function () {
    私;
    if ( i == 1 ) document.title = '【新着消息】' title;
    if ( i == 2 ) document.title = '【 】' title;
    if ( i == 3 ) i = 0;
   }, 800);
  }、
  stop: function () {
   clearInterval(ループ);
   document.title = タイトル;
  }
 };
} ();
newMessageRemind.show();
document.getElementById('test').onclick = function () {
 newMessageRemind.stop();
};

ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。