JavaScript 以下のjavascriptを短縮
- 評価
- クリップ 0
- VIEW 1,421
<div id="box"></div>#box{
position: relative;
width: 100%;
height: 500px;
}
#box div{
position: absolute;
background-color: black;
width: 100px;
height: 200px;
}var box = document.getElementById("box");
box.innerHTML += '<div id="character' + 1 +'">';
box.innerHTML += '<div id="character' + 2 +'">';
box.innerHTML += '<div id="character' + 3 +'">';
var character1 = document.getElementById("character" + 1);
var character2 = document.getElementById("character" + 2);
var character3 = document.getElementById("character" + 3);
(function update1(){
setTimeout(update1, Math.floor( Math.random() * 10000));
character1.style.left = Math.floor( Math.random() * window.innerWidth) + "px";
})();
(function update2(){
setTimeout(update2, Math.floor( Math.random() * 10000));
character2.style.left = Math.floor( Math.random() * window.innerWidth) + "px";
})();
(function update3(){
setTimeout(update3, Math.floor( Math.random() * 10000));
character3.style.left = Math.floor( Math.random() * window.innerWidth) + "px";
})();- 同じスクリプトを短縮し,変数で出現数を変えられる
- アップデート関数のみ、それぞれに一つずつ設定したい
- 質問内容が不十分であればコメントを下さい
完成イメージ
- 上が悪い例で下が良い例です
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
こゆことしたいの？？？
function update(element) {
return function(){
setTimeout(update(element), Math.floor( Math.random() * 10000));
element.style.left = Math.floor( Math.random() * window.innerWidth) + "px";
};
}
update(document.getElementById("character" + 1));
update(document.getElementById("character" + 2));
update(document.getElementById("character" + 3));投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/05/18 18:21
window.onload = function(){
var box document.getElementById("box");
box.innerHTML += '<div id="character' + 1 +'">';
box.innerHTML += '<div id="character' + 2 +'">';
box.innerHTML += '<div id="character' + 3 +'">';
update(document.getElementById("character" + 1));
update(document.getElementById("character" + 2));
update(document.getElementById("character" + 3));
}
function update(element) {
return function(){
setTimeout(update(element), Math.floor( Math.random() * 10000));
element.style.left = Math.floor( Math.random() * window.innerWidth) + "px";
};
}
2016/05/18 18:27
update(element)の部分をfunction(){update(element)}にすればいける・・・かも？
すみません未確認です。
2016/05/19 14:25
2016/05/19 19:08 編集
「update(document.getElementById("character" + 1));」だとfunctionオブジェクトが返ってくるだけでした。
window.onloadの中では「document.getElementById("character" + 1))();」としてfunction実行させてあげる必要がありました。申し訳ない。>>koonkuro1007さん
2016/05/24 14:31