Skip to content

テクニック SCR22:点滅を制御し、5 秒以内に停止させるために、スクリプトを使用する

このテクニックについて

このテクニックは 2.2.2: 一時停止・停止・非表示 (十分なテクニック) に関連する

このテクニックは、スクリプトで制御されたコンテンツの点滅をサポートするウェブコンテンツ技術に適用される。

解説

このテクニックの目的は、スクリプトによる点滅を、5 秒未満で停止する設定にできるよう制御することである。 スクリプトを用いて、コンテンツの点滅効果を開始し、表示と非表示の状態切り替えを制御し、そして 5 秒以下で停止させる。setTimeout() 関数を用いて、点滅するコンテンツの表示と非表示の状態を切り替え、点滅の回数と所要時間の積が 5 秒近くになった時に停止させる。

事例

事例 1

この例では、JavaScript を用いて HTML 及び XHTML コンテンツの点滅を制御する。JavaScript は、コンテンツの表示状態を制御して点滅効果を生みだす。効果の開始を制御し、5 秒以内に停止させる。

...
<div id="blink1" class="highlight">New item!</div>
<script>
  // blink "on" state
  function show() {
   if (document.getElementById){
    document.getElementById("blink1").style.visibility = "visible";
  }
}
   
// blink "off" state
function hide() {
  if (document.getElementById){
    document.getElementById("blink1").style.visibility = "hidden";
  }
}

// toggle "on" and "off" states every 450 ms to achieve a blink effect
// end after 4500 ms (less than five seconds)
for(let i=900; i < 4500; i=i+900) {
  setTimeout("hide()",i);
  setTimeout("show()",i+450);
}
</script>
...

このコードの動作例: Using script to control blinking

検証

手順

点滅しているコンテンツのそれぞれの箇所に対して:

  1. 点滅効果が開始される時、5 秒間のタイマーを開始させる。
  2. タイマーが切れるとき、点滅が停止している。

期待される結果

  • 点滅しているコンテンツのそれぞれの箇所に対して、2 が真である。
Back to Top