「javascript/クエスト情報変換」の編集履歴（バックアップ）一覧はこちら

「javascript/クエスト情報変換」(2021/08/12 (木) 21:39:29) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

#js{{{{{
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
// クエストクリアまでは最大5回
var maxQ = 5;

document.addEventListener('DOMContentLoaded', function() {
	for(var num=1; num<=maxQ; num++){
		apQuest(num);
	}
});
function hyouji(){
	var text = '';
	
	// 色指定
	var color_design = document.forms['form0'].elements['design'].value;
	if(color_design == '1'){
		var color_b = '#e6e6fa';	// 強調色
		var color_h = '#f5fffa';	// 背景色
		var color_t = '#17184b';	// タイトル
	}
	else if(color_design == '2'){
		var color_b = '#bee0c2';	// 強調色
		var color_h = '#f5fffa';	// 背景色
		var color_t = '#004d25';	// タイトル
	}
	else if(color_design == '3'){
		var color_b = '#fddea5';	// 強調色
		var color_h = '#f5fffa';	// 背景色
		var color_t = '#d3381c';	// タイトル
	}
	// Q_head部分 ごり押し
	text += '|BGCOLOR(' + color_h + '):CENTER:40|BGCOLOR(' + color_h + '):CENTER:180|BGCOLOR(' + color_h + '):CENTER:180|BGCOLOR(' + color_h + '):CENTER:180|c\n';
	text += '|>|>|>|BGCOLOR(' + color_t + '):COLOR(white):' + document.forms['form1'].elements['T_name'].value + '|\n';
	text += '|AP' + document.forms['form1'].elements['T_ap'].value;
	text += '|>|' + document.forms['form1'].elements['T_pl'].value;
	text += '|推奨Lv.' + document.forms['form1'].elements['T_lv'].value + '|\n';
	text += '|~|絆P : ' + str2num(document.forms['form1'].elements['T_kz'].value);
	text += '|EXP : ' + str2num(document.forms['form1'].elements['T_xp'].value);
	text += '|QP : ' + str2num(document.forms['form1'].elements['T_qp'].value) + '|\n';
	text += '|~|>|>|報酬 : ' + document.forms['form1'].elements['T_housyu'].value + '|\n'
	// Q_num部分
	for(var i=1; i<=maxQ; i++){
		if(i==1){var check = "true";}
		else	{var check = document.forms['form1'].elements['c'+i].checked;}
		if(check){
			text += '|>|BGCOLOR(' + color_b + '):' + document.forms['form1'].elements['quest_num'].value + '-' + i + '|>|';
			text += 'BGCOLOR(' + color_b + '):' + document.forms['form1'].elements['quest_class'+i].value + '|\n';
			var numB = document.forms['form1'].elements['b'+i].value;
			for(var j=1; j<=numB; j++){
				text += '|' + j + '/' + numB + '|';
				for(var k=1; k<=3; k++){
					var enemy = '';
					var inputNum = String(i)+String(j)+String(k);
					if(document.forms['form1'].elements[inputNum+'name'].value != ""){
						enemy += document.forms['form1'].elements[inputNum+'name'].value + '&br()';
						enemy += 'Lv' + document.forms['form1'].elements[inputNum+'lv'].value;
						enemy += '(' + document.forms['form1'].elements[inputNum+'class'].value + ')';
						// カンマ区切り
						var hp = document.forms['form1'].elements[inputNum+'hp'].value;
						enemy += 'HP' + String(hp).replace(/(\d)(?=(\d{3})+$)/g , '$1,');
					}
					text += enemy + '|';
				}
				text += '\n';
			}
		}
		else{break;}
	}
	document.forms['form0'].elements['out'].value = text;
}
// クエスト1回分（#Q_1,2,3,4,5）を作成
function apQuest(num){
	// クエスト番号などの情報
	var head = '';
	head += '<tr><td colspan="2" style="background-color:#e6e6fa; text-align:center;">';
	if(num != 1){head += '<input type="checkbox" name="c' + num + '" onclick="questCheck(this.checked, this.value);" value="' + num + '">';}
	if(num == 1){head += '<input type="text" style="width:5em;" name="quest_num" value="">-';}
	head += num + ' Battle<select name="b' + num + '" style="width:3em;" onChange="battleCheck(this.name, this.value);">';
	head += '<option value="1">1</option><option value="2">2</option><option value="3" selected>3</option><option value="4">4</option><option value="5">5</option></select>回</td>';
	head += '<td colspan="2" style="background-color:#e6e6fa; text-align:center;">';
	head += 'クラス構成<input type="text" style="width:15em;" name="quest_class' + num + '" value=""></td></tr>';
	$('#Q_' + num).append($(head));
	
	// バトル情報
	var td = '<td style="background-color:#f5fffa; text-align:center;">';
	var maxB = 5;
	
	for(var nowB=1; nowB<=maxB; nowB++){
		var tr = $('<tr class="battle b' + nowB + '">');
		// Battle数
		tr.append($(td).html(nowB));
		// ひと枠
		var nakami = '';
		for(var i=1; i<=3; i++){
			// クラスだけ別処理
			var optionC = ['剣', '弓', '槍', '騎', '術', '殺', '狂', '裁', '讐', '？'];
			var selectC = '';
			selectC += '<select style="width:4em;" name="' + num + nowB + i + 'class">';
			for(var j=0; j<optionC.length; j++){
				selectC += '<option value="' + optionC[j] + '">' + optionC[j] + '</option>';
			}
			selectC += '</select>';
			// 表示
			nakami  = '<input type="text" style="width:12em;" name="' + num + nowB + i + 'name" value=""><br/>';
			nakami += 'Lv<input type="number" style="width:3em;" name="' + num + nowB + i + 'lv" value="">';
			nakami += '(' + selectC + ')';
			nakami += 'HP<input type="number" style="width:6em;" name="' + num + nowB + i + 'hp" value="">';
			tr.append($(td).html(nakami));
		}
		$('#Q_' + num).append(tr);
	}
	// 初期状態で非表示
	$('#Q_' + num + ' tr.b4').css('display', 'none');
	$('#Q_' + num + ' tr.b5').css('display', 'none');
	if(num != 1){$('#Q_' + num + ' tr.battle').css('display', 'none');}
}

