JAVASCRIPTで背景を切り替える方法

締切済

質問者：name_handluck
質問日時：2010/11/28 09:59
回答数：5件

以下の２つのjsファイルをボタンで切り替えれるようにするにはどういうソースで可能でしょうか？

<SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/heart …

<SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/stard …

２つとも動く背景のjsファイルです。
bodyに置けば作動しますので、ボタンを押して２つを切り替えれるようにしたいのですがどうしても方法がわかりません。

どなたかご教授いただけないでしょうか？

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： yyr446
回答日時：2010/12/01 17:41

No.4です。

<body>に降らせる物と数を変更できるようなやつを作ってみました。
「FallObj.js」
https://gist.github.com/723150

　※　windowリサイズイベントには未対応です。
　※　DOM プロセッサが管理しているオブジェクトと、スクリプトエンジンが管理
　　　しているオブジェクト、が混在してそうです。
　　　連鎖を断ち切ってるので、メモリーリークしないと思うんですが、自身
　　　ありません。
　※　Firefox、GoogleChrome、IE8（6,7）でOKかな。
　
サンプルHTML
（とりあえず、文字（Star★、Hart▼）を降らせてますけど、画像でも
　大丈夫のはずです。）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Falling Object</title>
<style type="text/css"></style>
<script type="text/javascript" src="FallObj.js"></script>
</head>
<body>
<h1>Falling Object</h1>

<button type="button" onclick="changeHart();">Hart</button>
<button type="button" onclick="changeStar();">Star</button>
<button type="button" onclick="stop();">stop</button>

<p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p>
<p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p>
<p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p>
<p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p>

<script type="text/javascript">

　var Star = document.createElement("span");
　Star.appendChild(document.createTextNode("★"));

　var Hart = document.createElement("span");
　Hart.appendChild(document.createTextNode("▼"));

//最初に星を10個降らせます
　var objs = setfalldownobj(Star,10);

　function changeHart(){
　 objs = changefalldownobj(objs,Hart,10)
　};
　function changeStar(){
　 objs = changefalldownobj(objs,Star,10)
　};

　function stop(){
　 stopfalldownobj(objs);
　};

</script>
</body>
</html>

この回答への補足

失礼しました。NO,4さんですね。違う方と思っていました。大変失礼しました。

downloadボタンを押しましたが、これがFallObj.jsでしょうか？

ファイルの使い方がわかりませんでしたので
https://gist.github.com/723150
よりソースをコピーしたものをメモ帳に貼り付け、FallObj.jsとして保存したものを

<script type="text/javascript" src="http//●●FallObj.js"></script>

(●●は自分のサーバーのURL)

として使ってみたのですが、30行目(var objs = setfalldownobj(Star,10);)で「オブジェクトがありません」とエラーが出ます。

やり方が違うのでしょうか？

手の込んだものを掲載頂いてるようなので、是非とも見てみたいのですが、手順に間違いがありますでしょうか？

ご指導お願い致します。

是非とも拝見したいです。

補足日時：2010/12/03 23:22

通報する

- 0
- 件

通報する

No.4

回答者： yyr446
回答日時：2010/11/30 10:43

切り替えボタンを押したら、

「画面いっぱいにハートが降ってきたり、雪が降ってきたりするのを切り替える」
を実装出来れば、元のjavascriptにこだわる必要はないのでしょうか？

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。そして返事遅くなり申し訳ありません。
知識不足のためいろいろと検証し、やっと皆さんの回答を理解するに至りました。
お一方ずつとも思ったのですが、なかなか切りが悪く、失礼とは思いながらもまとめて御礼をさせて頂くこととしました。

回答拝見させて頂きました。

はい、全くその通りです。
むしろ元のスクリプトにはこだわらない方法で行いたいというのが本音です。
目的はとにかく、画像もしくは文字を降らせる、もしくは上昇させる、というごく単純な動きです。ボタンを押すと画像(文字)が降ってきて、再度ボタンを押すとstopする。画像や文字の部分は変数にしておいて、押したボタンによって画像(文字)の部分を可変できるようにしたいと思っています。
自分で書くことが出来れば何ら問題ないのですがまだ未熟なためネットのものを解読しながら皆さんの回答を参考にさせていただき自分なりに検証しています。
まだまだ検証中(未完成)ですので、サンプルなどありましたら是非ともご教授頂ければ幸いです。
まだしばらくは空けさせていただくつもりですので是非ともよろしくお願いします。

