- 締切済み
このコードを処理速度向上させることはできますか？
このコードを処理速度向上させることはできますか？ <?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> 他にも、もっとこうしたほうが…等ありましたら教えてください。どうか宜しくお願いします。
- 3104kita
- お礼率47% (95/202)
- JavaScript
- 回答数12
- ありがとう数16
- みんなの回答 （12）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
n.cssText += ';' + css; .match() //戻り値が・・・ .test() indexOf() の違い ず～～と、かいとうをまっていると、だんだんレスがつくよ！
- babu_baboo
- ベストアンサー率51% (268/525)
おはよう！ にちようは、れすがつきにくいよ！ ところで、prototype.js の function $() みたいなことがしたいの？ if("."+alltag[i].className == str){～ これの、"."って必要？ というかそもそも、class="abc def ghi" のようにふくすうしていできるのだけど １つだけちぇっく？ そくどをかんがえるのだったら ary.push(alltag[i]); を ary[ary.length]=alltag[i]; にが、じゃっかんはやいかな？どうでもいいけど かんすう $ だけど、 もし、str のさいしょが # ではじまっていたら、すぐにぶんきすればよいものを むだに CLASS とか TAG だとかさがしてむだ。 なんだか、まだまだいっぱいありそう せめて、「.style.cssText」 をぐぐって。 ばぶぅ～
補足
お久しぶりです。覚えていますでしょうか？今からちょうど一年くらい前に、当時三項演算子も知らなかったような僕に、丁寧にシューティングゲームの作り方について教えていただきました。その節はどうもありがとうございました。 あれから、javascript(というかPC)と離れてしまっていて(PCの勉強は趣味でやっているので)、あのゲームは結局完成に至らず終いでした…。 最近また勉強を始めたので、いつか完成させてブログの方にお礼を言いに行こうと思っていたのですが、まさかまた回答をもらうことになるとは思いませんでした…^^; それでこの質問の件ですが、仰る通りprototype.jsやjQuery.jsのような感じのものを自分で作ってみようと思いました。 １、cssTextの件について… $('#wrap').style(…); // $('.cl').style(…); //#wrapは上書きされる。 $('div').style(…); //.clは上書きされる。 となってしまうので、思うようなメソッドにならないんです。 ２、"."って必要？の件について… 単純に、strには".classname"が入っているので、"."+としたのですが、もっと効率的なアプローチがあるのでしょうか？ class="abc def ghi"のように複数指定は…確かにそうでした…^^; ３、もし、str のさいしょが # ではじまっていたら… わざわざnode変数にNodeを格納して、メソッドごとに条件分岐させるよりも、 $ = function(){ //ここでnode変数は作らない if(str.match(/^#(\w+)/))){ this.hoge1 = function(){ document.getElementById('id')… } this.hoge2 = function(){ document.getElementById('id')… } }else if(str.match(/^\.(\w+)/)){ this.hoge1 = function(){ … } this.hoge2 = function(){ … } } } のような分岐ということですか？ ４、ary[ary.length]=alltag[i]; 同じような方法で速度を２０回ほど計ってみたところ。全くくらい変わりませんでした。一般にpushは遅いということでしょうか？
- 1
- 2
関連するQ&A
- このコードは何をやっているのか
data[i]には0～20位の数値が適当に入っている感じです function create(){ text += (data[i]+10).toString(31).toUpperCase(); while (text.match(/(\D)\1{8}/)) { text = text.replace(/(\D)\1{8}/,RegExp.$1+'9'); } while (text.match(/(\D)\1{7}/)) { text = text.replace(/(\D)\1{7}/,RegExp.$1+'8'); } while (text.match(/(\D)\1{6}/)) { text = text.replace(/(\D)\1{6}/,RegExp.$1+'7'); } while (text.match(/(\D)\1{5}/)) { text = text.replace(/(\D)\1{5}/,RegExp.$1+'6'); } while (text.match(/(\D)\1{4}/)) { text = text.replace(/(\D)\1{4}/,RegExp.$1+'5'); } while (text.match(/(\D)\1{3}/)) { text = text.replace(/(\D)\1{3}/,RegExp.$1+'4'); } while (text.match(/(\D)\1{2}/)) { text = text.replace(/(\D)\1{2}/,RegExp.$1+'3'); } while (text.match(/(\D)\1/)) { text = text.replace(/(\D)\1/,RegExp.$1+'2'); } } function load(text){ text = text.substring(text.indexOf("0")+1); while (text.match(/(\D)([2-9])/)) { text = text.replace(/(\D)([2-9])/,load2(RegExp.$1,RegExp.$2)) } j=1; for(i=0;i<text.length;i++) { cdata[j] = "ABCDEFGHIJKLMNOPQRSTU".indexOf(text.charAt(i)); j=j+1; } } function load2(arg1,arg2) { code = arg1; for (i=1;i<arg2;i++) { code += arg1; } return code; } 数値配列の圧縮とデコードをしているようですが 主に正規表現のあたりがどういう事をやっているのかが理解出来ません
- ベストアンサー
- JavaScript
- テキストノードを非表示にできません
いつもお世話になります。 <div id="ida"> <div>aaaaaaaaaaaa</div> </div> のとき、 elemDiv=document.getElementById("ida"); var nodes=elemDiv.childNodes; for(i=0;i<nodes.length;i++) { var node=nodes[i]; if(node.nodeName.toLowerCase()=='div'){ node.style.display='none' } } とすれば、<div>aaaaaaaaaaaa</div> は、表示されなくなります。 ここで、 <div id="ida"> aaaaaaaaaaaa </div> として、つまり文字列を<div>で囲まないようにして for(i=0;i<nodes.length;i++) { var node=nodes[i]; if(node.nodeName=='#text'){ node.style.display='none' } } とすると、「aaaaaaaaaa」が非表示となりません。 テキストノード自体を非表示にすることはできないのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 同じ 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
- すいません、このタグですが、自動で始まるようにならないでしょうか？
<title>１行づつ画面上に出力する</title> <STYLE type="text/css"> <!-- div{font-size:20pt; } --> </STYLE> <script Language="JavaScript"><!-- str = new Array(); str[0] = "Sample text...(^^)/<br>"; str[1] = "１行づつ表示します。<br>"; str[2] = "By KaZuhiro FuRuhata<br>"; str[3] = "<a href='http://www.shiojiri.ne.jp/~openspc/'>OpenSpace</a>"; count = 0; function setTextLine() { if (count >= str.length) return; txt = ""; count++; for (i=0; i<count; i++) txt += str[i]; if (document.all) document.all["outText"].innerHTML = txt; setTimeout("setTextLine()",1000); } // --></script> </head> <body> <DIV id="outText" style="position:absolute;top : 167px;left : 112px;"></DIV> <DIV style="width : 139px;height : 76px;top : 10px;left : 146px; position : absolute; z-index : 1; " id="Layer1"><a href="javaScript:setTextLine()">出力開始</a></DIV> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。
JavaScript初心者です。 URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいんですが。。 URLに含まれる文字列を名前にもつidのスタイル変更については解決したのですが、同様のことclassでもやりたいと考えています。 例えばURLの末尾が /index.html?AAA&BBB となっている場合、非表示だったAAAとBBBのdivを表示するということをやりたいです。 ソースは以下になります。 前半でURLの末尾を取得して、後半でclassのスタイルを書き換えているつもりです。それぞれでは動作するんですが、あわせると動作しません。自分はかなり初心者ですので、根本的な誤りがあるかもしれませんが、ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- .AAA,.BBB,.CCC { width:200px; background-color:#ccc; margin:10px; display:none; } --> </style> <script language=javascript> <!-- function changeStyle(){ var query = window.location.search.substring(1); var search = query.split("&"); for (var i = 0; i < search.length; i++) { var XXX = search[i]; } var allElement = document.getElementsByTagName('*'); for (var j = 0; j < allElement.length; j++) { if (allElement[j].className=='XXX') { allElement[j].style.display = "block"; } } } --> </script> </head> <body onload=changeStyle();> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> </body> </html>
- 締切済み
- JavaScript
- 正規表現をまとめることってできますか？
正規表現をまとめるにはどうしたらよいでしょうか？ var str = document.forms[0].school_list.value; if (str == "") return; var result = ""; for (var i = 0; i < str.length; i++) result = str.replace(/,/g,'\n'); document.forms[0].result_school_list.value = result; document.forms[0].result_school_list.select(); var str = document.forms[0].result_school_list.value; if (str == "") return; var result = ""; for (var i = 0; i < str.length; i++) result = str.replace(/、/g,'\n'); document.forms[0].result_school_list.value = result; document.forms[0].result_school_list.select();
- ベストアンサー
- JavaScript
- htmlファイルでするとできるのにcgiファイルでするとできないのはなぜでしょう？
お世話になります <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>com</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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; } obj = document.getElementsByClassName("trans_e"); for(i=0;i<obj.length;i++) { l = obj[i].innerHTML; obj[i].style.width = l + "px"; } } //--></script> <style type="text/css"><!-- .trans_a { float:left; width:20px; } .trans_b { float:left; width:100px; } .trans_c { margin-top:10px; } .trans_d { float:left; width:200px; } .trans_e { background-color:red; margin-bottom:2px; } --></style> </head> <body> <div> <div class="trans_a"> </div> <div class="trans_b"><img src="./img/non.png" alt="$shuzoku"> <div class="trans_c">$type</div></div> <div class="trans_d"> <div class="trans_e">41</div> <div class="trans_e">40</div> <div class="trans_e">47</div> <div class="trans_e">35</div> <div class="trans_e">22</div> <div class="trans_e">11</div> </div> </div> </body> </html> このようにclass="trans_e"のところをその中に書かれている数値で幅を可変させようとしているのですがhtmlファイルで試すと思ったようなことをしてくれるのですがcgiファイルに組み込むと幅が100％のまま変わらないのですが解決策をご存知の方いらっしゃいますでしょうか？ getElementByIdですればできるのですが結構数があるものですので・・・－－；
- ベストアンサー
- JavaScript
- このタグはグラデーションですが、文字が小さくて困っています。
<html> <head> <title>文字にグラデーションをかけ１文字ずつ出力する</title> <script Language="JavaScript"><!-- str = "■■■■■■■■■■■■■■■■■■■■■■■■■■"; count = 0; function setText1() { if (count > str.length) return; count++; txt = str.substring(0,count); txt2 = gradTextConv(txt); if (document.all) document.all["outText"].innerHTML = txt2; if (document.layers) { document.layers["outText"].document.open(); document.layers["outText"].document.write(txt2); document.layers["outText"].document.close(); } setTimeout("setText1()",100); } function gradTextConv(sText) { p = 16 / str.length; str2 = ""; for (i=0; i<sText.length; i++) { pt = Math.floor(p*i); n = "0123456789ABCDEF".charAt(pt); c = "#"+n+n+"0000"; str2 = str2 + "<font color='"+c+"'>" + sText.charAt(i) + "</font>"; } return str2; } // --></script> </head> <body bgcolor="white" onload="setText1()"> <div id="outText" style="position:absolute;top:50px;left:5px;"></div> </body> </html>
- ベストアンサー
- HTML
- BOXがロールオーバーで開閉するインターフェース
よろしくお願いします。 javascript初心者です。 今WEBサイトを構築してして BOXがロールオーバーで開閉するインターフェースを作りたくて 本を買って勉強しているのですがうまく動作しません。。 HTMLは ーーーーーーーーーーーーーーーーーーーーーーーーー <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type"content="text/css"/> <meta http-equiv="Content-Script-Type"content="text/javascript"/> <title>テスト</title> <link href="css/1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java/java.js"></script> </head> <body> <body onload="boxMove()"> <div id="mybox1"class="box" style="top:0px;left:0px;"></div> <div id="mybox2"class="box" style="top:0px;left:250px;"></div> <div id="mybox3"class="box" style="top:0px;left:500px;"></div> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー CSS ----------- .box{ position:absolute; width:250px; height:200px; } #mybox1{ background-color:#FF9900; } #mybox2{ background-color:#BBEE55; } #mybox3{ background-color:#AAEEFF; } body{ color:#FFFFFF; margin:0; padding:0; overflow:hidden; } javascript --------------------------------- var myTarget=700; var speed=2; function myboxCmove(){ var myPos = eval(document.getElementById('mybox2').style. left.replace("px","")); myPos += (myTargetC-myPos)/speed; document.getElementById('mybox2').style.left = myPos+"px"; setTimeout("myboxCmove()",10); } function myboxRmove(){ var myPos = eval(document.getElementById('mybox3').style. left.replace("px","")); myPos += (myTargetR-myPos)/speed; document.getElementById('mybox3').style.left = myPos+"px"; setTimeout("myboxRmove()",10); } var pageWidth; var pageHeight; function setTarget1(){ myTargetC = pageWidth-100; mytargetR = pageWidth-50; } function setTarget2(){ myTargetC = 50; mytargetR = pageWidth-50; } function setTarget3(){ myTargetC = 50; mytargetR = 100; } function config(){ if(document.all){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = window.innerWidth; pageHeight = window.innerHeight; } myTargetC = pageWidth/3; myTargetR = pageWidth/3*2; document.getElementById('mybox1').style.width = (pageWidth-100)+"px"; document.getElementById('mybox1').style.height = (pageHeight-100)+"px"; document.getElementById('mybox2').style.width = (pageWidth-100)+"px"; document.getElementById('mybox2').style.height = (pageHeight-100)+"px"; document.getElementById('mybox3').style.width = (pageWidth-100)+"px"; document.getElementById('mybox3').style.height = (pageHeight-100)+"px"; } <body onload="config();myboxCmove();myboxRmove();"onresize="config()"> <div id="mybox1" class="box" style="top:0px; left:0px;" onmouseover="setTarget1()"></div> <div id="mybox2" class="box" style="top:0px; left:250px;" onmouseover="setTarget2()"></div> <div id="mybox3" class="box" style="top:0px; left:500px;" onmouseover="setTarget3()"></div> -------------------------------------------------- テストとして本を参考にやってみたのですがなにがいけないのかまったくわかりません。どなたかご教授お願い致します。
- ベストアンサー
- JavaScript
- javascirpt 超初心者です・・・すみません。。
本当に初心者なんでゆるしてください。。 下記のプログラムで、マウスオーバー・アウトでスクリプトを読み込んでスタイルシートを入れ替えようとおもっていました。 ですが、機能してくれません。。 すみませんが、ご教授いただけませんでしょうか？ お願いします。。 --html---------------------------------------------------- <script type="text/javascript" src="test.js"></script> <body> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> </body> ----------------------------------------------------------- ---css---------------------------------------------------- .hare{ background:url(toumei.gif) no-repeat; width:300px; height:100px;} .ame{ background:url(toumei2.gif) no-repeat; width:300px; height:100px;} ----------------------------------------------------------- ---javascript----------------------------------------------- window.onload = function(){ var hai = document.getElementsByTagName("div"); for (var i=0; i<=hai.length-1; i++){ hai.item(i).onmouseover = function(){ hai.item(i).className="ame"; } hai.item(i).onmouseout = function(){ hai.item(i).className="hare"; } } } -----------------------------------------------------------
- 締切済み
- Java
補足
.match() .test() indexOf() の違い調べました。 そして.match()は消して.test()とindexOf()を使用することにしました。 なんだかわざわざ面倒な処理を書いていた自分にガッカリです…。 n.cssText += ';' + css;ですが、 this.style = function(css){ if(ID){ node.style.cssText += ';' + css; }else{ for(var i=0;i<node.length;i++){ node[i].style.cssText += ';' + css; } } } とすることにより出来ました。なるほどって感じです。 ですが処理速度に関しては、IE6とIE7とFxでは若干早くなり(10％upくらい…？)、他のブラウザでは相当遅くなってしまいました…。Operaに関しては致命的(５倍以上)に遅いです。IE8はほぼ変わらずです。 IE6とIE7とFxのみこの処理に分岐させてみようかと思います。