// 数字を文字列(カンマ区切り)に変換
function str2num(str){
	return String(str).replace(/(\d)(?=(\d{3})+$)/g , '$1,');
}

// チェックされたらクエストを表示
function questCheck(ischecked, num){
	var value = document.forms['form1'].elements['b'+num].value;
	if(ischecked){battleCheck(num ,value);}
	else{battleCheck(num ,0);}
}
// バトル回数に合わせて表示
function battleCheck(num, value){
	// 数字部分だけ抽出
	var num = num.replace(/b/g, "");
	// チェックの有無を確認
	if(num == 1){var ischecked = "true";}
	else{var ischecked = document.forms['form1'].elements['c'+num].checked;}
	// チェックされていたら表示数を0行に
	if(!ischecked){value = 0;}
	// 表示数に合わせてCSSを変更
	for(var i=1; i<=5; i++){
		if(i > value){
			$('#Q_' + num + ' tr.b' + i).css('display', 'none');
		}
		else{
			$('#Q_' + num + ' tr.b' + i).css('display', 'table-row');
		}
	}
}
</script>
}}}}}
#html2{
<div>
<form name="form0" id="form0">
<textarea name="out" cols="150" rows="20">ここにwiki編集用の文字列が表示されます</textarea></br>
<select style="width:8em;" name="design">
	<option value="1" selected>シナリオ</option>
	<option value="2">フリー</option>
	<option value="3">幕間</option>
</select>
</form>
<form name="form1" id="form1">
<input type="button" value="作成" onclick="hyouji()">
<table cellspacing="1" border="0">
<tbody id="Q_head">
	<tr>
		<td colspan="4" style="background-color:#17184b; color:white; text-align:center;">
			クエスト名<input type="text" style="width:15em;" name="T_name" value="">
		</td>
	</tr>
	<tr>
		<td rowspan="3" style="background-color:#f5fffa; text-align:center; width:80px;">
			AP<input type="number" style="width:4em;" name="T_ap" value="">
		</td>
		<td colspan="2" style="background-color:#f5fffa; text-align:center;">
			地名<input type="text" style="width:10em;" name="T_pl" value="">
		</td>
		<td style="background-color:#f5fffa; text-align:center; width:300px;">
			推奨Lv.<input type="number" style="width:4em;" name="T_lv" value="">
		</td>
	</tr>
	<tr>
		<td style="background-color:#f5fffa; text-align:center; width:250px;">
			絆P : <input type="number" style="width:5em;" name="T_kz" value="">
		</td>
		<td style="background-color:#f5fffa; text-align:center; width:250px;">
			EXP : <input type="number" style="width:5em;" name="T_xp" value="">
		</td>
		<td style="background-color:#f5fffa; text-align:center; width:250px;">
			QP : <input type="number" style="width:5em;" name="T_qp" value="">
		</td>
	</tr>
	<tr>
		<td colspan="3" style="background-color:#f5fffa; text-align:center;">
			報酬 : <input type="text" style="width:15em;" name="T_housyu" value="">
		</td>
	</tr>
</tbody>
<tbody id="Q_1"></tbody>
<tbody id="Q_2"></tbody>
<tbody id="Q_3"></tbody>
<tbody id="Q_4"></tbody>
<tbody id="Q_5"></tbody>
<tbody id="Q_hoka"></tbody>
</table>
</form>
</div>
}

