データベーススクリプトVer3です。ちょー簡単な集計に向いています。
これは数値計算タイプです。数値を入力すると、その合計金額がわかります。
今回は、マイナス数値も計算出来るようになりました。
出た金額の総計、入った金額の総計、で、残高が出ます。
用途的には、簡易家計簿みたいなもんでしょうか。
サンプルでは、10000円のシャツ、39999円のスーツ、
4568円の帽子、25789円の雑収入、234568円の給料、
51248円のジャケット、9870円の化粧品と、
金額が動いた結果を計算させています。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
・補足解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
data_name=new Array();
data_kazu=new Array();
//********** データ *********
//データ1
data_name[0]="シャツ";
data_kazu[0]=-10000;
//データ2
data_name[1]="スーツ";
data_kazu[1]=-39999;
//データ3
data_name[2]="帽子";
data_kazu[2]=-4568;
//データ4
data_name[3]="雑収入";
data_kazu[3]=25789;
//データ5
data_name[4]="給料";
data_kazu[4]=234568;
//データ6
data_name[5]="ジャケット";
data_kazu[5]=-51248;
//データ7
data_name[6]="化粧品";
data_kazu[6]=-9870;
//********** 配置指定 *********
//center , right , leftのいずれかを指定
//結果画面全体の配置
table_align="left";
//項目の配置
th_align="center";
//文字データの配置
td_align1="left";
//数値データの配置
td_align2="right";
//********** スタイル *********
//ウィンドウのタイトルを指定
win_title='結果画面';
//ウィンドウの背景色を指定
bg_color='#ffffff';
//ウィンドウの文字色を指定
text_color='#000000';
//ウィンドウのリンク色を指定
link_color='#ff0000';
//ウィンドウのvlink色を指定
vlink_color='#00ff00';
//ウィンドウのalink色を指定
alink_color='#0000ff';
//テーブルの横幅を指定
table_w='400';
//テーブルの背景色を指定
table_bgcolor='#ffffff';
//テーブルのthの背景色を指定
th_bgcolor='#ffd9b7';
//テーブルのthの文字色を指定
th_textcolor='#622f00';
//テーブルのthの文字サイズを指定
th_textsize='3';
//テーブルのtdの背景色を指定
td_bgcolor='#fff795';
//テーブルのtdの文字色を指定
td_textcolor='#645c00';
//テーブルのtdの文字サイズを指定
td_textsize='3';
//ウィンドウの戻るボタン名を指定
//画像ボタンを使用したい場合は、imgタグを記入
button='戻る';
kekka_nyuukinn=0;
kekka_sisyutu=0;
function syuukei3()
{
var mojis='';
kekka_nyuukinn=0;
kekka_sisyutu=0;
for(i=0; i<data_kazu.length; i++)
{if(data_kazu[i]>0)kekka_nyuukinn+=data_kazu[i];
else kekka_sisyutu+=data_kazu[i];}
kekka=kekka_nyuukinn+kekka_sisyutu;
ji='<td bgcolor="'+td_bgcolor+'"><br><\/td>\n';
mojis='<html>\n<head>\n<title>'+win_title+'<\/title>\n<\/head>\n';
mojis+='<body text="'+text_color+'" bgcolor="'+bg_color+'" link="'+link_color+'" vlink="'+vlink_color+'" alink="'+alink_color+'">\n';
mojis+='<div align="'+table_align+'">';
mojis+='<table width="'+table_w+'" border="1" bgcolor="'+table_bgcolor+'">\n';
mojis+='<tr align="'+th_align+'">\n<th bgcolor="'+th_bgcolor+'"><font size="'+th_textsize+'" color="'+th_textcolor+'">項目<\/font><\/th>\n';
mojis+='<th bgcolor="'+th_bgcolor+'"><font size="'+th_textsize+'" color="'+th_textcolor+'">支出<\/font><\/th>\n';
mojis+='<th bgcolor="'+th_bgcolor+'"><font size="'+th_textsize+'" color="'+th_textcolor+'">収入<\/font><\/th>\n';
mojis+='<th bgcolor="'+th_bgcolor+'"><font size="'+th_textsize+'" color="'+th_textcolor+'"><br><\/font><\/th>\n<\/tr>\n';
for(i=0; i<data_kazu.length; i++)
{
mojis+='<td bgcolor="'+td_bgcolor+'" align="'+td_align1+'"><font size="'+td_textsize+'" color="'+td_textcolor+'">'+data_name[i]+'<\/font><\/td>\n';
if(data_kazu[i] <= 0)
mojis+='<td bgcolor="'+td_bgcolor+'" align="'+td_align2+'"><font size="'+td_textsize+'" color="'+td_textcolor+'">'+data_kazu[i]+'<\/font><\/td>\n'+ji+ji+'<\/tr>\n';
else
mojis+=ji+'<td bgcolor="'+td_bgcolor+'" align="'+td_align2+'"><font size="'+td_textsize+'" color="'+td_textcolor+'">'+data_kazu[i]+'<\/font><\/td>\n'+ji+'<\/tr>\n';
}
mojis+='<tr>\n<th bgcolor="'+th_bgcolor+'" align="'+th_align+'"><font size="'+th_textsize+'" color="'+th_textcolor+'">総計<\/font><\/th>\n';
mojis+='<th bgcolor="'+th_bgcolor+'" align="'+td_align2+'"><font size="'+th_textsize+'" color="'+th_textcolor+'">'+kekka_sisyutu+'<\/font><\/th>\n';
mojis+='<th bgcolor="'+th_bgcolor+'" align="'+td_align2+'"><font size="'+th_textsize+'" color="'+th_textcolor+'">'+kekka_nyuukinn+'<\/font><\/th>\n';
mojis+='<th bgcolor="'+th_bgcolor+'" align="'+td_align2+'"><font size="'+th_textsize+'" color="'+th_textcolor+'">'+kekka+'<\/font><\/th>\n<\/tr>\n';
mojis+='<\/table>\n<br clear="all"><a href="javascript:history.back();">'+button+'<\/a><\/font><\/div><\/body><\/html>';
delete kekka_nyuukinn;
delete kekka_sisyutu;
with(document)
{
open();
write(mojis);
close();
}
}
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Click!" onClick="syuukei3();">
</form>
・
・
・
</body></html>
[ 解説 ]
まず最初にデータの形式から説明していきます。
//データ1
data_name[0]="シャツ";
data_kazu[0]=10000;
で、一つのデータです。
データを増やす場合、減らす場合、上の2行を丸々増やすor減らす事になります。
サンプルにデータを一つ増やすとすると、
| 変 更 前 | 変 更 後 |
|---|
//データ1
data_name[0]="シャツ";
data_kazu[0]=-10000;
//データ2
data_name[1]="スーツ";
data_kazu[1]=-39999;
//データ3
data_name[2]="帽子";
data_kazu[2]=-4568;
//データ4
data_name[3]="雑収入";
data_kazu[3]=25789;
//データ5
data_name[4]="給料";
data_kazu[4]=234568;
//データ6
data_name[5]="ジャケット";
data_kazu[5]=-51248;
//データ7
data_name[6]="化粧品";
data_kazu[6]=-9870;
|
//データ1
data_name[0]="シャツ";
data_kazu[0]=-10000;
//データ2
data_name[1]="スーツ";
data_kazu[1]=-39999;
//データ3
data_name[2]="帽子";
data_kazu[2]=-4568;
//データ4
data_name[3]="雑収入";
data_kazu[3]=25789;
//データ5
data_name[4]="給料";
data_kazu[4]=234568;
//データ6
data_name[5]="ジャケット";
data_kazu[5]=-51248;
//データ7
data_name[6]="化粧品";
data_kazu[6]=-9870;
//データ8
data_name[7]="その他";
data_kazu[7]=10000;
|
このように、書式が同じで、赤字の数字部分が一つずつ大きくなっていきます。
このとき、ダブルクォーテーション（"）に注意して下さい。
「カバン」と書かれた場所にはついていますが、数字部分にはついていません。
数値データの場所には、つけないで下さい。
また、数値データを見て頂きますと「-」が付いている数値があります。
これはマイナスの金額を表しています。
ですから、出金データに関しましては、先頭に「-」を付けて下さい。
データを減らす場合は、反対に下から1行ずつ削除していきます。
| 変 更 前 | 変 更 後 |
|---|
//データ1
data_name[0]="シャツ";
data_kazu[0]=10000;
//データ2
data_name[1]="スーツ";
data_kazu[1]=39999;
//データ3
data_name[2]="帽子";
data_kazu[2]=4568;
//データ4
data_name[3]="カットソー";
data_kazu[3]=25789;
//データ5
data_name[4]="スカート";
data_kazu[4]=234568;
//データ6
data_name[5]="ジャケット";
data_kazu[5]=51248;
//データ7
data_name[6]="化粧品";
data_kazu[6]=9870;
|
//データ1
data_name[0]="シャツ";
data_kazu[0]=10000;
//データ2
data_name[1]="スーツ";
data_kazu[1]=39999;
//データ3
data_name[2]="帽子";
data_kazu[2]=4568;
//データ4
data_name[3]="カットソー";
data_kazu[3]=25789;
//データ5
data_name[4]="スカート";
data_kazu[4]=234568;
//データ6
data_name[5]="ジャケット";
data_kazu[5]=51248;
|
（補足）
このスクリプトをフレームで使用し、結果画面を別フレームに表示したい場合は、スクリプト内にある
with(document){open();
を
with(parent.フレーム名.document){open();
に直してください。
|
