javascriptのフラグの使われ方 コード有
- 初心者によるjavascriptのフラグの使われ方についての質問です。フラグ変数の役割とinitable関数のスライド動作について教えてください。
- 質問者はサンプルコードを使いながら勉強しており、スライドする写真について質問しています。flag変数は2枚スライドを防ぐための関数使用中を示す変数であり、initable関数を抜ける前にスライド動作をしています。
- 質問者はflag変数が遅すぎると感じており、スライド関数に行く前にflag変数を設定し、関数使用中であることを示しているのではないかと考えています。しかし、具体的なタイミングについては不明です。質問者はブレークポイントを設定し、ステップ実行しながら動作を確認しています。
- ベストアンサー
javascriptのフラグの使われ方 コード有
javascriptの初心者です。 サンプルコードを使って勉強しているので、 フラグの使われ方について質問があります。 下にあるコードは、 4枚縦並びになった写真を、ボタンで1枚ずつスライドするスクリプトです。 その中にあるflag変数は、おそらくボタンを2度押しした時に、 一気に2枚スライドをするのを防ぐための、関数使用中を示す変数と思います。 ここで２つ質問です。 ●flag変数はここでは、何を表してますか？ ●initable関数を抜ける前、後、どちらでスライド動作をしていますか？ ----私の考え方（思い込み？）------------ このコードでちゃんと画像がスライドするのですが、 flag = ture とする場所が遅すぎる感じがします。 というのも、 slidetable関数の中に、ifがあるので その条件がクリアするまで、関数から抜けだせません。 やっと抜けだしてはじめて、flag = trueと設定する。 flag変数が、使用中を表すものだとしたら、 スライド関数に行く前に、flag = tureとして、 「関数は使用中なので、今クリックしてもreturnしますよ」とさせるのでないか？ 実際は、どのタイミングで動き出すものかよくわかりません。 chromeでブレークポイントを作って、 １つずつ動かすと、initableを抜けだした後に、 HTMLコードの所に移動したぞ。 この流れだったら、納得するけど。。。 --------------------------- スライド関数の処理は とりあえずどんな処理をするか受け付ける。(まだ動き出さない） ↓ flag =tureとして、inittable関数を抜けだして ↓ 動かす場所に、処理を一気に適用。 ---------私の考え方（思い込み？）以上------------ -------------------------------------------- <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>東京の風景</title> <script type="text/javascript"> <!-- var tablemax = 4; var tablewidth = 260; var step = 14; var num = 0; var offset = 0; var flag = false; function inittable(n){ if (flag) return; num += n; if (num < 0) { num = 0; return; } if (num >=tablemax) { num = tablemax-1; return; } offset = n * step; count = tablewidth / step; slidetable(); flag = true; } function slidetable(){ imgtables.style.pixelLeft -= offset; count--; if (count > 0) setTimeout("slidetable()",10); else flag = false; } --> </script> </head> <body> <img src="left.gif" onMousedown="inittable(-1)" style="position:absolute;top:220px;left:20px;"> <img src="right.gif" onMousedown="inittable(1)" style="position:absolute;top:220px;left:60px;"> <div style="position:absolute;top:10px;left:10px;clip:rect(0px 260px 200px 0px)"> <table id="imgtables" border="0" cellspacing="0" cellpadding="0" style="position:absolute;top:0px;left:0px;"> <tr> <td> <table bgColor="#ccccff" width="260"> <tr><td >東京フォト（１）</td></tr> <tr><td><img src="pic1.jpg" width="260" height="200"></td></tr> </table> </td> <td> <table bgColor="#ccccff" width="260"> <tr><td>東京フォト（２）</td></tr> <tr><td><img src="pic2.jpg" width="260" height="200"></td></tr> </table> </td> <td> <table bgColor="#ccccff" width="260"> <tr><td>東京フォト（３）</td></tr> <tr><td><img src="pic3.jpg" width="260" height="200"></td></tr> </table> </td> <td> <table bgColor="#ccccff" width="260"> <tr><td>東京フォト（４）</td></tr> <tr><td><img src="pic4.jpg" width="260" height="200"></td></tr> </table> </td> </tr> </table> </div> </body> </html>
- asobi17
- お礼率19% (36/185)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> slidetable関数の中に、ifがあるので > その条件がクリアするまで、関数から抜けだせません。 > やっと抜けだしてはじめて、flag = trueと設定する。 forやwhileじゃなくてifですよ？ > if (count > 0) setTimeout("slidetable()",10); else flag = false; countが0より大きければ setTimeout("slidetable()",10); が実行されますが、それだけです。 関数はすぐに抜けます。 > ●flag変数はここでは、何を表してますか？ 推測されているとおりビジー（動作中）フラグだと思います。 > ●initable関数を抜ける前、後、どちらでスライド動作をしていますか？ 最初の1stepだけは抜ける前。 後は抜けた後。 適当な所にalertでも挿入すれば分かるはず。
関連するQ&A
- 画像のNetscapeでの表示
Netscapeで下記のようにテーブルを組むと画像の表示がされません。 IEではうまく表示してくれるのですが・・・。 <table border='0' cellspacing='0' cellpadding='0' width='100%' height='100%' style='position:absolute;bottom:0px;left:0px;'> <tr> <td><img src="xxx.gif"></td> </tr> </table> Netscapeで使用できないタグなどがふくまれているのでしょうか？ Netscapeのバージョンは、7.02です。
- 締切済み
- HTML
- センタリングのＨＴＭＬの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
- タグの修正に力をかしてください
ホットペッパーに出てくるお店のページのバナーのように、 「アクセス」「TEL」の文字を表示させたいのですがうまくいきません。 タグの修正にちからをかしていただけないでしょうか。 以下、タグです。よろしくおねがいします。 <table width="702" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="color3" colspan="3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> <div style="position:relative;"><img src="images/hotpot_bannar.gif" alt="バナー" width="700" height="151"></div> <div style="position:absolute; top:70px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">アクセス</div> <div style="position:absolute; top:50px; left:450px; color:#ffffff; font-size:10px;>JR環状線：「福島駅」・・・</div> <div style="position:absolute; top:70px; left:450px; color:#ffffff; font-size:10px;>JR東西線：「新福島駅」・・・</div> <div style="position:absolute; top:120px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">TEL</div> <div style="position:absolute; top:120px; left:450px; color:#ffffff; font-size:10px;>06-****-****</div> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> </table>
- ベストアンサー
- HTML
- 助けてください＞＜IE上で1pxのズレ
こんにちわ。 組んだテーブルに謎の１ｐｘがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>
- 締切済み
- HTML
- css
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。
- ベストアンサー
- CSS
- javascriptを使い、サムネイル表示
サンプルＨＰ⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>
- 締切済み
- JavaScript
- JavaScriptを入れるとｔdタグ内の高さが広がる
CSSにて高さ指定もしてあるのですが、JavaScriptの記載あるtdタグの高さがIEだと広がってしまいます。 この現象はFireFoxだと現れません。 下記コードですと3段目と4段目のtdの高さが他の段に比べ広がってしまいます。 何か解決策とうございましたら、教えてください。 -----------JavaScript関数----------- <script language="javascript"> function goNext() { if (confirm("確認")) { return true; } else { return false; } } </script> -----------html----------- <table id="tablea"> <tr><td class="b"><img src="img.jpg"/></td></tr> <tr><td> </td></tr> <tr><td class="b"><form action="5_4modify1_pla.html" onsubmit="return goNext();"><input name="bb" type="image" src="img.jpg" width="150" height="30"/></form></td></tr> <tr><td class="b"><form action="5_4modify1_pla.html" onsubmit="return goNext();"><input name="bb" type="image" src="img.jpg" width="150" height="30"/></form></td></tr> <tr><td class="b"><img src="img.jpg"/></td></tr> </table> -----------CSS----------- .b {height: 30px;} #tablea { width: 180px; height: 200px;} ----------------------
- ベストアンサー
- HTML
- 画像の四隅を丸くしたい
html初心者です。 あるメイン画像の左上に、透過gif画像を重ねて表示させたいのですが、そのようなことは可能なんでしょうか・・・ メイン画像は長方形です（通常の画像のように、ふちは角ばっている）。その画像の左上に、透過gif画像を重ねて表示させようとしています。 htmlには： <TABLE> <TR> <TD> <div id="corner"><IMG SRC="images/frame4_03.gif"></div> <div id="inner"><IMG SRC="screen05_04.jpg"></div> </TD> </TR> </TABLE> cssには： #corner{ position:absolute; left:251px; top:98px; width:99px; height:39px; BACKGROUND-COLOR:#FFFFFF; } #inner{ position:absolute; left:251px top:98px; width:999px; height:799px; } と書いています。 WindowsXP、IE7で表示させています。 よろしくおねがいいたします。
- ベストアンサー
- HTML
- テーブルで画像を並べるときに・・
今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか？ 環境は、WinMEでエディタにタグ打ち込んで作ってます。
- ベストアンサー
- HTML
- ブラウザでの表示を統一するには・・・
画像を指定の場所に配置をしたく、下記のような書き方をしているんですが、 IE8の表示での位置は、大丈夫ですが、 safariで表示すると、縦位置がずれます。 双方で、同じ位置に配置するようにするには、どうすればいいでしょうか？ よろしくお願い致します。 <table style="position:absolute;margin-top:-1000px;margin-left:-10px;"> <tr><td> <img src="http://画像.jpg" width="500" height="250" alt="ひまわり" /> </td></tr> </table>
- ベストアンサー
- HTML