#js{{{{{
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
// クエストクリアまでは最大5回
var maxQ = 5;

document.addEventListener('DOMContentLoaded', function() {
	for(var num=1; num<=maxQ; num++){
		apQuest(num);
	}
});
function hyouji(){
	var text = '';
	
	// 色指定
	var color_design = document.forms['form0'].elements['design'].value;
	if(color_design == '1'){
		var color_b = '#e6e6fa';	// 強調色
		var color_h = '#f5fffa';	// 背景色
		var color_t = '#17184b';	// タイトル
	}
	else if(color_design == '2'){
		var color_b = '#bee0c2';	// 強調色
		var color_h = '#f5fffa';	// 背景色
		var color_t = '#004d25';	// タイトル
	}
	else if(color_design == '3'){
		var color_b = '#fddea5';	// 強調色
		var color_h = '#f5fffa';	// 背景色
		var color_t = '#d3381c';	// タイトル
	}
	// Q_head部分 ごり押し
	text += '|BGCOLOR(' + color_h + '):CENTER:40|BGCOLOR(' + color_h + '):CENTER:180|BGCOLOR(' + color_h + '):CENTER:180|BGCOLOR(' + color_h + '):CENTER:180|c\n';
	text += '|>|>|>|BGCOLOR(' + color_t + '):COLOR(white):' + document.forms['form1'].elements['T_name'].value + '|\n';
	text += '|AP' + document.forms['form1'].elements['T_ap'].value;
	text += '|>|' + document.forms['form1'].elements['T_pl'].value;
	text += '|推奨Lv.' + document.forms['form1'].elements['T_lv'].value + '|\n';
	text += '|~|絆P : ' + str2num(document.forms['form1'].elements['T_kz'].value);
	text += '|EXP : ' + str2num(document.forms['form1'].elements['T_xp'].value);
	text += '|QP : ' + str2num(document.forms['form1'].elements['T_qp'].value) + '|\n';
	text += '|~|>|>|報酬 : ' + document.forms['form1'].elements['T_housyu'].value + '|\n'
	// Q_num部分
	for(var i=1; i<=maxQ; i++){
		if(i==1){var check = "true";}
		else	{var check = document.forms['form1'].elements['c'+i].checked;}
		if(check){
			text += '|>|BGCOLOR(' + color_b + '):' + document.forms['form1'].elements['quest_num'].value + '-' + i + '|>|';
			text += 'BGCOLOR(' + color_b + '):' + document.forms['form1'].elements['quest_class'+i].value + '|\n';
			var numB = document.forms['form1'].elements['b'+i].value;
			for(var j=1; j<=numB; j++){
				text += '|' + j + '/' + numB + '|';
				for(var k=1; k<=3; k++){
					var enemy = '';
					var inputNum = String(i)+String(j)+String(k);
					if(document.forms['form1'].elements[inputNum+'name'].value != ""){
						enemy += document.forms['form1'].elements[inputNum+'name'].value + '&br()';
						enemy += 'Lv' + document.forms['form1'].elements[inputNum+'lv'].value;
						enemy += '(' + document.forms['form1'].elements[inputNum+'class'].value + ')';
						// カンマ区切り
						var hp = document.forms['form1'].elements[inputNum+'hp'].value;
						enemy += 'HP' + String(hp).replace(/(\d)(?=(\d{3})+$)/g , '$1,');
					}
					text += enemy + '|';
				}
				text += '\n';
			}
		}
		else{break;}
	}
	document.forms['form0'].elements['out'].value = text;
}
// クエスト1回分（#Q_1,2,3,4,5）を作成
function apQuest(num){
	// クエスト番号などの情報
	var head = '';
	head += '<tr><td colspan="2" style="background-color:#e6e6fa; text-align:center;">';
	if(num != 1){head += '<input type="checkbox" name="c' + num + '" onclick="questCheck(this.checked, this.value);" value="' + num + '">';}
	if(num == 1){head += '<input type="text" style="width:5em;" name="quest_num" value="">-';}
	head += num + ' Battle<select name="b' + num + '" style="width:3em;" onChange="battleCheck(this.name, this.value);">';
	head += '<option value="1">1</option><option value="2">2</option><option value="3" selected>3</option><option value="4">4</option><option value="5">5</option></select>回</td>';
	head += '<td colspan="2" style="background-color:#e6e6fa; text-align:center;">';
	head += 'クラス構成<input type="text" style="width:15em;" name="quest_class' + num + '" value=""></td></tr>';
	$('#Q_' + num).append($(head));
	
	// バトル情報
	var td = '<td style="background-color:#f5fffa; text-align:center;">';
	var maxB = 5;
	
	for(var nowB=1; nowB<=maxB; nowB++){
		var tr = $('<tr class="battle b' + nowB + '">');
		// Battle数
		tr.append($(td).html(nowB));
		// ひと枠
		var nakami = '';
		for(var i=1; i<=3; i++){
			// クラスだけ別処理
			var optionC = ['剣', '弓', '槍', '騎', '術', '殺', '狂', '盾','裁', '讐','月','分','降','騙','獣', '？'];
			var selectC = '';
			selectC += '<select style="width:4em;" name="' + num + nowB + i + 'class">';
			for(var j=0; j<optionC.length; j++){
				selectC += '<option value="' + optionC[j] + '">' + optionC[j] + '</option>';
			}
			selectC += '</select>';
			// 表示
			nakami  = '<input type="text" style="width:12em;" name="' + num + nowB + i + 'name" value=""><br/>';
			nakami += 'Lv<input type="number" style="width:3em;" name="' + num + nowB + i + 'lv" value="">';
			nakami += '(' + selectC + ')';
			nakami += 'HP<input type="number" style="width:6em;" name="' + num + nowB + i + 'hp" value="">';
			tr.append($(td).html(nakami));
		}
		$('#Q_' + num).append(tr);
	}
	// 初期状態で非表示
	$('#Q_' + num + ' tr.b4').css('display', 'none');
	$('#Q_' + num + ' tr.b5').css('display', 'none');
	if(num != 1){$('#Q_' + num + ' tr.battle').css('display', 'none');}
}

