×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
別に作成したwebページの変数移動をしたくて
そんな時に使用する localStrage というものの動作を確認するも
まったくうまく動作しない。
何が悪いのか全く分からず作成する気力が落ちていた時
なんとなく検索したページに
Microsoft Edge は ローカル環境では localStrge は 動作しない。
・・・ Σ（・□・；）
どうりで動かないわけだ。
そんな時に使用する localStrage というものの動作を確認するも
まったくうまく動作しない。
何が悪いのか全く分からず作成する気力が落ちていた時
なんとなく検索したページに
Microsoft Edge は ローカル環境では localStrge は 動作しない。
・・・ Σ（・□・；）
どうりで動かないわけだ。
PR
html内
<div id="好きな符号">html内隠したい範囲</div>
と <div>内で囲む
javascript内
表示する場合
document.getElementById("好きな符号").style.display="none";
隠す場合
document.getElementById("好きな符号").style.display="block";
今回の図鑑作成の場合、空の表を隠す為に使用。
あと今後選択部分のまとめに使用予定。
使用例
<div id="好きな符号">html内隠したい範囲</div>
と <div>内で囲む
javascript内
表示する場合
document.getElementById("好きな符号").style.display="none";
隠す場合
document.getElementById("好きな符号").style.display="block";
今回の図鑑作成の場合、空の表を隠す為に使用。
あと今後選択部分のまとめに使用予定。
使用例
<div id="hhh">おはよう</div>
<form>
<input type="button" value="表示" onclick="hyou()">
<input type="button" value="非表示" onclick="kaku()">
</form>
<script>
// 表示する
function kaku()
{document.getElementById("hhh").style.display="none";}
// 隠す
function hyou()
{document.getElementById("hhh").style.display="block";}
</script>
html内
<div id="name001"></div>
id名を付ける
javascript内
document.getElementById("name001").style.backgroundColor = '#33CCFF';
で色を付ける。
とりあえず色の確認
未#FFFFFF 炎#fdeff2 水#ebf6f7 森#bee0ce 闇#f2e6ff 光#f5f2dc
<div id="name001"></div>
id名を付ける
javascript内
document.getElementById("name001").style.backgroundColor = '#33CCFF';
で色を付ける。
とりあえず色の確認
未#FFFFFF 炎#fdeff2 水#ebf6f7 森#bee0ce 闇#f2e6ff 光#f5f2dc
<script type="text/javascript" >
window.onload = function(){ ページ読み込み時に行いたい処理 }
</script>
をそのページに記述します。
今回の場合 読み込み時に書き込んだ表を消したいので
表を隠す関数 zenkakusi() を
<script type="text/javascript" >
window.onload = function(){zenkakusi()}
</script>
と記述して読み込み時に実行させます。
＞＞＞ 注意 ＜＜＜
その１ window.onload を 複数記述しても 最後のみ実行
その２ window.onload は 画像など関連データー読み込み後実行
その前に実行する jQuery の ready というものがあるらしい。
window.onload = function(){ ページ読み込み時に行いたい処理 }
</script>
をそのページに記述します。
今回の場合 読み込み時に書き込んだ表を消したいので
表を隠す関数 zenkakusi() を
<script type="text/javascript" >
window.onload = function(){zenkakusi()}
</script>
と記述して読み込み時に実行させます。
＞＞＞ 注意 ＜＜＜
その１ window.onload を 複数記述しても 最後のみ実行
その２ window.onload は 画像など関連データー読み込み後実行
その前に実行する jQuery の ready というものがあるらしい。
<th><td>などで幅をwidthでうまくいかない場合。
■ HTML
■ CSS
<table> の class="auto-style1" の CSS に table-layout: fixed; を追加する
■ HTML
<div id="disp001">
<table id="ta001" class="auto-style1" style="width: 960px">
<tr>
<td class="auto-style2" style="width: 150px"><div id="name001"></div></td>
<td class="auto-style2" style="width: 270px"><div id="wazaname1001"></div></td>
<td class="auto-style2" style="width: 270px"><div id="wazaname2001"> </div></td>
<td class="auto-style2" style="width: 270px"><div id="wazaname3001"></div></td>
</tr>
■ CSS
<style type="text/css">
.auto-style1 {
border: 1px solid #000000;
table-layout: fixed;
}
<table> の class="auto-style1" の CSS に table-layout: fixed; を追加する
現在までの知識でできること。
javascript <<<<<
・HP上の文字の書き換え
・HP上のイラストの変更
・２次元配列の設定
・インプットボタンの設定
HPの作成 <<<<<
・表の作成ができる
表の作成が出来てそのセルの設定が出来ると
ボタンで一気に中の文字、絵を変更することができる。
あとは力業で図鑑が作成できると信じて作成。
javascript <<<<<
・HP上の文字の書き換え
・HP上のイラストの変更
・２次元配列の設定
・インプットボタンの設定
HPの作成 <<<<<
・表の作成ができる
表の作成が出来てそのセルの設定が出来ると
ボタンで一気に中の文字、絵を変更することができる。
あとは力業で図鑑が作成できると信じて作成。
文字、絵の名を２次配列に変更する。
<form method="post">
<input name="Button1" type="button" value="button" onclick="henkou1()"/>
<input name="Button2" type="button" value="button" onclick="henkou2()"/>
<table style="width: 200px">
<tr>
<td><div id="mname">ホノオダマ</div></td>
</tr>
<tr>
<td>
<img alt="cha img" name="char001" src="0003.png" height="200" width="200">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var mon = new Array();
mon[0] = new Array();
mon[1] = new Array();
//// 配列代入
var mon = [
["ホノオダマ","0003.png"],
["水のエレメンタル","0005.png"]
];
function henkou1()
{
document.getElementById("mname").innerHTML=mon[0][0];
document.char001.src= mon[0][1];
}
function henkou2()
{
document.getElementById("mname").innerHTML=mon[1][0];
document.char001.src= mon[1][1];
}
ボタンを押すと キャラ名、キャラが変更されます。
ボタンを押すと キャラ名、キャラが変更されます。
<form method="post">
<input name="Button1" type="button" value="button" onclick="henkou1()"/>
<input name="Button2" type="button" value="button" onclick="henkou2()"/>
<table style="width: 200px">
<tr>
<td><div id="mname">ホノオダマ</div></td>
</tr>
<tr>
<td>
<img alt="cha img" name="char001" src="0003.png" height="200" width="200">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function henkou1()
{
document.getElementById("mname").innerHTML="ホノオダマ";
document.char001.src= "0003.png";
}
function henkou2()
{
document.getElementById("mname").innerHTML="水のエレメンタル";
document.char001.src= "0005.png";
}
</script>
上記を ＊＊＊.html にして 0003.png と0005.png と同じフォルダーにいれ
立ち上げるとボタンを押すと文字、絵が変わる。
</script>
上記を ＊＊＊.html にして 0003.png と0005.png と同じフォルダーにいれ
立ち上げるとボタンを押すと文字、絵が変わる。
表、ボタンはメモ帳打ち込みでもできますが
面倒なので Microsoft Expression Web4 を使用します。
作成されるソースコードは 大体次のようになります。
面倒なので Microsoft Expression Web4 を使用します。
作成されるソースコードは 大体次のようになります。
<form method="post">
<input name="Button1" type="button" value="button" />
<input name="Button2" type="button" value="button" />
<table style="width: 200px">
<tr>
<td>ホノオダマ</td>
</tr>
<tr>
<td>
<input name="Image1" src="0003.png" type="image"
height="200" width="200" >
</td>
</tr>
</table>
</form>
alert(表示する内容)
うまく動かない場合に<script> </script> の間にアラートを設置する。
alert("こんにちは")
どこまで動いているか確認用。
alert(変数)
途中の代入値の確認用。
うまく javascript が動かない時 （スペル間違いの場合が多い）
上から順にずらして アラート 記入 HP起動。
アラートが起動しなければその場所をチェック。
うまく動かない場合に<script> </script> の間にアラートを設置する。
alert("こんにちは")
どこまで動いているか確認用。
alert(変数)
途中の代入値の確認用。
うまく javascript が動かない時 （スペル間違いの場合が多い）
上から順にずらして アラート 記入 HP起動。
アラートが起動しなければその場所をチェック。
最新記事
(05/24)
(05/04)
(04/25)
(02/28)
(02/22)
P R