通報する

お礼日時：2010/12/03 22:38

No.3

回答者： noris02
回答日時：2010/11/30 08:50

私も見てみました。

そして質問主さんのなぜ切り替えが必要かの意図もちょっと理解。
(人様の暗号化を解くのは、気が引けますがあくまで勉強で。汗)
ｊｓ内はタグを作って配列に15個分x,y座標をつくって、randomで挙動距離を動かし、
setTimeoutで動かしてます。
<div id=><img src= style=position ></div>
setTimeout("・・・", 読み込む間隔);

とまぁおいといて、
ブラウザが表示された際に、すでにタグが書かれているのと同じ状態に
なりますので、再読み込み(リロード)しなければ、かえれない仕様？なのかな。
私ならば js自体を書きかえるとおもいます。

ところで
iframe で表示してみるというのはいかがでしょうか。
元のページはリロードせず、iframe内だけをリロードする。
また無茶してみます。こうなりゃやけです。
(IE8確認しました firefox3.6・Chrome7.0 表示できませんでした。)
でも、iframeも使えなくなっていくような気がする

【html】
<html><head>

<style type=text/css>
.kiji{position:absolute;top:5px;left:5px;}
.cssiframe{
border:none;
width:100%;
height:1000px;
position:fixed;top:0;left:0;
}
.mask{position:absolute;top:0px;left:0px;width:100%;height:1000px;}
</style>
<script type=text/javascript>

//intoiframe は body内の<iframe name="intoiframe" ・・・> で私が勝手に名づけたもの

function button(num){　　　　// 引数 num
if(num==0){
intoiframe.location.href="draw.htm";
}else{
intoiframe.location.href="draw1.htm"; //iframeの中のurlを変更しています
}
}
</script>
</head>
<body>
<iframe class="cssiframe" name="intoiframe" scrolling="no" border="0" frameborder="0"></iframe>
<div class="mask"></div>
<div class="kiji">
無理やりですね＾＾；<br>
もはや結果こうなったという、本来の主旨からはずれてますが。<br>
＜div class="mask"＞＆nbsp;＜/div＞は、ブラウザ内で右クリックするとiframe内を<br>
選択してしまう為に、いれました。<br>
<input type="button" onClick="button(0)" value="0">
<input type="button" onClick="button(1)" value="1">
</div>
</body></html>

【draw.htm】
<html><body>
<script type=text/javascript src=http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/stard …
</body></html>

【draw1.htm】
<html><body>
<script type=text/javascript src=http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/heart …
</body></html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。そして返事遅くなり申し訳ありません。
知識不足のためいろいろと検証し、やっと皆さんの回答を理解するに至りました。
お一方ずつとも思ったのですが、なかなか切りが悪く、失礼とは思いながらもまとめて御礼をさせて頂くこととしました。

回答拝見させて頂きました。
iframeと言う言葉すら知らない状況でしたのでネットで検索しながら何とか意味を理解するに至りました。同じことでもいろんなやり方があるんですね。
本来の目的は、画像もしくは文字を降らせる、もしくは上昇させる、というごく単純な動きを目指しています。
まだまだ検証中ですので何かありましたら書き込み頂ければ幸いです。

通報する

お礼日時：2010/12/03 22:29

No.2

回答者： fujillin
回答日時：2010/11/29 18:39

＞ボタンで切り替えれるようにする

というのが、どのような状況を想定しているのかわかりませんが、あるスクリプト（背景）が動作中にボタンを押すと別の背景に切り替わるといったイメージでしょうか？

ご提示のサイトのサンプルをざっと見た感じでは、どうもみな基本は同じロジックで、使用する画像と出現数と速度くらいを変えてるだけで、スクリプトは同じなのではないだろうかという気がします。

スクリプトを見てみると（1種類（hertdrop）しか見てませんが）、やはり最初の、
　var no = 15; // snow number
　var speed = 10; // smaller number moves the snow faster
　var snowflake = "ｈttp://www9.ocn.ne.jp/~aki2nd/dhtml/sample/ha170.gif";
の部分にある変数程度で制御しているみたいですね。

