プログラミングでのビンゴマシンの作成について
- プログラミングでビンゴマシンを作成するには、htmlのビンゴマシンで出た数字を表示させることが可能です。赤枠で囲った部分にマシンを操作して出た数字を表示するためのタグを打ち込めば良いです。
- また、ドラムロールを入れることも可能ですが、音声データを取り入れる必要があります。
- ビンゴマシンのソースコードには、数字をランダムに表示する機能やクリア機能があります。ビンゴマシンを回すためには、セットボタンをクリックするかエンターキーを押す必要があります。
- ベストアンサー
プログラミングでのビンゴマシンの作成について
メモ帳にビンゴマシンのソースを打ち込んでプログラミングでビンゴマシンを作成しています。 現段階1～75までの数字をランダムで表示するところまでは完成しています。 次の段階として図の赤で囲った部分にマシンを操作して出た数字を全て表示させればと考えています。htmlのビンゴマシンで出た数字を表示させる可能でしょうか？また可能な場合どの部分にどのようなタグを打ち込めばいいのですか？ またビンゴマシンを回している間にドラムロールを入れたいのですが、音声データを入れることも可能でしょうか？ 以下はソースです。 <html> <div> <input type="text" id="input"> <input type="button" value="セット" onClick="svset();"> <input type="button" value="クリア" onClick="svclear();"> <p id="svecho"> </p> </div> <head> <script> window.onload=function(){resetFunc();} try{ document.addEventListener('keydown',function(e){keydownfunc(e)},true); }catch(e){ document.attachEvent('onkeydown',function(e){keydownfunc(e)}); } var arr=new Array(); //開く順を配列にとっておく var max=75; //上限 var cur=0; //いくつ開いているかカレント var nxt=0; //次開きたい番号をとっておく場所 function resetFunc() { document.getElementById("output").innerHTML="-"; for(var i=0;i<max;i++){ arr[i]=i+1; } for(var i=0;i<max -1;i++){ var n1=Math.floor(Math.random()*(max-i-1)); var n2=arr[n1]; arr[n1]=arr[max-i-1]; arr[max-i-1]=n2; } var tds=document.getElementsByTagName("td"); for(var i in tds){tds[i].className="";} cur=0; } function keydownfunc(e){ var t = (e.srcElement || e.target); var k=e.keyCode; if(k==13) bingo(); if(k>=96 && k<=105){ nxt=nxt%10*10+(k-96); } } function bingo(){ if(typeof timerID!="undefined"){ clearInterval(timerID); for(var i=cur;i<max;i++){ if(arr[i]==nxt){ var tmp=arr[i]; arr[i]=arr[cur]; arr[cur]=tmp; nxt=0; break; } } var n=arr[cur]; document.getElementById("output").innerHTML=arr[cur]; delete(timerID); cur++; document.getElementById("t").rows[Math.floor((n-1)/10)].cells[(n-1)%10].className="sumi"; }else if(cur>=max){ document.getElementById("output").innerHTML="-"; resetFunc(); }else{ timerID=setInterval(function(){ var n=Math.floor(Math.random()*max)+1; document.getElementById("output").innerHTML=n; },100); } } </script> <style> h1{ text-align:center; } div#output{ text-align:center; height:520px; font-size:500px; color:black; } table#t{ position:absolute; } table#t td{ text-align:center; } td.sumi{background-Color:red;} </style> </head> <style> h1{ text-align:center; } div#output{ text-align:center; height:520px; font-size:500px; color:black; } table#t{ position:absolute; } table#t td{ text-align:center; } td.sumi{background-Color:red;} </style> </head> <body> <div onClick="bingo()" id="output" ></div> <hr> <input type="button" value="reset" onclick="resetFunc()"> </body> <head> </head> <body> <script language="JavaScript"> MAX=75; // 表示する最大数 sval=-1; //接待用数字 svalinx=-1; //接待用数字の配列インデックス DURATION=100; // 小さいほど速い num=new Array(); n=0; for(i=0;i<MAX;i++){ num[i]=i+1; sval=-1; //接待用数字 svalinx=-1; //接待用数字の配列インデックス } rolling=false; rollId=null; function svset(){ var ii; var svin=document.getElementById('input') var sv=svin.value-0; var svecho=document.getElementById('svecho'); svecho.innerHTML='x'; sval=-1; svalinx=-1; for(ii in num){ if(sv==num[ii]){sval=sv; svalinx=ii; break;} } if(sval > 0){ svecho.innerHTML=sval+','+svalinx; svin.value=''; } } function svclear(){ var svecho=document.getElementById('svecho'); svecho.innerHTML='x'; sval=-1; svalinx=-1; } function bingo(){ if(rolling){ rolling=false; clearInterval(rollId); // 先に止めないと・・・ if(sval >= 0){ // ここが追加。接待番号にすりかえる。 n=svalinx; document.getElementById("output").innerHTML=num[n]; sval=-1; svalinx=-1; document.getElementById('svecho').innerHTML='x'; } num.splice(n,1); MAX--; } else{ rolling=true; rollId=setInterval("roll()", DURATION); } } function roll(){ n=Math.floor(Math.random()*MAX); document.getElementById("output").innerHTML=num[n]; } </script> </body> </html>
- daida-kent9066
- お礼率50% (68/134)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
// 以下つづき return function(n , id1, id2, speed){ /* Max number, id for drum, id for result, speed(1to10) */ var obj = new drum(); obj.max = n; obj.drum = document.getElementById(id1); obj.result = document.getElementById(id2); obj.height = obj.drum.clientHeight; obj.speed = Math.max(1, Math.min(10, speed)); obj.reset(); return obj; } })(); //************ テスト用 スクリプト var testDrum = DrumCreate(75, "drum", "result", 5); /* Max number, id for drum, id for result, speed(1to10) */ addEvent("reset", "click", function(){testDrum.reset();}); addEvent("switch", "click", function(){ if(testDrum.status) testDrum.stop(); else testDrum.roll(); }); /*@cc_on@*/ function addEvent(elm, eventname, func){ (typeof elm === "string"?document.getElementById(elm):elm)./*@if(1)attachEvent( 'on' + @else@*/addEventListener(/*@end@*/ eventname, func, false); } </script> </body> </html> …って、先ほど検索してみたら、ご提示のものとほぼ同じものがヒットしました。（サンプル不要でしたね） http://d.hatena.ne.jp/replication/20101125/1290614615 音の再生に関してはテストできる環境にないので、このあたりをご参考に。 （検索すればいろいろ見つかるはずです。） http://jabnz.blog69.fc2.com/blog-entry-546.html http://q.hatena.ne.jp/1179831319 http://webos-goodies.jp/archives/50855398.html
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… ご提示のソースは2つの文書をまぜこぜにしたような？感じでよく理解できないのですが、これ（↓）のHTML版ということでしょうか？ http://okwave.jp/qa/q7644357.html ＞出た数字を表示させる可能でしょうか？ ご提示のものを作成できるのならたいしたことは無いはずです。 表示したい要素の内容に、出た数字のテキストを追加すればよいので、入れ替わる数字を表示させているのとほぼ同様の方法で可能です。 ご提示のコードはいろいろな仕掛けをしているようですが、よくわからないので、勝手に単純な部分のみのサンプルを作成してみました。 *生成する最大数とドラムに使用する要素のid、結果表示用要素のid、回転速度などを指定するようにしてあります。 *おまけで、縦スライドで数字が変わるようにしていますが、速度を10にすれば一気にかわるので見た目はスライドしなくなります。 スイッチはとりあえずボタンにしてありますが、ご提示のような画面クリックやキー入力も同様に設定可能です。 （書きっぱなしのため要領が悪いようで、長くなったので2分割になってしまいました） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> body{ background-color: #fff; } #drum{ width: 500px; height: 500px; margin: 30px auto; position: relative; overflow: hidden; background-color: #fff; border: 2px solid #eee; border-color: #666 #eee #eee #666; } #drum span{ display: block; color: #000; font-size: 500px; height:500px; line-height: 500px; text-align: center; border-bottom: 2px groove #eee; position: relative; } div.result{ background-color: #fff; padding: 0.5em; position:relative; } #result{ width:100%; overflow:hidden; zoom:1; } #result span{ display:block; float:left; width:2.5em; text-align:center; color: #000; font-weight: bold; } #result span:last-child{ color: #f00; } </style> </head> <body> <div> <div id="drum"></div> </div> <hr> <div> <input type="button" id="reset" value="reset"> <input type="button" id="switch" value="start/stop"> </div> <div class="result"> <div>◇◇ 結果 ◇◇</div> <div id="result"></div> </div> <script type="text/javascript"> //********** rolling drum var DrumCreate = (function(){ var rand = function(n){ return Math.random() * n | 0; } var shuffle = function(ary){ for(var i = ary.length - 1; i > 0; i--){ var j = rand(i + 1), tmp = ary[i]; ary[i] = ary[j], ary[j] = tmp; } } var add = function(elm, str, flag){ var e = document.createElement("span"); e.appendChild(document.createTextNode(str)); if(flag) elm.insertBefore(e, elm.firstChild) else elm.appendChild(e); } var clear = function(elm){ while(elm.firstChild) elm.removeChild(elm.firstChild); } var init = function(obj){ if(obj.intervalId) clearInterval(obj.intervalId); for(var i=obj.max; i; i--) obj.nums[i-1] = i; shuffle(obj.nums); obj.status = false; obj.step = obj.height/(11 - obj.speed) + 0.5 | 0; clear(obj.drum); clear(obj.result); add(obj.drum, "-", true); } var setPos = function(elm, pos){ var nodes = elm.getElementsByTagName("span"); var i, node, p = -pos + "px"; for(i=0; node=nodes[i++];) node.style.top = p; } var slide = function(obj){ var pos = obj.height, n = obj.nums.length; if(!n){ clear(obj.drum); add(obj.drum, "-"); obj.stop(); return; } obj.index = rand(n); obj.value = obj.nums[obj.index]; add(obj.drum, obj.value, true); setPos(obj.drum, pos); obj.intervalId = setInterval(function(){ pos = pos>obj.step?pos-obj.step:0; setPos(obj.drum, pos); if(pos === 0){ clearInterval(obj.intervalId); obj.drum.removeChild(obj.drum.lastChild); if(obj.status) slide(obj) else { add(obj.result, obj.value); obj.nums.splice(obj.index, 1); if(typeof obj.endRoll === "function") obj.endRoll.call(obj); } } }, 10); } var drum = function(n){ this.nums = []; }; drum.prototype = { roll: function(){ if(this.status) return; this.status = true; if(typeof this.beforeRoll === "function") this.beforeRoll(); slide(this); }, stop: function(){ this.status = false; }, reset: function(){ init(this); }, beforeRoll: new Function(), endRoll: new Function() } // つづく
関連するQ&A
- ビンゴゲームの作成
9月に大学のゼミ旅行でビンゴ大会をすることになったのでをJavaScript使ってビンゴゲームを作成しています。(カードではなくマシンの方です)。 イメージとしては (1)クリック（スタート） ↓ (2)画面上に数字が早いスピードで次々に切り替わりながら表示される。 ↓ (3)クリック（ストップ） ↓ (4)クリックした瞬間に表示されていた数字を表示したままストップ といったようなものです。 しかしこのビンゴゲームはする時間が限られているので、早く終わらせるために接待ビンゴみたいな感じで途中で指定の数字を出せるようにしなければなりません。 例：「51」が出ればビンゴが出る状況で、51を必ず出す。 当方はパソコン、特にプログラミングに関しては素人で困っています。 何とかネットで調べながら上記の(1)～(4)までは出来ましたが、指定の数字を出すというところは苦戦しています。 詳しい方よろしくお願いします。 一応ソースは載せておきます。 <html> <head> </head> <body> <div align="center" onClick="bingo()" id="output" style="font-size:500px; font-color:black; font-family:'ＭＳ Ｐゴシック'">0</div> <script language="JavaScript"> MAX=75; // 表示する最大数 DURATION=100; // 小さいほど速い num=new Array(); n=0; for(i=0;i<MAX;i++){ num[i]=i+1; } rolling=false; rollId=null; function bingo(){ if(rolling){ rolling=false; num.splice(n,1); MAX--; clearInterval(rollId); } else{ rolling=true; rollId=setInterval("roll()", DURATION); } } function roll(){ n=Math.floor(Math.random()*MAX); document.getElementById("output").innerHTML=num[n]; } </script> </body> </html>
- ベストアンサー
- JavaScript
- ビンゴマシン
Java scriptとメモ帳使って作成したビンゴマシンを改良して、マシンのスタートとストップをEnterキーによる操作も出来るようにしたいと考えています。 しかしどうプログラミングしたらいいか分からず困っています。詳しい方ご教示よろしくお願い致します。 <style type="text/css"> body{ background-color: #fff; } #drum{ width: 450px; height: 450px; margin: 30px auto; position: relative; overflow: hidden; background-color: #fff; border: 2px solid #eee; border-color: #666 #eee #eee #666;} #drum span{ display: block; color: #000; font-size: 450px; height:450px; line-height: 450px; text-align: center; border-bottom: 2px groove #eee; position: relative;} div.result{ background-color: #fff; padding: 0.5em; position:relative; } #result{ width:100%; overflow:hidden; zoom:1; } #result span{ display:block; float:left; width:2.5em; text-align:center; color: #000; font-weight: bold;} #result span:last-child{ color: #f00; } </style></head> <body><div><div id="drum"></div></div> <hr><div> <input type="button" id="reset" value="reset"> <input type="button" id="switch" value="start/stop" or onClick="svset();"></div> <div class="result"> <div>◇◇ 結果 ◇◇</div> <div id="result"></div></div> <script type="text/javascript"> //********** rolling drum var DrumCreate = (function(){ var rand = function(n){ return Math.random() * n | 0; } var shuffle = function(ary){ for(var i = ary.length - 1; i > 0; i--){ var j = rand(i + 1), tmp = ary[i]; ary[i] = ary[j], ary[j] = tmp; } } var add = function(elm, str, flag){ var e = document.createElement("span"); e.appendChild(document.createTextNode(str)); if(flag) elm.insertBefore(e, elm.firstChild) else elm.appendChild(e); } var clear = function(elm){ while(elm.firstChild) elm.removeChild(elm.firstChild); } var init = function(obj){ if(obj.intervalId) clearInterval(obj.intervalId); for(var i=obj.max; i; i--) obj.nums[i-1] = i; shuffle(obj.nums); obj.status = false; obj.step = obj.height/(11 - obj.speed) + 0.5 | 0; clear(obj.drum); clear(obj.result); add(obj.drum, "-", true); } var setPos = function(elm, pos){ var nodes = elm.getElementsByTagName("span"); var i, node, p = -pos + "px"; for(i=0; node=nodes[i++];) node.style.top = p; } var slide = function(obj){ var pos = obj.height, n = obj.nums.length; if(!n){ clear(obj.drum); add(obj.drum, "-"); obj.stop(); return; } obj.index = rand(n); obj.value = obj.nums[obj.index]; add(obj.drum, obj.value, true); setPos(obj.drum, pos); obj.intervalId = setInterval(function(){ pos = pos>obj.step?pos-obj.step:0; setPos(obj.drum, pos); if(pos === 0){ clearInterval(obj.intervalId); obj.drum.removeChild(obj.drum.lastChild); if(obj.status) slide(obj) else { add(obj.result, obj.value); obj.nums.splice(obj.index, 1); if(typeof obj.endRoll === "function") obj.endRoll.call(obj); } } }, 10); } var drum = function(n){ this.nums = []; }; drum.prototype = { roll: function(){ if(this.status) return; this.status = true; if(typeof this.beforeRoll === "function") this.beforeRoll(); slide(this); }, stop: function(){ this.status = false; }, reset: function(){ init(this); }, beforeRoll: new Function(), endRoll: new Function() } return function(n , id1, id2, speed){ /* Max number, id for drum, id for result, speed(1to10) */ var obj = new drum(); obj.max = n; obj.drum = document.getElementById(id1); obj.result = document.getElementById(id2); obj.height = obj.drum.clientHeight; obj.speed = Math.max(1, Math.min(10, speed)); obj.reset(); return obj; }})(); //************ テスト用 スクリプト var testDrum = DrumCreate(75, "drum", "result", 5); /* Max number, id for drum, id for result, speed(1to10) */ addEvent("reset", "click", function(){testDrum.reset();}); addEvent("switch", "click", function(){ if(testDrum.status) testDrum.stop(); else testDrum.roll();}); /*@cc_on@*/ function addEvent(elm, eventname, func){ (typeof elm === "string"?document.getElementById(elm):elm)./*@if(1)attachEvent( 'on' + @else@*/addEventListener(/*@end@*/ eventname, func, false);}</script></body>
- ベストアンサー
- HTML
- div要素で定義された配列変数間の値引き渡し
div要素のid名と値を配列[id名,値]で定義して、親htmlと子iframe間で同名の変数の引き渡しを行なっています。 数が多いのでfor文で実施したいのですがうまくいきません。 間違いを正していただけませんでしょうか。 var arr = [ ["b01", b01], ["b02", b02], ["b03", b03], ・ ・ ]; // iframeの呼び出し var doc = document.getElementsByTagName("iframe")[0].contentWindow; // iframe内div要素の値取得、親の変数に代入 for (var i = 0; i < arr.length; ++i) { arr[i][1] = doc.document.getElementById(`"${arr[i][0]}"`).innerHTML; } 意図としては上のような形にしたいのですが、これではうまくいきません。 おそらく`"${arr[i][0]}"`の部分がいけないのだと思います。 alert(`"${arr[0][0]}"`)の結果は意図どおり"b01"と出力されます。 もちろん以下であれば変数がきちんと渡ります。 var b01 = doc.document.getElementById("b01").innerHTML; var b02 = doc.document.getElementById("b02").innerHTML; var b03 = doc.document.getElementById("b03").innerHTML; ・ ・ よろしくお願いします。
- ベストアンサー
- JavaScript
- 同じメソッドを複数回、呼び出しは可能でしょうか
<script> var arg = new Object, p = location.search.substring(1).split('&'); for(var i=0; p[i]; i++){ var kv = p[i].split('='); arg[kv[0]] = kv[1]; } window.onload = function (){ if(01 == arg.id){document.getElementById("type").innerHTML = "あなたはＡ型";} else if(02 == arg.id){document.getElementById("type").innerHTML = "あなたはＢ型";} else if(03 == arg.id){document.getElementById("type").innerHTML = "あなたはＯ型";} else if(04 == arg.id){document.getElementById("type").innerHTML = "あなたはＡＢ型";} else {document.getElementById("type").innerHTML = "わかりません";} } </script> サイトへの表示は <span id="type"></span> と記述することで、問題なく表示ることができています。 しかし、これを複数個所に記述すると 最初の箇所しか表示しません。 同じページの複数の箇所（希望は４か所）に表示させるためには、 どのようにすればよいのでしょうか。
- ベストアンサー
- JavaScript
- 要素を追加する関数の作成
<div id="here"></div> 上の様な要素内に要素と内容を追加する関数を作りたいのですが、思った結果が得られずに悩んでいます。 function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = <p>content</p>; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); この様な場合にはどうしたら良いのか、何かアドバイスを頂けると嬉しいです。
- ベストアンサー
- JavaScript
- ロールオーバーで画像を先読みする方法
スワップイメージをJavascriptで製作しました。 どうしても 先読みした画像を 指定する方法がわかりません。 このやり方ではできないのでしょうか？ お教えください よろしくお願いします。 以下作成したコードになります。 function preload() { var images1 = new Image(); var images2 = new Image(); var images3 = new Image(); images1.src = "ike1.jpg"; images2.src = "ike2.jpg"; images3.src = "ike3.jpg"; } function over(num){ var a=document.getElementById("img1"); var b=document.getElementById("title1"); var c=document.getElementById("teima1"); switch(num){ case 1: a.innerHTML = "<img src='ike1.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 2: a.innerHTML = "<img src='ike2.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 3: a.innerHTML = "<img src='ike3.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; } }
- ベストアンサー
- JavaScript
- javascriptでラジオボタンのが変更できない
javascriptを勉強中なのですが 練習で下記のような麻雀の計算をしてくれるサイトを作ってみましたがうまく反応しません。 http://tegarude.sakura.ne.jp/mafu/form.html できない点は、例えば、ロンの項目で面前のチェックの時、ツモの項目にいいえが入りますが、 その後、ツモの項目で平和のチェックをいれようとしてもチェックが入りません。 javascriptで操作するようにしたのですがどうもうまくいきません。 単純なこと簡単なことなのかもしれませんが どなたかご教授願えませんでしょうか？ ソースコードが長いのでjavascriptの記述のみ載せています。 サンプルのURLを参考にして下さい。 function on(){ //ロン・ツモ・待ち・雀頭の値を取得 function mjk01(m1,m2){ for (j=0; j<m1.length; j++){ if(m1[j].checked){ m2.innerHTML=m1[j].value; } } } mjk01(document.form1.radio2,document.getElementById("a00")); mjk01(document.form1.radio3,document.getElementById("a01")); mjk01(document.form1.radio4,document.getElementById("a02")); mjk01(document.form1.radio5,document.getElementById("a03")); //formプロパティの省略 formt=document.form1; //ロン項目設定 if(formt.radio2[0].checked){ formt.radio3[3].checked=true; formt.radio7[0].checked=true; formt.radio9[0].checked=true; formt.radio11[0].checked=true; formt.radio13[0].checked=true; } if(formt.radio2[1].checked){ formt.radio3[3].checked=true; formt.radio4[0].checked=true; formt.radio5[2].checked=true; formt.radio6[0].checked=true; formt.radio8[0].checked=true; formt.radio10[0].checked=true; formt.radio12[0].checked=true; } if(formt.radio2[2].checked){ formt.radio3[3].checked=true; } //ツモ項目設定 if(formt.radio3[0].checked){ formt.radio2[3].checked=true; formt.radio4[0].checked=true; formt.radio5[2].checked=true; formt.radio6[0].checked=true; formt.radio8[0].checked=true; formt.radio10[0].checked=true; formt.radio12[0].checked=true; } if(formt.radio3[1].checked){ formt.radio2[3].checked=true; formt.radio4[0].checked=true; formt.radio5[2].checked=true; } if(formt.radio3[2].checked){ formt.radio2[3].checked=true; } //面子の設定 function mentsu(m1,m2,m3){ if(m1[0].checked){ m2[1].value=4; m2[2].value=16; m2[3].value=8; m2[4].value=32; } if(m1[1].checked){ m2[1].value=2; m2[2].value=8; m2[3].value=4; m2[4].value=16; } for(i=0; i<m2.length; i++){ if(m2[i].checked){ m3.innerHTML=m2[i].value; } } } mentsu(document.form1.radio7,document.form1.radio6,document.getElementById("a04")); mentsu(document.form1.radio9,document.form1.radio8,document.getElementById("a05")); mentsu(document.form1.radio11,document.form1.radio10,document.getElementById("a06")); mentsu(document.form1.radio13,document.form1.radio12,document.getElementById("a07")); //小計をすべて数字に変換 num0=document.getElementById("a00").innerHTML; num1=document.getElementById("a01").innerHTML; num2=document.getElementById("a02").innerHTML; num3=document.getElementById("a03").innerHTML; num4=document.getElementById("a04").innerHTML; num5=document.getElementById("a05").innerHTML; num6=document.getElementById("a06").innerHTML; num7=document.getElementById("a07").innerHTML; num0 = parseFloat(num0); num1 = parseFloat(num1); num2 = parseFloat(num2); num3 = parseFloat(num3); num4 = parseFloat(num4); num5 = parseFloat(num5); num6 = parseFloat(num6); num7 = parseFloat(num7); //総合計の算出 document.getElementById("total").innerHTML=num0+num1+num2+num3+num4+num5+num6+num7; }
- ベストアンサー
- JavaScript
- 【javascript】ロールオーバーと画像自動切換えがバッティングし
【javascript】ロールオーバーと画像自動切換えがバッティングして、ロールオーバーがきいていません。 javascriptは該当の動作がどれかというのが分かる程度で、書く事も修正する事もできません。 ロールオーバーが正常に動いていたページに画像自動切換えのスクリプトを設置したところ、ロールオーバーが動かなくなりました。 ページの遷移に問題はないのですが、他ページでは出来ているので何とかしたいと思っています。どうかお助け下さい。 ≪ロールオーバー≫ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } ≪画像切り替え≫ window.onload = function(){ var num = 1; setInterval(function(){ document.getElementById('link' + num).style.display = 'none'; num = document.getElementById('link' + (num+1))? ++num : 1; document.getElementById('link' + num).style.display = 'block'; },7500); }
- ベストアンサー
- JavaScript
- ループ、プログラムなのに！？
以下のプログラムは、ただの乗算と、その合計を計算するだけなのに、なんでfor (var i = 1; i < 4; i++) { のループ、プログラムなのですか？ もし同じ計算結果のダイアログBOXで、Javaの範疇で組むのであれば、他にどんなプログラムがあるのですか？ よろしくお願いします。 <HTML> <HEAD> <TITLE>ループ</TITLE> <script tytpe="text/javascript"> <!-- function calc(){ var alltotal = 0; for (var i = 1; i < 4; i++) { var price = document.getElementById("price" + i).innerHTML; var num = document.getElementById("num" + i).value; var total = price * num; document.getElementById("total" + i).innerHTML = total; alltotal += total; } document.getElementById("alltotal").innerHTML = alltotal; } </script> </HEAD> <body> <p><span id="price1">100</span><input id="num1" value="0" /><span id="total1">1の合計</span></p> <p><span id="price2">200</span><input id="num2" value="0" /><span id="total2">2の合計</span></p> <p><span id="price3">300</span><input id="num3" value="0" /><span id="total3">3の合計</span></p> <div id="alltotal">合計</div> <button onclick="calc()">計算</button> </body> </HTML>
- ベストアンサー
- JavaScript
- javascriptの条件文
スマホにタッチした時の値を取得するスクリプトです。 よくわからないまま作成してますが、ご勘弁下さい。 <script type="text/javascript"> window.document.addEventListener("touchstart", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchmove", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchend", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = ""; }, true); ここまでは正常。 値を取得した、Yを下記のようにしたのですが、 500以上になってもロケーションが実行されません。 間違いなく構文が間違っているのですが、数時間格闘したのですが、わからないので すみませんが、教えて頂けると有難いです。 num = event.touches[0].clientY; if (num >= "500") { location.href = "https://www.google.co.jp/"; } </script>
- ベストアンサー
- JavaScript
お礼
いえいえわざわざありがとうございました。 本当に感謝しています。