ビンゴマシンを改良して、操作も簡単にする方法を教えてください
- Java scriptとメモ帳を使って作成したビンゴマシンを改良して、操作を簡単にする方法を教えてください。
- ビンゴマシンのスタートとストップをEnterキーによる操作もできるようにしたいです。
- 詳しい方、ご教示よろしくお願いします。
- ベストアンサー
ビンゴマシン
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>
- daida-kent9066
- お礼率50% (68/134)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
>Enterキーによる操作も出来るようにしたいと考えています。 >しかしどうプログラミングしたらいいか分からず困っています。 （質問文に書いてあるそのままですが）キーが押された時の処理を記述してください。
関連するQ&A
- プログラミングでのビンゴマシンの作成について
メモ帳にビンゴマシンのソースを打ち込んでプログラミングでビンゴマシンを作成しています。 現段階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>
- ベストアンサー
- HTML
- 同じ i 番目のclassを連動させることはできますか？
お世話になります <script type="text/javascript"><!-- window.onload = function() { document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } obj0 = document.getElementsByClassName("id"); obj1 = document.getElementsByClassName("pass"); for(i=0;i<obj0.length;i++) { obj0[i].onclick = function() { obj1[i].style.display = "block"; } } } //--></script> <style type="text/css"><!-- .id { width:150px; float:left; cursor:pointer; } .pass { display:none; } .pass0 { width:100px; } --></style> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass0"> <input type="button" name="login" value="LOG IN" class="login"> </div> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass"> <input type="button" name="login" value="LOG IN" class="login"> </div> のような感じでclass("id")[0]をクリックしたらclass("pass")[0]を表示、class("id")[1]をクリックしたらclass("pass")[1]を表示・・・というふうにしたいのですがなかなかうまくいきません＞＜ 名前とパス両方を入力にしてやる方法もできますし、 それぞれのclass("id")にfunction()を振って obj0[0].onclick = function() { obj1[0].style.display = "block"; } obj0[1].onclick = function() { obj1[1].style.display = "block"; } のようなやり方もできるのはできます 後者のやり方は他の部分でもいろいろ使っているので記事やメンバーが増えるたびに新たに追加していかないといけないので***.onclick = function() { } を配列にするなどまとめてできる方法があれば教えていただきたいのですが＾＾；
- ベストアンサー
- JavaScript
- ハイライト表示をしたい
2度目の投稿（前回の投稿 http://oshiete1.goo.ne.jp/qa5506744.html）になりますが、指定の文言を色を変えて目立つように（以下ハイライト表示）させたいと思っています 最初に作った物はタグの中（altの中）まで置換をしてしまい、HTMLがくずれるという始末・・・ そこでこのサイトで質問した所、以下のスクリプトを教えて頂きました ところがfirefoxだと動くのですが、IE（IE６しか入っていない環境で使いたい）では動きません 色々調べたところ「フレーム越しの要素コピーは，FFではできて，IEではできないらしい」というのが原因じゃないかという所まで辿り着きました まだjavascript初心者で勉強中な為、教えて頂いたスクリプトも全部理解している訳ではありませんが、どなたか解決方法を教えて頂けないでしょうか 何卒宜しくお願い致します 以下教えて頂いたスクリプト <!-- var str; function left_load(){ if(str){ search(left.document.getElementsByTagName("body")); } } function search(elm){ for(var i=elm.length-1;i>=0;i--){ if(elm[i].nodeName=="#text"){ var re=new RegExp(str,"g"); var ss=elm[i].nodeValue; var result = elm[i].nodeValue.indexOf(str); if(result>=0){ var result_str=ss.replace(re,"<span style=\"background:#77ff77;font-weight:bold\">"+str+"</span>"); var newElement = document.createElement("span"); newElement.innerHTML = result_str; elm[i].parentNode.replaceChild(newElement,elm[i]); } }else{ if(elm[i].hasChildNodes()){ search(elm[i].childNodes); } } } } // --> </script>
- ベストアンサー
- JavaScript
- イベントに適切な値が伝わらない
0から9までidをもつdivを用意して、それぞれクリックしたら そのidを表示したいのですが、なぜかどれをクリックしても 表示されるのは「10」でした。以下のやり方では何がいけないのでしょうか？ function sample(){ for(i=0; i<10; i++){ var obj = document.getElementById(i); obj.onclick = function(){ sample_alert(i); }; } } function sample_alert(i){ alert("i="+i); } window.onload = function() { sample(); } for($i=0; $i<10; $i++){ print "<div id=\"{$i}\">{$i}</div><br>\n"; }
- ベストアンサー
- JavaScript
- FIREFOXでのpostop
現在、画像をブラウザ下から上へ移動する制御をJavaScriptにて行っております。 その際、IEでは正常に動作したのですが、FIREFOXで検証した所動作しませんでした。 原因はIEで使用した"posTop"がFIREFOXで使用できたなららしいです。 --------------------------------------------------------------- <script language=javascript> window.onload=move1; var TimeSet1 = 60; var step1 = 65; var stepcnt =0; var pos_data =0; var obj; function move1(){ stepcnt = 0; for (i = 1; i <= 5; i = i +1){ obj = document.getElementById('GridImg'+String(i)); pos_data = obj.style.posTop; pos_data = pos_data - 2; if(pos_data <= 100){ pos_data = 800; } obj.style.posTop = pos_data; } timerID1=setTimeout('move1()',TimeSet1); } </script> -------------------------------------------------------------- 上記を最小減の変更で修正したと思っております。 ご教授宜しくお願い致します。
- ベストアンサー
- JavaScript
- 複数のRSSを取得した項目を別々に表示したい。
Google AJAX Feed APIで、ホームページにRSSを表示する際、デフォルトでは、取得した複数のRSSを <div id="feed">...</div> に出力することができますが、 それらを、「私のブログ」のRSSを[feed]に「つれづれ日記」を[feed2]に個別に出力するにはどうすればいいのでしょうか？ js内にあるfeedのIDを単純に書き換えても全体の表示する場所が変わるだけでした。 また、IDを変えた同じjsを設置したところ、片方がエラーになりました。 表示をどこでどう分岐すればいいのかわかりません。 下記のソースで、具体的には上のソースのどこにどういう風に記述するのかがわかりません。 いろいろ頑張ってはいるのですが、うまくいかず困ってます。 その辺のヒントをいただければありがたいのですが。 ソースは以下のとおりです。 <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <script type="text/javascript" src="http://www.google.com/jsapi?key=........."></script> <script type="text/javascript"> <!--// google.load("feeds", "1"); var entryArray = new Array(); var entryNum = 0; function initialize() { feedAdd("http://feedblog.ameba.jp/私のブログ........../rss20.xml", 1); feedAdd("http://feedblog.ameba.jp/つれづれ日記........../rss20.xml", 2);//取得したサイトのRSSフィードを入力。足りない場合は適宜4,5,6....と増やす } function feedAdd(rssUrl, boolNum) { var feed = new google.feeds.Feed(rssUrl); feed.setNumEntries(2);//サイト1つあたりの取得するフィード数 feed.load(function(result) { if (!result.error) { for (var i = 0; i < result.feed.entries.length; i++) { entryArray[entryNum] = result.feed.entries[i]; var date = new Date(result.feed.entries[i].publishedDate); entryArray[entryNum].sortDate = ( date.getFullYear()*1000000 ) + ( (date.getMonth() + 1)*3600*32 ) + ( date.getDate()*3600 ) + ( date.getHours()*60 ) + date.getMinutes(); entryArray[entryNum].blogName = result.feed.title; entryNum+=1; } } if(boolNum==1){ feedOutput("feed", 10);//フィードの出力 } }); } function feedOutput(feedId, listNum){ var useFeed = ""; var useDate = ""; var container = document.getElementById(feedId); entryArray = asort(entryArray, "sortDate"); if(listNum==10){//出力するリスト数 listNum = entryNum; } for (var i = 0; i < listNum; i++) { var entry = entryArray[i]; var date = new Date(entry.publishedDate); var y = date.getFullYear(); if (y < 10) {y = "0" + y;} var m = date.getMonth() + 1; if (m < 10) {m = "0" + m;} var d = date.getDate(); if (d < 10) {d = "0" + d;} var h = date.getHours(); if (h < 10) {h = "0" + h;} var mn = date.getMinutes(); if (mn < 10) {mn = "0" + mn;} var s = date.getSeconds(); if (s < 10) {s = "0" + s;} if (entry.title.match(/.*PR:.*/mi) == null) { useDate = y + "年" + m + "月" + d + "日"; useFeed += '<div style="float:left;width:150px;margin:0px 0px 0px 5px">'+ y + "月" + m + "日" + d + " [" + h + ':' + mn + "]" +'</div><div style="float: left;width:220px;height:18px;overflow:hidden;"><a href="' + entry.link + '" target="_blank" title="' + entry.title + '【' + entry.blogName + '】">' + entry.title + '</a> <img src="http://b.hatena.ne.jp/entry/image/large/' + entry.link + '"></div><div style="float:left;width:100px;height:13px;overflow:hidden;max-width:8em;padding:1px 0px 0px 0px;margin:1px 0px 0px 0px">' +"(投稿) "+ entry.blogName + '</div>...<br><hr size="1"/>'; 以下BODY内 「私の日記」の最新情報 <div id="feed"> </div> 「つれづれ日記」の最新情報 <div id="feed2"> </div> 以上、よろしくお願いします。
- ベストアンサー
- JavaScript
- 動的にonclickを割当ながら、引数を正しく渡す方法を教えてください。
皆様のお知恵を拝借させてください。 以下のように、HTML上の<div id="contents">の子になっている <div>のa～cに、動的にonclickの動作を割り当てようとしています。 Javascriptの独自関数abcの引数として、"contents"を渡すことにより、 その子となっている<div>を取得し、 それぞれについて、 「A～Cをクリックすると、それに該当するdivのidを表示する」 という内容になっています。 私の期待としては、 Aをクリックするとa Bをクリックするとb Cをクリックするとc を表示させたいのですが、 どれをクリックしてもcが表示されてしまいます。 ---------------------------------------------- <div id="contents"> <div id="a">A</div> <div id="b">B</div> <div id="c">C</div> </div> <script> abc("contents"); function abc(contents){ var elm = document.getElementById(contents); var cn = elm.childNodes; for (var i = 0; i < cn.length; i++) { var oElement = cn[i]; ★ document.getElementById(oElement.id).onclick = function(){def(oElement.id);}; } } function def(id){ alert(id); } </script> ------------------------------------ 要するに、 「動的にonclickの動作を割り当てることができる」 「引数がただしく渡せる」 の2つが満たしたいのですが、上記のような方法しかわからず、 行き詰ってしまっています。 また、説明を簡略化するためにあえてdef()の中身は、 alertのみにしていますが、実際にはもう少し複雑な処理をさせています。
- ベストアンサー
- JavaScript
- div要素を滑らかに動かしたい
<div id="div1" class="div1" onclick="init();">move box</div> 上記のようなdiv要素を、画面右方向へ滑らかに 動かしたいのですが、どのようなscriptを記述すればよいでしょうか？ setIntervalを使って0.5秒毎に1ピクセル右に移動、 というのを期待して以下のようなscriptを書いてみたのですが、 うまく動作しませんでした。 function init(){ setInterval(moveY, 500); } function moveY(){ var obj = document.getElementById("div1"); obj.style.left = obj.style.left+1 + "px"; }
- ベストアンサー
- JavaScript
- このコードを処理速度向上させることはできますか？
このコードを処理速度向上させることはできますか？ <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ function className(str){ var alltag = document.getElementsByTagName("*"); var ary = []; for(var i=0;i<alltag.length;i++){ if("."+alltag[i].className == str){ ary.push(alltag[i]); } } return ary; } window.$ = function(str){ var ID = str.match(/^#(\w+)/), CLASS = str.match(/^\.(\w+)/), TAG = str.match(/^(\w+)|(\*)/), node = str.match(/^doc/)? document: TAG? document.getElementsByTagName(RegExp.$1==""?RegExp.$2:RegExp.$1): ID? document.getElementById(RegExp.$1): CLASS? navigator.appVersion.toLowerCase().indexOf("msie")? className(str): document.getElementsByClassName(RegExp.$1): null; this.style = function(css){ css = css.split(/\:|\;/); if(ID){ for(var j=0;j<css.length;j++) node.style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; }else{ for(var i=0;i<node.length;i++){ for(var j=0;j<css.length;j++) node[i].style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; } } } return this; } window.onload = function(){ var st = new Date().getTime(); for(var i=0;i<10000;i++){ $('#wrap').style("color:#00f; background:#f00; border-left:10px solid #000;"); $('div').style("border-right:10px solid #000; width:100px; height:100px; margin:10px;"); $('.cl').style("border-top:10px solid #000; background:#00f;"); } var end = new Date().getTime(); alert(end-st); } //]]> </script> <title></title> </head> <body> <div id="wrap">aaaaa</div> <div class="cl">bbb</div> <div class="cl">ccc</div> </body> </html> 他にも、もっとこうしたほうが…等ありましたら教えてください。どうか宜しくお願いします。
- 締切済み
- JavaScript
- jQueryでフォーム追加・削除
jQuery初心者です。 タイトルの通り、jQueryにてフォームの追加と削除ができるボタンを制作しているのですが、どうも削除ボタンがうまく働いてくれません。お手上げ状態ですのでご教授いただければと思います。 仕様としては追加ボタンを押すとフォームが一つ追加され、削除ボタンを押すと一番最後のフォーム一つだけが消える、というものを目指しています。 <script type="text/javascript"> var $i = 1; $(function(){ $('#addbtn').click(function(){ var $id = $('#mo_' + $i); ++$i; $('#wan').text($i); if($i > 14){ $('#addbtn').css('display', 'none'); }else if($i > 1){ $('#delete').css('display', 'block'); } //clone()でフォームを複製 $($id).clone().insertAfter($id) .attr('id', 'mo_' + $i) .end() .find('input').each(function(idx, obj) { //alert(idx); $(obj).attr({ 'id' : $(obj).attr('id').replace(/_[0-9]+$/, $i), 'name' : $(obj).attr('name').replace(/_[0-9]+$/, $i) }).val('').end(); }); $('#delete').click(function(){ $('#wan').text($i); $('div').find('#mo_' + $i).remove(); if($i < 15){ $('#addbtn').css('display', 'block'); }else if($i < 2){ $('#delete').css('display', 'none'); } }); }); }); </script> <style type="text/css"> #delete { display:none; } #addbtn { display:block; } </style> <body> <form action="" method="post"> <input type="button" id="addbtn" value="追加"> <input type="button" id="delete" value="一つ削除"> <div id="mo_1" style="margin:5px"> <input type="text" name="sasa_1" value="" id="mom_1"> </div> <br><br> <input type="submit" value="確定"> <div id="wan"></div> </form> 宜しくお願いします。
- ベストアンサー
- JavaScript
