質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2895閲覧

ページ内にカウントダウンを複数設置したいのですが、ラグが生じてしまいますお知恵をお貸し下さい。

MamS

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/01/15 10:51

編集2018/01/15 11:04

ページ内このようなカウントダウンを複数設置したいのですが、一つしか動かない、もしくは1秒づつのラグが生じてしまいます(何故か終了は同時です)。
カウントの速度を一定でなくす方法もあれば、それも知りたいと思っています。

<script language="JavaScript"> var timer = document.getElementById("cd"); var num = 28; var tgt = 1; var speed = 3000; setInterval(function countDown(){ if(num >= tgt){ cd.innerHTML = 'あと ' + num +' / 30';num--; } else { cd.innerHTML = '終了しました。'; } },speed); </script> </head> <body> <span id="cd">限定数まで、あと 28 / 30</span> </body>

複数設置に対してはこのようにしましたが2つ目が1秒ずれてカウントされてしまいます。

<script language="JavaScript"> var timer = document.getElementById("cd"); var num = 28; var tgt = 1; var speed = 3000; setInterval(function countDown(){ if(num >= tgt){ cd.innerHTML = 'あと ' + num +' / 30';num--; } else { cd.innerHTML = 'キャンペーンは終了しました。'; } },speed); var timer = document.getElementById("cd2"); var num = 28; var tgt = 1; var speed = 3000; setInterval(function countDown(){ if(num >= tgt){ cd2.innerHTML = '限定数まで、あと ' + num +' / 30';num--; } else { cd2.innerHTML = '終了しました。'; } },speed); </script> </head> <body> <span id="cd">あと 28 / 30</span> <br /> <span id="cd2">あと 28 / 30</span> </body>

めちゃくちゃなコードだと思いますが、お力を貸していただけると嬉しいです。
どうぞ宜しくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

2つのnumは同じスコープで2回宣言されているので、同じ変数となってしまっています。スコープを切り分けるか、変数名をずらすかをしましょう。

javascript

1// スコープの分け方 2(function(){ 3 // この中で宣言した変数は外に影響しない 4 var timer = document.getElementById("cd"); 5 6 var num = 28; 7 var tgt = 1; 8 var speed = 3000; 9 10 setInterval(function countDown(){ 11 if(num >= tgt){ 12 cd.innerHTML = '限定数まで、あと ' + num +' / 30';num--; 13 14 } else { 15 cd.innerHTML = 'キャンペーンは終了しました。'; 16 17 } 18 },speed); 19 20})(); 21 22(function(){ 23 var timer = document.getElementById("cd2"); 24 25 var num = 28; 26 var tgt = 1; 27 var speed = 3000; 28 29 setInterval(function countDown(){ 30 if(num >= tgt){ 31 cd.innerHTML = '限定数まで、あと ' + num +' / 30';num--; 32 33 } else { 34 cd.innerHTML = 'キャンペーンは終了しました。'; 35 36 } 37 },speed); 38 39})();

なお、そこ以外にも何点か気になることがあります。

  • <script language>はNetscape時代の書き方です。HTML5では<script>だけで問題ありません(勝手にJavaScriptとみなしてくれます)。
  • setIntervalはそんなに正確なタイマーではありません。厳密にタイムサイクルを考えたいなら、改めて時間を測定する必要があります。
  • タイムアップしたらclearIntervalしておきましょう。

投稿2018/01/15 11:02

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MamS

2018/03/06 12:48

遅くなってしまい申し訳ありません!! ご丁寧に<script>の部分まで、本当に助かりました! 変数名を変えるんですね!!解決いたしました! 本当にありがとうございます!
guest

0

提示のカウントみたいなものはcssアニメーションとかでもできそうですがダメですかね?
jsfiddle

投稿2018/01/15 14:10

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問