teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.35%
トップJavaScriptに関する質問
JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

3回答

2108閲覧

ランダムに星を表示させる関数がうまく機能しない

TBGSF
TBGSF

総合スコア0

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/04/29 21:50

編集2020/04/29 21:52

0

0

HPの背景に設定する星空を自作しています。ページを更新する都度表示される星のパターンがランダムに変化するようにしたいです。
理想としてはJavaScript(jQuery)で乱数を生成し、そこに相当する座標にbox-shadowで点を打つということを繰り返してもらうイメージなのですが、実行したところstars、starsB、starsCで各一つしか点が生成されません。
初心者の質問で恐縮ですが、どうすれば改善するか、ご教授願いたいです。

該当のソースコード

HTML
1 <body>
2  <div class="stars"></div>
3  <div class="starsB"></div>
4  <div class="starsC"></div>
5 </body>

css3
1
2body {
3  background-color:black;
4}
5
6.stars {
7  position: fixed;
8  width: 1px;
9  height: 1px;
10}
11
12.starsB {
13  position: fixed;
14  width: 2px;
15  height: 2px;
16}
17
18.starsC {
19  position: fixed;
20  width: 3px;
21  height: 3px;
22}

JavaScript
1function starPut (n) {
2 for (var i = 0; i < n; i++) {
3  var x = Math.floor( Math.random() * 2001 );
4  var y = Math.floor( Math.random() * 2001 );
5  var xy = x + 'px ' + y + 'px 1px #fff';
6  $('.stars').css('box-shadow',xy);
7 };
8};
9
10function starPutB (n) {
11 for (var i = 0; i < n; i++) {
12  var x = Math.floor( Math.random() * 2001 );
13  var y = Math.floor( Math.random() * 2001 );
14  var xy = x + 'px ' + y + 'px 1px #fff';
15  $('.starsB').css('box-shadow',xy);
16 };
17};
18
19function starPutC (n) {
20 for (var i = 0; i < n; i++) {
21  var x = Math.floor( Math.random() * 2001 );
22  var y = Math.floor( Math.random() * 2001 );
23  var xy = x + 'px ' + y + 'px 1px #fff';
24  $('.starsC').css('box-shadow',xy);
25 };
26};
27
28function starPut (200);
29function starPutB (100);
30function starPutC (50);
31

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

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

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

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

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

guest

回答3件

0

.css()では前の値を書き換えてしまいます。
box-shadowを複数つけるには構文があります。

【box-shadow - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow#Syntax

js
1/* 複数の影はコンマで区切る */
2box-shadow: 3px 3px red, -1em 0 0.4em olive;

あと、関数の実行にはfunctionが不要です。

js
1/* function */ starPut (200);
2/* function */ starPutB (100);
3/* function */ starPutC (50);

投稿2020/04/30 02:41

kei344
kei344

総合スコア69597

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

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

0

関数を100回実行させても100回目の座標が適用されるだけで、結局DIVの数（starsとstarsBとstarsCの３つ）しか表示されないのではないかと。

投稿2020/04/30 00:41

tomomo
tomomo

総合スコア430

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

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

0

たとえばこんな感じでしょうか？

投稿2020/04/30 02:30

yambejp
yambejp

総合スコア116720

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

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

yambejp
yambejp

2020/04/30 02:30

<script> window.addEventListener('DOMContentLoaded', ()=>{ var w=document.body.clientWidth; var h=document.body.clientHeight; for(var i=0;i<100;i++){ document.querySelector('body').appendChild(Object.assign(document.querySelector('.stars').cloneNode(true),{style:"top:"+Math.random()*h+";left:"+Math.random()*w+";"})); document.querySelector('body').appendChild(Object.assign(document.querySelector('.starsB').cloneNode(true),{style:"top:"+Math.random()*h+";left:"+Math.random()*w+";"})); document.querySelector('body').appendChild(Object.assign(document.querySelector('.starsC').cloneNode(true),{style:"top:"+Math.random()*h+";left:"+Math.random()*w+";"})); } }); </script> <style> body { background-color:black; } .stars { position: fixed; width: 1px; height: 1px; background-Color:white; } .starsB { position: fixed; width: 2px; height: 2px; background-Color:yellow; } .starsC { position: fixed; width: 3px; height: 3px; background-Color:yellow; } </style> <body> <div class="stars"></div> <div class="starsB"></div> <div class="starsC"></div> </body>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問

トップJavaScriptに関する質問

ランダムに星を表示させる関数がうまく機能しない