SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [占い]

占い

機能

生年月日をフォームで入力し、その値を元に計算した結果を占い結果として表示するものです。簡単なJavaScriptのみで構成しているため、多くのブラウザで使用可能です。ただし、外部スクリプトを読み込む必要がありますので、このあたりを考慮すると最近のブラウザのみしか使えません。外部スクリプトにしなければ、ソースを簡単に見ることが出来、占いの面白さが半減してしまいます。

占いのスクリプトではありますが、占いそのものはご自分でお考え下さい。

利用方法

HEAD部分から外部スクリプト（uranai.js）を読み込みます。生年月日を入力するフォームを用意し、「占う」ボタンのリンク先を関数「main(this.form)」にします。この時、フォーム関連のName属性値は変更しない方が良いでしょう。変更する場合は、「getFormData(frm.y1)」などの部分も同時に変更する必要があります。

占い結果の種類: 関数「Uranai(Y,M,D)」内部で定義しています。「var typeMax = 5;」がそれにあたり、ここでは５種類になっています。
占いの計算: 関数「Uranai(Y,M,D)」内部で計算します。ここでは、いい加減な計算式を入れています。各自適宜変更して使って下さい。最終的には、「return()」で計算結果を返すようにして下さい。
占いの結果: 関数「Result(X)」で行っています。ここでは５種類の結果を用意しており、それぞれの表示先のURLを指定しています。 URLは絶対パスでも相対パスでも構いません。

対応ブラウザ

IE4,NN4以上

サンプル

［サンプルを見る］［ダウンロード］

[Go To Top]

ソース１ (HTMLファイル)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">

<head>

<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 language="JavaScript" src="uranai.js"></script>

<style type="text/css">
<!--
h1{
	font-size:			24pt;
	font-weight:		bold;
	color:				#900;
}
-->
</style>

</head>

<body>

<h1>貴方の生年月日で占い</h1>

<form name="uranai">
生年月日
<select name="y1">
	<option value="19">19</option>
	<option value="20">20</option>
</select>
<select name="y2">
	<option value="0">0</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
<select name="y3">
	<option value="0">0</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>年　
<select name="m1">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
</select>月　
<select name="d1">
	<option value="0">0</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>
<select name="d2">
	<option value="0">0</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>日<br><br>
<input type="button" onclick="main(this.form)" size="25" value="占う">
<input type="reset" size="25" value="クリア">
</form>

</body>
</html>

ソース２ (外部JavaScriptファイル=uranai.js)

var year,month,day;

function main(frm){	
	var Type;
	if( getDate(frm) ){
		Type = Uranai(year,month,day);
		Result(Type);
	}else{
		alert("生年月日の指定が間違っています");
	}
}

//生年月日の取得とチェック
function getDate(frm){
	var Y1,Y2,Y3,M1,D1,D2;
	var dayMax;
	var Flag;

	//フォームから年月日を取得
	Y1 = parseInt( getFormData(frm.y1) );
	Y2 = parseInt( getFormData(frm.y2) );
	Y3 = parseInt( getFormData(frm.y3) );
	M1 = parseInt( getFormData(frm.m1) );
	D1 = parseInt( getFormData(frm.d1) );
	D2 = parseInt( getFormData(frm.d2) );

	year = Y1*100 + Y2*10 + Y3;
	month = M1;
	day = D1 * 10 + D2;

	//年月日のチェック
	Flag = true;
	if(year < 1900 || year > 2099) Flag = false;
	if(month < 1 || month > 12) Flag = false;
	if(month == 2){
		if (year % 100 != 0 && year % 4 == 0 || year % 400){
			dayMax = 29;
		}else{
			dayMax = 28;
		}
	}else if(month == 4 || month == 6 || month == 9 || month == 11){
		dayMax = 30;
	}else{
		dayMax = 31;
	}
	if(day < 1 || day > dayMax) Flag = false;
	return(Flag);
}

//オプションから値を取得
function getFormData(Obj){
	var L = Obj.length - 1;
	for(i = 0; i <= L; i++){
		if(Obj.options[i].selected){
			return(Obj.options[i].value);
		}
	}
}

//占い計算
function Uranai(Y,M,D){		//Y=年,M=月,D=日
	var typeMax = 4;			//５種類の占い結果があると仮定(=5-1)

	//この下の式は占いに合わせて変更
	x1 = Math.floor(Math.log(Y) + M * Math.sin(Y) + D * Math.PI);
	x2 = x1 - typeMax * Math.floor( x1 / typeMax ) + 1;	//余りをとって種類の数に合わせる
	return(x2);
}

//占い結果の表示
function Result(X){
	//それぞれの結果ごとに表示するHTMLファイルを変える（ここでは５種類）
	switch(X){
		case 1:
			document.location = "sp48_1.html";
			break;
		case 2:
			document.location = "sp48_2.html";
			break;
		case 3:
			document.location = "sp48_3.html";
			break;
		case 4:
			document.location = "sp48_4.html";
			break;
		case 5:
			document.location = "sp48_5.html";
			break;
	}
}

[Go To Top]