それなので、ボタンを押したら動作中の画像をキャンセルする（又は画像アドレスを切り替える）などをして、制御変数を取り替えてあげるようにすれば、スクリプト本体はを使い分けなくてもすみそうな気がします。（ちゃんと見てないので未検証ですが、もしかすると乱数を発生させるときの係数やなんかも変えているのかな…）

少々気になったのが、それに続く、
　var ns4up = (document.layers) ? 1 : 0; // browser sniffer
　var ie4up = (document.all) ? 1 : 0;
でブラウザの分岐を行っているようですが、（バージョン4のことらしいので）どうも少々古い分岐のように思えます。

試みに、手元のfx3、Opera10だとサンプル画面は動作しないみたいですが・・・
（あまり回答にはなっていなくてすみませんが。）

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。そして返事遅くなり申し訳ありません。
知識不足のためいろいろと検証し、やっと皆さんの回答を理解するに至りました。
お一方ずつとも思ったのですが、なかなか切りが悪く、失礼とは思いながらもまとめて御礼をさせて頂くこととしました。

回答拝見させて頂きました。少し古いんですね。まだまだ未熟で一つ一つに時間が掛かりますが、地道にやっていくつもりです。まだまだ検証中ですので何かありましたら書き込み頂ければ幸いです。

通報する

お礼日時：2010/12/03 22:24

No.1

回答者： noris02
回答日時：2010/11/29 04:35

自身に　ボタンで test.htm?bu=0 で飛ばしてみてはとおもったのですが。

で、buの値で jsを選択。
phpでいう、$_GET[〇〇]。　無理やりです。
もちろん、ページ全体が再度読み込まれます。
でも、この記述ができるなら
jsファイルを一つにまとめる方がいいとおもうのですが・・・

function heartdrop(){ 背景表示　}
function stardrop(){ 背景表示 }

<input type="button" onClick="heartdrop()">

で一つのjsファイルにはムリなのでしょうか。

主旨が違ったり更なる混乱になったらゴメンナサイ。
"javascriptでｊｓをgetで切り替える"という事だけ考えたサンプル
(コード、考え方がまわりくどすぎです。背景描画のjsなかったので差し替えました)

【test.htm】
<head>
<script type="text/javascript">
function button(num){
　location.href="test.htm?bu="+num;
}
function getRequest(){
if(location.search.length > 1) {
var get = new Object();
var ret = location.search.substr(1).split("&");
for(var i = 0; i < ret.length; i++) {
var r = ret[i].split("=");
get[r[0]] = r[1];
}
return get;
} else {
return false;
}
}
var get=getRequest();
if(get['bu']==0){
document.write("<script type='text/javascript' src='./draw.js'><\/script>");
　}else{
document.write("<script type='text/javascript' src='./draw1.js'><\/script>");
}
</script>
</head>

<body>
<input type="button" onClick="button(0)" value="0">
<input type="button" onClick="button(1)" value="1"><br/>
<span id="draw"></span><br/>
<span id="draw1"></span>
</body>

【draw.js】
window.onload=function(){
document.getElementById("draw").innerHTML="test";
}

【draw1.js】
window.onload=function(){
document.getElementById("draw1").innerHTML="test1";
}

↓javascriptの中で jsを読み込んでいる↓
document.write("<script type='text/javascript' src='./draw.js'><\/script>");
それを if で条件分岐。

参考URL：http://www.s-memo.net/blog/2007/03/javascriptget …

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。そして御礼遅くなりすいません。
実はjavascriptを始めて一ヶ月程度のレベルです。ですので、以下のサイトのものを使用したいと思い今回質問しました。
http://www.awcs.org/dhtml/#drop

すごく時間は掛かりますがfunctionにまとめることは出来ます。ただ、暗号化されていましたし、できればそのままサーバーに置いたものを使用できればと思い質問しました。

やはり思ったより面倒そうですね。
まだ内容を充分に理解できていませんが検証してみます。
もし何かありましたら書き込み頂けると嬉しいです。
わからないことがありましたら質問させていただきますのでよろしくお願いします。

通報する

お礼日時：2010/11/29 15:45

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！