こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

HPの文字を点滅させたい

HPの文字を、JavaScriptを使用して点滅させたくNETで調べたのですが、単純な点滅は出来たのですが、以下の様に点滅させたいので良い方法を教えてください。

点滅 2回(0.5s) ⇒ 休止(1s) ⇒ 点滅2回(0.5s) ⇒ 休止(1s) ⇒ (以降くりかえし)
お手数ですが、よろしくお願いします。

投稿日時 - 2018-07-18 15:16:01

QNo.9519445

vrq

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

>点滅 2回(0.5s) ⇒ 休止(1s) ⇒ 点滅2回(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>

投稿日時 - 2018-07-24 20:26:49

>点滅 2回(0.5s)
ここが、0.5秒周期なのか、0.5秒で2回なのかが、わかりません。
とりあえず、こういう時は、タイムラインを考えてみればいいかと。
まず、「点滅」ってのは、ON->OFFになっていることを意味するので
ONを1として考え、OFFを0として考えます。
1010 = これを0.5秒の周期だとして、
その後が、1秒休止とありますが、要するにOFF
1秒を0.5秒で割れば、当然2。つまり2回OFFがあればいいという事。
説明は以後繰り返しと書いてますが、実際には
>点滅 2回(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秒で
後は、定期呼び出しをさせ続ければ完成ではないですか?

投稿日時 - 2018-07-18 22:10:20

ANo.1

いい方法は、それも調べてやるのが一番だと思います。

これでは回答として少しお粗末なので、改善しようとは思いますが、そもそもあなたがやったことがわかりません。

ネットで調べてやったと言うのは、サンプルを探してそのサンプルを実装したのでしょうから、そのサンプルを具体的に明示されてはいかがでしょうか。

投稿日時 - 2018-07-18 20:28:24

あなたにオススメの質問