この記事では、Webページのタイトルバーのちらつきプロンプト効果を実現するJSの方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
現在のトラフィックを備えたチャットルームなど、いくつかのチャットツールにWebページタイトルバーのちらつき効果がよく見られます。 Flickering Webページのタイトルバーを実装するための迅速なコードを要約しましょう。興味がある場合は、参照してください。
同社のプロジェクトは、この新しいメッセージプロンプトの効果を使用しています。これは、主にユーザーに新しいメッセージを作成するように促すために使用されます。特定の実装コードは次のとおりです。
var newmessageremind = {_ step:0、_title:document.title、_timer:null、//新しいメッセージプロンプトshow:function(){var temps = newmessageremind._title.replace(newmessageremind._title.replace( " setimeout(function(){newmessageremind.show(); //ここでnewmessageremind._step ++; if(newmessageremind._step == 3){newmessageremind._step = 1}; (newmessageremind._step == 2){document.title = "【new message newMessageremind._title; //ここでクッキー操作を書きます}};新しいメッセージプロンプトを表示するように呼び出す: newMessageRemind.show();
新しいメッセージプロンプトをキャンセルするための呼び出し: newMessageRemind.clear();
上記のコードを読んだ後、自分で最適化します。何があっても、私はそれを吸収して学ぶことができます。 :)私は主に、彼のコードのNewMessageremindフィールドはあまりにも多く使用されていると思います、それは密度があり、不快に見えます。私はそれを新鮮な方法で見せることを考えたので、次のコードを取得しました:
var newmessageremind = function(){var i = 0、title = document.title、loop; return {show:function(){loop = setInterval(function(){i ++; if(i == 1)document.title = '【new message }、stop:function(){clearInterval(loop); document.title = title; }}; }();とても新鮮ですか? ^_^
<!doctype html> <html lang = "en-us"> <head> <meta charset = "utf-8"> <title>それは休暇です! ! ! </title> </head> <body> <button id = "test"> stop </button> <script type = "text/javascript"> var newmessageremind = function(){var i = 0、title = document.title、loop; return {show:function(){loop = setInterval(function(){i ++; if(i == 1)document.title = '【new message }、stop:function(){clearInterval(loop); document.title = title; }};}(); newmessageremind.show(); document.getElementById( 'test')引き続き共有します
<script>(function(){var ortigintitile = document.title、titletime; document.addeventlistener( 'visibilitychange'、function(){if(document.hidden){document.title = '"where dead ghost got!'; cleartimeout(titletime);} leth {document.title = '(つェ⊂)huh! setimeout(function(){document.title = origintitile;}、2000);})(); </script>この記事がみんなのJavaScriptプログラミングに役立つことを願っています。