WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)

■ JavaScript - サンプル集(257種類) - フォーム
   - データベースVer3(集計機能Ver3)

データベーススクリプト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();

に直してください。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.