- 締切済み
HPの文字を点滅させたい
HPの文字を、JavaScriptを使用して点滅させたくNETで調べたのですが、単純な点滅は出来たのですが、以下の様に点滅させたいので良い方法を教えてください。 点滅 ２回(0.5s) ⇒ 休止(1s) ⇒ 点滅２回(0.5s) ⇒ 休止(1s) ⇒ （以降くりかえし） お手数ですが、よろしくお願いします。
- vrq
- お礼率57% (8/14)
- ホームページ作成ソフト
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- amanojaku1
- ベストアンサー率54% (265/488)
>点滅 ２回(0.5s) ⇒ 休止(1s) ⇒ 点滅２回(0.5s) ⇒ 休止(1s) ⇒ （以降くりかえし） ↑これでは曖昧で正確な動作が分かりません。 こちらの理解でプログラミングしますが、BlinkingTimeを変更すれば、自分のイメージどおりに点滅可能です。 <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS"> <!-- charset=Shift-JIS、UTF-8 --> <TITLE>test</TITLE> </head> <body> <span id="BlinkingText" style="visibility: visible">Blinking</span><br> <script type="text/javascript"> <!-- BlinkingTime = [ 500, 500, 500, 1000 ]; // ミリ秒 BlinkingSwitch = true; // false; BlinkingCounter = 0; var Blinking = function(){ BlinkingSwitch = ! BlinkingSwitch; document.getElementById('BlinkingText').style.visibility = (BlinkingSwitch ? 'visible' : 'hidden'); BlinkingCounter++; if(BlinkingTime.length<=BlinkingCounter){ BlinkingCounter = 0; } BlinkingTimer = setTimeout(Blinking, BlinkingTime[BlinkingCounter]); } BlinkingTimer = setTimeout(Blinking, BlinkingTime[BlinkingCounter]); // --> </script> </body> </html>
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>点滅 ２回(0.5s) ここが、0.5秒周期なのか、0.5秒で2回なのかが、わかりません。 とりあえず、こういう時は、タイムラインを考えてみればいいかと。 まず、「点滅」ってのは、ON->OFFになっていることを意味するので ONを１として考え、OFFを0として考えます。 1010 ＝ これを0.5秒の周期だとして、 その後が、1秒休止とありますが、要するにOFF 1秒を0.5秒で割れば、当然２。つまり2回OFFがあればいいという事。 説明は以後繰り返しと書いてますが、実際には >点滅 ２回(0.5s) ⇒ 休止(1s) この時点ですでに繰り返しに見えます。 なので、 先ほどの"1010"と2回の"00"を結合して、 タイムラインは、 "101000"を繰り返せばいいという事。 これに、数字を割り振ります。 101000 012345 なので、0と2の時ON、それ以外はOFFですよね？ 数字は全部で「6」個 if (timeline==0 || timeline==2) { /* ONにする処理 */ }else{ /* OFFにする処理 */ } timeline=(timeline+1)%6; で、基本周期は0.5sとあるので、 timeout値を500＝500ms＝0.5秒で 後は、定期呼び出しをさせ続ければ完成ではないですか？
- okwavey2
- ベストアンサー率15% (251/1593)
いい方法は、それも調べてやるのが一番だと思います。 これでは回答として少しお粗末なので、改善しようとは思いますが、そもそもあなたがやったことがわかりません。 ネットで調べてやったと言うのは、サンプルを探してそのサンプルを実装したのでしょうから、そのサンプルを具体的に明示されてはいかがでしょうか。
