フラッシュタイトル通知を構築する方法

7583 ワード
webdev html javascript テキストリンク
ユーザーの注意が重要です.どのように、あなたはあなたのウェブサイトにもう一つのタブにいるユーザーの注意を呼びますか?
この記事では、このように見えるLinkedInサンプルを使用して、フラッシュタイトルを実装する方法を学びます👇

ユーザーが別のタブにあるとき、フラッシュタイトルは以下に示すように彼らの注意をウェブサイトに描くのに便利です.

あなたはおそらく自分のウェブサイト上で新しい通知をしているときにFacebookや他のいくつかのウェブサイト上のフラッシュタイトルを見ている.
それで、あなた自身のフラッシュタイトルを構築することから始めましょう.

この記事はHTML部分とJavaScript部分の2つの部分にあります

HTMLの部分
新規作成index.html そして、私が下に作成したHTML 5ボイラー板を加えてください.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- SCRIPT -->
    <script src="index.js"></script>
</body>
</html>
によるバージョン
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LinkedIn</title>
    <link rel="shortcut icon" href="https://static-exp1.licdn.com/sc/h/al2o9zrvru7aqj8e1x2rzsrca" id="favicon-ico">
    <link rel="apple-touch-icon" href="https://static-exp1.licdn.com/sc/h/2if24wp7oqlodqdlgei1n1520">
    <link rel="apple-touch-icon-precomposed" href="https://static-exp1.licdn.com/sc/h/eahiplrwoq61f4uan012ia17i">
    <link rel="apple-touch-icon-precomposed" href="https://static-exp1.licdn.com/sc/h/2if24wp7oqlodqdlgei1n1520"
        sizes="57x57">
    <link rel="apple-touch-icon-precomposed" href="https://static-exp1.licdn.com/sc/h/eahiplrwoq61f4uan012ia17i"
        sizes="144x144">
</head>

<body>

    <script src="index.js"></script>
</body>

</html>
それはフラッシュ通知が実装される場所ですので、あなたのスクリプトにタイトルタグを追加することを確認します.

JavaScript部分
クリエイトアindex.js or whateverfilename.js あなたが望む.我々は、タイトルタグを変更し、現在のページタイトルとユーザーにトーストしたい新しい通知メッセージの間を切り替える機能を作成します.
  • 我々は、使用しているdocument.title HTMLドキュメントのタイトルタグテキストにアクセスするには.
    • 以下のコードは、ページのタイトルを割り当てられた文字列に変更します.
    document.title = '1 new notification';
    上記のコードの出力.
    image.png
    動きましょう!

    フラッシュタイトル関数
    クリエイトアflashTitle 関数.この関数は2つのパラメータを受け取りますpageTitle とnewTitle , 次に、現在のページのタイトルがpageTitle パラメータが同じであれば、現在のページのタイトルをnewTitle パラメータ
    しかし、現在のページのタイトルがpageTitle パラメータを設定し、pageTitle .
    以下のコードは上記の説明の訳です.
    function flashTitle(pageTitle, newTitle) {
  if (document.title == pageTitle) {
    document.title = newTitle;
  } else {
    document.title = pageTitle;
  }
}

    Calling the flashTitle function at this point will only display the pageTitle parameter, you will need the toggle effect.



    トグル効果
    トグル効果は、ページタイトルと新しい通知メッセージの連続スワップを追加しますsetInterval() メソッド.
    The setInterval() メソッドは、指定された時間(ミリ秒単位)で連続して関数を呼び出すために使用されます
    setInterval(functionNameWithoutBracket, NumberOfIntervalInMiliseconds);
    私たちはflashTitle 1500ミリ秒間隔で走る機能.
    setInterval("flashTitle('LinkedIn', '(18) New Feeds | LinkedIn')", 1500);

    The double quotation is required because we are passing arguments to the flashTitle function, and setInterval does not require a parenthesis for a callback function



    フラッシュタイトル


    JavaScriptの完全なコード
    以下は、FlashタイトルJavaScript部分の完全なコードスニペットです.
    function flashTitle(pageTitle, newTitle) {
  if (document.title == pageTitle) {
    document.title = newTitle;
  } else {
    document.title = pageTitle;
  }
}

setInterval("flashTitle('LinkedIn', '(18) New Feeds | LinkedIn')", 1500);

    三項演算子の使用
    if文を三項演算子で置き換えることもできます.
    function flashTitle(pageTitle, newTitle) {
  document.title == pageTitle
    ? (document.title = newTitle)
    : (document.title = pageTitle);
}

setInterval("flashTitle('LinkedIn', '(18) New Feeds | LinkedIn')", 1500);
    Kudosでは、JavaScriptを使用してWebアプリケーションにフラッシュタイトルを実装する方法を学びました.


    結論
    フラッシュタイトルは非常に別のウェブサイト上で離れているときに、新しい通知のユーザーに警告するために非常に便利です、この記事では、私たちはJavascriptを使用してフラッシュタイトルの通知を実装する方法を学びました.
    ワウ、何の旅、私はあなたがこの記事の最後に作ったことを嬉しく思います.
    つながりましょう
    • 次の記事でお会いしましょう.バイバイ🙋‍♂️

    もし私のコンテンツが役に立つと私のブログをサポートしたい場合は、また、することができますbuy me a coffee below , ブログ一覧にもどる🙏.
    DDMSでroot権限ファイルにアクセスする方法
    Androidでのサービスの利用