ハイライトON、OFF 変更削除不可 TIME指定 JavaScript指定 スタイルシート指定 カスタマイズ箇所
リクエストをいただきました。電卓風のリンクメニューページです。ここでのサンプルは開くウィンドウにもスクリプトを組み込み、リモコン風にしてみました。リンク先のページは、数字.htm として下さい。
<HTML>
<HEAD>
<TITLE>電卓リンク</TITLE>
<SCRIPT language="JavaScript">
var max = "15"; // リンクするページの最大数に1プラスした数
var mes = "15までの数字を入力してください。"; // 最大値以上の数字を入力した際に表示するメッセージ
timesLink = "times.htm"; // Xをクリックした際にリンクするページのURL
minusLink = "minus.htm"; // -をクリックした際にリンクするページのURL
percentLink = "percent.htm"; // %をクリックした際にリンクするページのURL
plusLink = "plus.htm"; // +をクリックした際にリンクするページのURL
equalLink = "equal.htm"; // =をクリックした際にリンクするページのURL
frameName = "left";
//フレームの場合、もしくは新しいウィンドウを開きたい場合は
//そのフレーム名もしくはウィンドウ名を記入(同じウィンドウを飛ばす場合は未記入のまま)
function dentaku(){
if(f1.j1.value=="0"){
alert("0から始まる数字は無効です。");
document.f1.j1.value="";
}else if(f1.j1.value=="X"){
location.href = timesLink;
}else if(f1.j1.value=="-"){
location.href = minusLink;
}else if(f1.j1.value=="%"){
location.href = percentLink;
}else if(f1.j1.value=="+"){
location.href = plusLink;
}else if(f1.j1.value=="="){
location.href = equalLink;
}else if(eval(f1.j1.value) >= max){
alert(mes);
document.f1.j1.value="";
}else if(eval(f1.j1.value) >= max){
alert(mes);
document.f1.j1.value="";
} else {}
setTimeout('denJump()',2000);
}
function denJump(){
jumpURL = f1.j1.value + ".htm";
if(f1.j1.value==""){
}else if(frameName!=""){
window.open(jumpURL,frameName,'toolbar=1,titlebar=1,status=1,scrollbars=1,resizable=1,menubar=1,fullscreen=0');
}else{ location.href=jumpURL;
}
}
</SCRIPT>
<STYLE type="text/css">
TD{text-align:center;}
INPUT{text-align:center;background-color : #9a9b91;
width:20;height:20;color:white;font-weight:bold;}
.num{color:white;background-color:#666666;}
BODY{margin:0;overflow:hidden;}
</STYLE>
</HEAD>
<BODY onblur="setTimeout('focus()',2000)">
<form name="f1">
<CENTER>
<TABLE border="1" cellpadding="3" bgcolor="#666666">
<TR>
<TD>
<TABLE border="1" bgcolor="#cccccc">
<TR>
<TD colspan="5" style="text-align:right;"><INPUT
size="20" style="width:110;text-align:right;color:black;background-color:#a0b885;font-size:15;"
type="text" name="j1"></TD>
</TR>
<TR>
<TD colspan="5" style="text-align : right;"><INPUT
type="button" onclick="window.close()" style="background-color
: #ff8000;width:35;" value="OFF"></TD>
</TR>
<TR>
<TD><INPUT type="button" value="7" onclick="document.f1.j1.value=f1.j1.value+this.value,dentaku()" class="num"></TD>
<TD><INPUT type="button" value="8" onclick="document.f1.j1.value=f1.j1.value+this.value,dentaku()" class="num"></TD>
<TD><INPUT type="button" value="9" onclick="document.f1.j1.value=f1.j1.value+this.value,dentaku()" class="num"></TD>
<TD><INPUT type="button" value="X" onclick="document.f1.j1.value=this.value,dentaku()"></TD>
<TD><INPUT type="reset" value="C"></TD>
</TR>
<TR>
<TD><INPUT type="button" value="4" onclick="document.f1.j1.value=f1.j1.value+this.value,dentaku()" class="num"></TD>
<TD><INPUT type="button" value="5" onclick="document.f1.j1.value=f1.j1.value+this.value,dentaku()" class="num"></TD>
<TD><INPUT type="button" value="6" onclick="document.f1.j1.value=f1.j1.value+this.value,dentaku()" class="num"></TD>
<TD><INPUT type="button" value="-" onclick="document.f1.j1.value=this.value,dentaku()"></TD>
<TD><INPUT type="button" value="%" onclick="document.f1.j1.value=this.value,dentaku()"></TD>
</TR>
<TR>
<TD><INPUT type="button" value="1" onclick="document.f1.j1.value=f1.j1.value+this.value,dentaku()" class="num"></TD>
<TD><INPUT type="button" value="2" onclick="document.f1.j1.value=f1.j1.value+this.value,dentaku()" class="num"></TD>
<TD><INPUT type="button" value="3" onclick="document.f1.j1.value=f1.j1.value+this.value,dentaku()" class="num"></TD>
<TD rowspan="2"><INPUT type="button" value="+" style="height:45;" onclick="document.f1.j1.value=this.value,dentaku()"></TD>
<TD rowspan="2"><INPUT type="button" value="=" style="height:45;" onclick="document.f1.j1.value=this.value,dentaku()"></TD>
</TR>
<TR>
<TD colspan="2"><INPUT type="button" value="0"
style="width:45;height:20;" onclick="document.f1.j1.value=f1.j1.value+this.value,dentaku()"
class="num"></TD>
<TD><INPUT type="button" value="." class="num"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
</form>
</BODY>
</HTML>
|