// 数字を文字列(カンマ区切り)に変換
function str2num(str){
	return String(str).replace(/(\d)(?=(\d{3})+$)/g , '$1,');
}

// チェックされたらクエストを表示
function questCheck(ischecked, num){
	var value = document.forms['form1'].elements['b'+num].value;
	if(ischecked){battleCheck(num ,value);}
	else{battleCheck(num ,0);}
}
// バトル回数に合わせて表示
function battleCheck(num, value){
	// 数字部分だけ抽出
	var num = num.replace(/b/g, "");
	// チェックの有無を確認
	if(num == 1){var ischecked = "true";}
	else{var ischecked = document.forms['form1'].elements['c'+num].checked;}
	// チェックされていたら表示数を0行に
	if(!ischecked){value = 0;}
	// 表示数に合わせてCSSを変更
	for(var i=1; i<=5; i++){
		if(i > value){
			$('#Q_' + num + ' tr.b' + i).css('display', 'none');
		}
		else{
			$('#Q_' + num + ' tr.b' + i).css('display', 'table-row');
		}
	}
}
</script>
}}}}}
#html2{
<div>
<form name="form0" id="form0">
<textarea name="out" cols="150" rows="20">ここにwiki編集用の文字列が表示されます</textarea></br>
<select style="width:8em;" name="design">
	<option value="1" selected>シナリオ</option>
	<option value="2">フリー</option>
	<option value="3">幕間</option>
</select>
</form>
<form name="form1" id="form1">
<input type="button" value="作成" onclick="hyouji()">
<table cellspacing="1" border="0">
<tbody id="Q_head">
	<tr>
		<td colspan="4" style="background-color:#17184b; color:white; text-align:center;">
			クエスト名<input type="text" style="width:15em;" name="T_name" value="">
		</td>
	</tr>
	<tr>
		<td rowspan="3" style="background-color:#f5fffa; text-align:center; width:80px;">
			AP<input type="number" style="width:4em;" name="T_ap" value="">
		</td>
		<td colspan="2" style="background-color:#f5fffa; text-align:center;">
			地名<input type="text" style="width:10em;" name="T_pl" value="">
		</td>
		<td style="background-color:#f5fffa; text-align:center; width:300px;">
			推奨Lv.<input type="number" style="width:4em;" name="T_lv" value="">
		</td>
	</tr>
	<tr>
		<td style="background-color:#f5fffa; text-align:center; width:250px;">
			絆P : <input type="number" style="width:5em;" name="T_kz" value="">
		</td>
		<td style="background-color:#f5fffa; text-align:center; width:250px;">
			EXP : <input type="number" style="width:5em;" name="T_xp" value="">
		</td>
		<td style="background-color:#f5fffa; text-align:center; width:250px;">
			QP : <input type="number" style="width:5em;" name="T_qp" value="">
		</td>
	</tr>
	<tr>
		<td colspan="3" style="background-color:#f5fffa; text-align:center;">
			報酬 : <input type="text" style="width:15em;" name="T_housyu" value="">
		</td>
	</tr>
</tbody>
<tbody id="Q_1"></tbody>
<tbody id="Q_2"></tbody>
<tbody id="Q_3"></tbody>
<tbody id="Q_4"></tbody>
<tbody id="Q_5"></tbody>
<tbody id="Q_hoka"></tbody>
</table>
</form>
</div>
}