Heim Web-Frontend js-Tutorial jQuerys Methode zum Implementieren blinkender Titelaufforderungen für neue Nachrichten_jquery

jQuerys Methode zum Implementieren blinkender Titelaufforderungen für neue Nachrichten_jquery

May 16, 2016 pm 04:10 PM
jquery 提示 方法 标题 闪烁

Das Beispiel in diesem Artikel beschreibt, wie jQuery blinkende Titelaufforderungen für neue Nachrichten implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dieser Code kann Eingabeaufforderungsinformationen in der Titelleiste blinken lassen.

1. jQuery-Plug-in-Stilcode

;(function($) {
  $.extend({
    /**
     * 调用方法: var timerArr = $.blinkTitle.show();
     *     $.blinkTitle.clear(timerArr);
     */
    blinkTitle : {
      show : function() { //有新消息时在title处闪烁提示
        var step=0, _title = document.title;
        var timer = setInterval(function() {
          step++;
          if (step==3) {step=1};
          if (step==1) {document.title='【   】'+_title};
          if (step==2) {document.title='【新消息】'+_title};
        }, 500);
        return [timer, _title];
      },
      /**
       * @param timerArr[0], timer标记
       * @param timerArr[1], 初始的title文本内容
       */
      clear : function(timerArr) {
      //去除闪烁提示,恢复初始title文本
        if(timerArr) {
          clearInterval(timerArr[0]); 
          document.title = timerArr[1];
        };
      }
    }
  });
})(jQuery);
Nach dem Login kopieren

2. Die Aufrufmethode ist wie folgt:

jQuery(function($) {
  var timerArr = $.blinkTitle.show();
  setTimeout(function() {//此处是过一定时间后自动消失
    $.blinkTitle.clear(timerArr);
  }, 10000);
  //若人为操作消失,只需如此调用:$.blinkTitle.clear(timerArr);
});
Nach dem Login kopieren

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was soll ich tun, wenn Google Chrome meldet, dass der Inhalt dieses Tabs geteilt wird? Was soll ich tun, wenn Google Chrome meldet, dass der Inhalt dieses Tabs geteilt wird? Mar 13, 2024 pm 05:00 PM

Was soll ich tun, wenn Google Chrome meldet, dass der Inhalt dieses Tabs geteilt wird?

So schreiben Sie einen Roman in der Tomato Free Novel-App. Teilen Sie das Tutorial zum Schreiben eines Romans in der Tomato Novel-App So schreiben Sie einen Roman in der Tomato Free Novel-App. Teilen Sie das Tutorial zum Schreiben eines Romans in der Tomato Novel-App Mar 28, 2024 pm 12:50 PM

So schreiben Sie einen Roman in der Tomato Free Novel-App. Teilen Sie das Tutorial zum Schreiben eines Romans in der Tomato Novel-App

Wie rufe ich das BIOS auf dem Colorful-Motherboard auf? Bringen Sie Ihnen zwei Methoden bei Wie rufe ich das BIOS auf dem Colorful-Motherboard auf? Bringen Sie Ihnen zwei Methoden bei Mar 13, 2024 pm 06:01 PM

Wie rufe ich das BIOS auf dem Colorful-Motherboard auf? Bringen Sie Ihnen zwei Methoden bei

So stellen Sie gelöschte Kontakte auf WeChat wieder her (ein einfaches Tutorial erklärt Ihnen, wie Sie gelöschte Kontakte wiederherstellen) So stellen Sie gelöschte Kontakte auf WeChat wieder her (ein einfaches Tutorial erklärt Ihnen, wie Sie gelöschte Kontakte wiederherstellen) May 01, 2024 pm 12:01 PM

So stellen Sie gelöschte Kontakte auf WeChat wieder her (ein einfaches Tutorial erklärt Ihnen, wie Sie gelöschte Kontakte wiederherstellen)

Zusammenfassung der Methoden zum Erhalten von Administratorrechten in Win11 Zusammenfassung der Methoden zum Erhalten von Administratorrechten in Win11 Mar 09, 2024 am 08:45 AM

Zusammenfassung der Methoden zum Erhalten von Administratorrechten in Win11

Schneller Meister: So eröffnen Sie zwei WeChat-Konten auf Huawei-Handys! Schneller Meister: So eröffnen Sie zwei WeChat-Konten auf Huawei-Handys! Mar 23, 2024 am 10:42 AM

Schneller Meister: So eröffnen Sie zwei WeChat-Konten auf Huawei-Handys!

Das Geheimnis des Ausbrütens mobiler Dracheneier wird gelüftet (Schritt für Schritt erfahren Sie, wie Sie mobile Dracheneier erfolgreich ausbrüten) Das Geheimnis des Ausbrütens mobiler Dracheneier wird gelüftet (Schritt für Schritt erfahren Sie, wie Sie mobile Dracheneier erfolgreich ausbrüten) May 04, 2024 pm 06:01 PM

Das Geheimnis des Ausbrütens mobiler Dracheneier wird gelüftet (Schritt für Schritt erfahren Sie, wie Sie mobile Dracheneier erfolgreich ausbrüten)

Detaillierte Erläuterung der Oracle-Versionsabfragemethode Detaillierte Erläuterung der Oracle-Versionsabfragemethode Mar 07, 2024 pm 09:21 PM

Detaillierte Erläuterung der Oracle-Versionsabfragemethode

See all articles