- 締切済み
JAVASCRIPTで背景を切り替える方法
以下の２つのjsファイルをボタンで切り替えれるようにするにはどういうソースで可能でしょうか？ <SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/heartdrop.js"></SCRIPT> <SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/stardrop.js"></SCRIPT> ２つとも動く背景のjsファイルです。 bodyに置けば作動しますので、ボタンを押して２つを切り替えれるようにしたいのですがどうしても方法がわかりません。 どなたかご教授いただけないでしょうか？ よろしくお願いします。
- name_handluck
- お礼率80% (4/5)
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
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>
- yyr446
- ベストアンサー率65% (870/1330)
切り替えボタンを押したら、 「画面いっぱいにハートが降ってきたり、雪が降ってきたりするのを切り替える」 を実装出来れば、元のjavascriptにこだわる必要はないのでしょうか？
お礼
回答ありがとうございます。そして返事遅くなり申し訳ありません。 知識不足のためいろいろと検証し、やっと皆さんの回答を理解するに至りました。 お一方ずつとも思ったのですが、なかなか切りが悪く、失礼とは思いながらもまとめて御礼をさせて頂くこととしました。 回答拝見させて頂きました。 はい、全くその通りです。 むしろ元のスクリプトにはこだわらない方法で行いたいというのが本音です。 目的はとにかく、画像もしくは文字を降らせる、もしくは上昇させる、というごく単純な動きです。ボタンを押すと画像(文字)が降ってきて、再度ボタンを押すとstopする。画像や文字の部分は変数にしておいて、押したボタンによって画像(文字)の部分を可変できるようにしたいと思っています。 自分で書くことが出来れば何ら問題ないのですがまだ未熟なためネットのものを解読しながら皆さんの回答を参考にさせていただき自分なりに検証しています。 まだまだ検証中(未完成)ですので、サンプルなどありましたら是非ともご教授頂ければ幸いです。 まだしばらくは空けさせていただくつもりですので是非ともよろしくお願いします。
- noris02
- ベストアンサー率74% (56/75)
私も見てみました。 そして質問主さんのなぜ切り替えが必要かの意図もちょっと理解。 (人様の暗号化を解くのは、気が引けますが あくまで 勉強で。汗) ｊｓ内は タグを作って 配列に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> <!-- cssで、位置を指定--> <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/stardrop.js></script> </body></html> 【draw1.htm】 <html><body> <script type=text/javascript src=http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/heartdrop.js></script> </body></html>
お礼
回答ありがとうございます。そして返事遅くなり申し訳ありません。 知識不足のためいろいろと検証し、やっと皆さんの回答を理解するに至りました。 お一方ずつとも思ったのですが、なかなか切りが悪く、失礼とは思いながらもまとめて御礼をさせて頂くこととしました。 回答拝見させて頂きました。 iframeと言う言葉すら知らない状況でしたのでネットで検索しながら何とか意味を理解するに至りました。同じことでもいろんなやり方があるんですね。 本来の目的は、画像もしくは文字を降らせる、もしくは上昇させる、というごく単純な動きを目指しています。 まだまだ検証中ですので何かありましたら書き込み頂ければ幸いです。
- fujillin
- ベストアンサー率61% (1594/2576)
＞ボタンで切り替えれるようにする というのが、どのような状況を想定しているのかわかりませんが、あるスクリプト（背景）が動作中にボタンを押すと別の背景に切り替わるといったイメージでしょうか？ ご提示のサイトのサンプルをざっと見た感じでは、どうもみな基本は同じロジックで、使用する画像と出現数と速度くらいを変えてるだけで、スクリプトは同じなのではないだろうかという気がします。 スクリプトを見てみると（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だとサンプル画面は動作しないみたいですが・・・ （あまり回答にはなっていなくてすみませんが。）
お礼
回答ありがとうございます。そして返事遅くなり申し訳ありません。 知識不足のためいろいろと検証し、やっと皆さんの回答を理解するに至りました。 お一方ずつとも思ったのですが、なかなか切りが悪く、失礼とは思いながらもまとめて御礼をさせて頂くこととしました。 回答拝見させて頂きました。少し古いんですね。まだまだ未熟で一つ一つに時間が掛かりますが、地道にやっていくつもりです。まだまだ検証中ですので何かありましたら書き込み頂ければ幸いです。
- noris02
- ベストアンサー率74% (56/75)
自身に ボタンで 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 で条件分岐。
お礼
回答ありがとうございます。そして御礼遅くなりすいません。 実はjavascriptを始めて一ヶ月程度のレベルです。ですので、以下のサイトのものを使用したいと思い今回質問しました。 http://www.awcs.org/dhtml/#drop すごく時間は掛かりますがfunctionにまとめることは出来ます。ただ、暗号化されていましたし、できればそのままサーバーに置いたものを使用できればと思い質問しました。 やはり思ったより面倒そうですね。 まだ内容を充分に理解できていませんが検証してみます。 もし何かありましたら書き込み頂けると嬉しいです。 わからないことがありましたら質問させていただきますのでよろしくお願いします。
補足
失礼しました。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);)で「オブジェクトがありません」とエラーが出ます。 やり方が違うのでしょうか？ 手の込んだものを掲載頂いてるようなので、是非とも見てみたいのですが、手順に間違いがありますでしょうか？ ご指導お願い致します。 是非とも拝見したいです。