この記事の例では、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 = タイトル;
}
};
} ();
すごく新鮮じゃないですか？ ^_^
コードをコピー
