2000年4月30日星期日
JSで文本框校验
功能：
①日文输入法切换无效。
②只能输入数字
③10位以内。
④输入的字符右对齐显示。
↓↓Source↓↓
<html>
<head><title></title>
<script language="JavaScript">
<!--
// 数値のみを入力可能にする
function numOnly() {
var ary = new Array(36);
ary[0] = 38; //↑
ary[1] = 40; //↓
ary[2] = 37; //←
ary[3] = 39; //→
ary[4] = 8; //back space
ary[5] = 46; //delete
ary[6] = 96; //数字：0
ary[7] = 97; //数字：1
ary[8] = 98; //数字：2
ary[9] = 99; //数字：3
ary[10] = 100; //数字：4
ary[11] = 101; //数字：5
ary[12] = 102; //数字：6
ary[13] = 103; //数字：7
ary[14] = 104; //数字：8
ary[15] = 105; //数字：9
ary[16] = 48; //TenKey : 0
ary[17] = 49; //TenKey : 1
ary[18] = 50; //TenKey : 2
ary[19] = 51; //TenKey : 3
ary[20] = 52; //TenKey : 4
ary[21] = 53; //TenKey : 5
ary[22] = 54; //TenKey : 6
ary[23] = 55; //TenKey : 7
ary[24] = 56; //TenKey : 8
ary[25] = 57; //TenKey : 9
ary[26] = 190; //TenKey : .
ary[27] = 110; //.
ary[28] = 192; //@
ary[29] = 27; //esc
ary[30] = 17; //ctrl
ary[31] = 16; //shift
ary[32] = 18; //alt
ary[33] = 13; //enter(TenKey)
ary[34] = 13; //enter
ary[35] = 9; //tab
var flg = false;
for(cnt=0;cnt<ary.length;cnt++){
var keyCode = ary[cnt];
if(event.keyCode == keyCode){
flg = true;
}
}
return flg;
}
//-->
</script>
<form action="">
<div>
<input type='text' id='ITEM10' name='ITEM10' size='8' maxlength='10' style='width:130px; text-align:right; ime-mode:disabled;' onkeyDown='return test()' value=''>
</div>
</form>
</body>
</html>
JSで日付の纏め
JavaScript による日付・時刻・時間の計算・演算のまとめ
JavaScript でいろいろな日付の計算関係をまとめてみました。
日付の単位について
基本的なことですが、一応まとめておきます。
1秒は1000ミリ秒
1分は60秒
1時間は60分よって
1時間=60分=3600秒=3600000ミリ秒
1日=24時間=1440分=86400秒=86400000ミリ秒
現在時刻の取得
まずは、最もよく使う処理です。
//今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "<br />\r\n");
getFullYear()は古いブラウザだと対応していない場合があります。古いブラウザにも対応させる場合はgetYear()を使うことになりますが、その場合ブラウザによって挙動が違う場合があるので注意が必要です。
getMonthの結果は1?12月を0?11で返してきます。そのため、上記の例では +1 をしています。
指定した日付のDate型オブジェクトを生成
指定した日付のDate型オブジェクトを生成します。
ここでも、月は 1?12月を0?11の数字で表すため、月の値を -1 しています。
//2007-8-17を表すオブジェクトを生成する var date = new Date(2007, 8 - 1, 17); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "<br />\r\n");
日付/時刻のパース
日付/時刻を表したある書式の文字列から、年、月、日、時、分、秒を取得します。
//文字列からミリ秒を取得
var time = Date.parse("2007/08/16 10:30:15");
//ミリ秒から日付を求める
var date = new Date();
date.setTime(time);
document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "<br />\r\n");
日付の妥当性チェック
指定された日付が有効な日付かどうかをチェックします。
フォームから入力された日付の値をチェックする際はよく使いますね。
JavaScriptではズバリそのものの関数がないのでcheckDate関数を作って見ました。
/**
* 日付の妥当性チェック
* year 年
* month 月
* day 日
*/
function checkDate(year, month, day) {
var dt = new Date(year, month - 1, day);
if(dt == null || dt.getFullYear() != year || dt.getMonth() + 1 != month || dt.getDate() != day) {
return false;
}
return true;
}
//flag1はfalseになります
var flag1 = checkDate(2007, 4, 31);
document.write("flag1=" + flag1 + "<br />\r\n");
//flag2はtrueになります
var flag2 = checkDate(2007, 1, 31);
document.write("flag2=" + flag2 + "<br />\r\n");
//flag3はtrueになります
var flag3 = checkDate(2000, 2, 29);
document.write("flag3=" + flag3 + "<br />\r\n");
うるう年（閏年）の判定
次の条件をチェックする関数を定義して使います。
西暦年が4で割り切れる年はうるう年
ただし、西暦年が100で割り切れる年は平年
ただし、西暦年が400で割り切れる年はうるう年
うるう年判定関数checkLeapyearを定義して使います。
//うるう年（閏年）の判定
function checkLeapyear(year) {
return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
}
//flag1はtrueになります
var flag1 = checkLeapyear(2000);
document.write("flag1=" + flag1 + "<br />\r\n");
//flag2はfalseになります
var flag2 = checkLeapyear(2007);
document.write("flag2=" + flag2 + "<br />\r\n");
n日後、n日前の日付を求める
今日から1週間後は何月何日？とか、10日前は何月何日？みたいな計算を行う場合に使います。
日付をミリ秒に変換して計算します。
//n日後、n日前の日付を求める
/**
* 年月日と加算日からn日後、n日前を求める関数
* year 年
* month 月
* day 日
* addDays 加算日。マイナス指定でn日前も設定可能
*/
function computeDate(year, month, day, addDays) {
var dt = new Date(year, month - 1, day);
var baseSec = dt.getTime();
var addSec = addDays * 86400000;//日数 * 1日のミリ秒数
var targetSec = baseSec + addSec;
dt.setTime(targetSec);
return dt;
}
//2007年8月10日の30日後の日付を取得
//2007-9-9が表示されます
var date = computeDate(2007, 8, 10, 30);
document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "<br />\r\n");
//2007年8月10日の2週間前の日付を取得
//2007-7-27が表示されます
var date = computeDate(2007, 8, 10, -14);
document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "<br />\r\n");
任意の年月の月末日を求める
任意年月の月末日を求めます。2月のうるう年判定のため月だけではなくて年の情報も必要です。
/**
* 年月を指定して月末日を求める関数
* year 年
* month 月
*/
function getMonthEndDay(year, month) {
//日付を0にすると前月の末日を指定したことになります
//指定月の翌月の0日を取得して末日を求めます
//そのため、ここでは month - 1 は行いません
var dt = new Date(year, month, 0);
return dt.getDate();
}
//2007年2月の月末日を求めます
//28が表示されます
var day = getMonthEndDay(2007, 2);
document.write("2007-2 = " + day + "<br />\r\n");
//2007年12月の月末日を求めます
//31が表示されます
var day = getMonthEndDay(2007, 12);
document.write("2007-12 = " + day + "<br />\r\n");
nヶ月後、nヶ月前の日付を求める
nヶ月後とは単純にn * 30日ではないことに注意してください。
例えば、1月10日の1ヶ月後は2月10日ですが、1月31日の1ヶ月後は2月28日（うるう年の場合2月29日）になるという考え方です。
/**
* 年月日と加算月からnヶ月後、nヶ月前の日付を求める
* year 年
* month 月
* day 日
* addMonths 加算月。マイナス指定でnヶ月前も設定可能
*/
function computeMonth(year, month, day, addMonths) {
month += addMonths;
var endDay = getMonthEndDay(year, month);//ここで、前述した月末日を求める関数を使用します
if(day > endDay) day = endDay;
var dt = new Date(year, month - 1, day);
return dt;
}
//2000年1月31日の1ヶ月後の日付
//2000-2-29が表示されます
var date = computeMonth(2000, 1, 31, 1);
document.write("2000-1-31 + 1 month = " + date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "<br />\r\n");
//2000年7月31日の2ヶ月後の日付
//2007-9-30が表示されます
var date = computeMonth(2007, 7, 31, 2);
document.write("2007-7-31 + 2 months = " + date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "<br />\r\n");
日付の比較を行う
日付の比較を行います。
//2007-8-10と2007-7-31を比較します
//処理Aが実行されます
var dt1 = new Date(2007, 8 - 1, 10);
var dt2 = new Date(2007, 7 - 1, 31);
if(dt1.getTime() > dt2.getTime()) {
//処理A
document.write("A<br />\r\n");
} else {
//処理B
document.write("B<br />\r\n");
}
日付の桁数が常に同じ場合は、ミリ秒値に変換しないで、文字列同士の比較をしても日付の比較は行えます。
2つの日付の差（何日間あるか）を求める
2つの日付の差を求めます。n年n月n日まで、あとn日。みたいな感じでカウントダウンなんかにも使えます。
/**
* 2つの日付の差を求める関数
* year1 1つのめ日付の年
* month1 1つめの日付の月
* day1 1つめの日付の日
* year2 2つのめ日付の年
* month2 2つめの日付の月
* day2 2つめの日付の日
*/
function compareDate(year1, month1, day1, year2, month2, day2) {
var dt1 = new Date(year1, month1 - 1, day1);
var dt2 = new Date(year2, month2 - 1, day2);
var diff = dt1 - dt2;
var diffDay = diff / 86400000;//1日は86400000ミリ秒
return diffDay;
}
//2007年8月9日と2007年7月9日の差を求める
//31が表示されます
var days = compareDate(2007, 8, 9, 2007, 7, 9);
document.write("2007-8-9 - 2007-7-9 = " + days + "days<br />\r\n");
//2007年1月10日と2006年10月10日の差を求める
//92が表示されます
var days = compareDate(2007, 1, 10, 2006, 10, 10);
document.write("2007-1-10 - 2006-10-10 = " + days + " days<br />\r\n");
任意の日付の曜日を取得
任意の日付の曜日を取得します。日本語の曜日名を取得するのに、配列を使っています。
//2007年8月10日の曜日を表示
//金曜日が表示されます
var week = new Array("日", "月", "火", "水", "木", "金", "土");
var dt = new Date(2007, 8 - 1, 10);
var dayOfWeek = week[dt.getDay()];
document.write("曜日=" + dayOfWeek + "<br />\r\n");
任意の年月の第n曜日の日付を求める
指定した年月の第n曜日の日付を求めます。
よくある、定休日は毎月第1月曜日と第3月曜日です。みたいな時の実際の日付を求めるのに使えます。
/**
* 任意の年月の第n曜日の日付を求める関数
* year 年
* month 月
* number 何番目の曜日か、第1曜日なら1。第3曜日なら3
* dayOfWeek 求めたい曜日。0-6までの数字で曜日の日?土を指定する
*/
function getWhatDayOfWeek(year, month, number, dayOfWeek) {
var firstDt = new Date(year, month - 1, 1);
var firstDayOfWeek = firstDt.getDay();//指定した年月の1日の曜日を取得
var day = dayOfWeek - firstDayOfWeek + 1;
if(day <= 0) day += 7;//1週間を足す
var dt = new Date(year, month - 1, day);
var msTime = dt.getTime();
msTime += (86400000 * 7 * (number - 1));//n曜日まで1週間を足し込み
dt.setTime(msTime);
return dt;
}
//2007-8 第4月曜日を求める
//2007-8-27が表示されます
var date = getWhatDayOfWeek(2007, 8, 4, 1);
document.write("2007-8 第4月曜日 = " + date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "<br />\r\n");
//2007-8 第3水曜日を求める
//2007-8-15が表示されます
var date = getWhatDayOfWeek(2007, 8, 3, 3);
document.write("2007-8 第3水曜日 = " + date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "<br />\r\n");
以上、とりあえず、日付・時刻関連の計算のまとめでした。 上記のサンプルコードは自由に使っていただいてOKです。 ただ、エラー処理や例外処理等は考慮されていませんので、使うときは適宜調整するといいかもしれないです。
-- 2008-11-24追記 -------- 「任意の年月の第n曜日の日付を求める」に特定の日付の時に前月の日付を表示してしまうというバグがありました。 具体的には2008年12月第1日曜日を取得すると2008年11月30日が表示される等です。 現在バグは修正してあります。また、併せて一部ソースコードの簡略化を行いました。
-- 2009-05-24追記 -------- Dateオブジェクトを用いている関数を西暦0?99年の範囲で使用した場合に+1900年されて正常に動作しない場合があるとの指摘をうけました。これは、Dateオブジェクトのコンストラクタを利用して年を設定した場合、西暦99年以前は+1900年されてしまうというJavascriptの仕様のためです。 ですので、西暦0?99年の範囲で関数を使用したい場合は、setFullYearメソッドを使って年を適宜設定し直してもらえればと思います。 例えば、妥当性チェックの関数は
function checkDate(year, month, day) {
var dt = new Date(year, month - 1, day);
if(dt.getFullYear() != year)
dt.setFullYear(year);//ここで設定し直している
if(dt == null || dt.getFullYear() != year || dt.getMonth() + 1 != month || dt.getDate() != day) {
return false;
}
return true;
}
というような感じに書き換えることによって対応できます。 ※コメント欄も併せて参照してみてください。
JS Array.contains
//Arrayの関数
Array.prototype.contains = function(obj){
var i = this.length;
while (i--) {
if (this[i] === obj){
return true;
}
}
return false;
}
//チェック
function checkTest(){
var ary = new Array();
var col1 = "abc";
if(ary.contains(col1)){
alert("［番号］重複しています。");
}else{
ary.push(col1);
}
}
JSで頁先頭に遷移
function backToTop()
{
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if(document.documentElement)
{
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if(document.body)
{
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2,x3));
var y = Math.max(y1, Math.max(y2,y3));
window.scrollTo(Math.floor(x/2), Math.floor(y/2));
if(x > 0 || y > 0)
{
window.setTimeout("backToTop()",25);
}
}
JSで日付の判定
// 日付チェック [YYYYMMDD] OR [YYYY/MM/DD]
function isDate(obj)
{
//未入力の場合はチェックなし
if(isNull(obj))
{
return true;
}
var flag = true;
var years;
var months;
var days;
//8桁と10桁のみチェック
if(obj.length == 8)
{
years = obj.substring(0,4);
months = obj.substring(4,6);
days = obj.substring(6,8);
}
else if(obj.length == 10)
{
years = obj.substring(0,4);
months = obj.substring(5,7);
days = obj.substring(8,10);
}
else
{
return false;
}
years = Number(years);
months = Number(months) - 1;
days = Number(days);
//年の値が小さすぎます
if (years < 1900)
{
flag = false;
}
var dates = new Date(years,months,days);
if (dates.getYear() < 1900)
{
if (years != dates.getYear() + 1900)
{
flag = false;
}
}
else
{
if (years != dates.getYear())
{
flag = false;
}
}
if (months != dates.getMonth())
{
flag = false;
}
if (days != dates.getDate())
{
flag = false;
}
return flag;
}
JS显示网页所有图片
在网页的地址栏里输入以下命令便可以显示该网页内的所有图片
javascript:Ai7Mg6P='';for%20(i7M1bQz=0;i7M1bQz<document.images.length;i7M1bQz++){Ai7Mg6P+='<img%20src='+document.images[i7M1bQz].src+'><br>'};if(Ai7Mg6P!=''){document.write('<center>'+Ai7Mg6P+'</center>');void(document.close())}else{alert('No%20images!')}
2000年4月29日星期六
JSで动态生成表格
<html>
<head>
<title>JavaScriptで動態Tableを生成</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8;">
<meta http-equiv="cache-control" content="non-cache">
<style type="text/css">
<!--
#DIVSCROLL{position:relative;height:542px;width:1157;overflow:auto;overflow-x:hidden;}
table{border-collapse:collapse;}
td{font-size:12px;}
.t_td{border:solid #999999 1px; background-color:#DCDCDC;}
-->
</style>
<script type="text/javascript">
var iC=1;
function getOption(){
return "<option value='' selected>選択...</option><option value='1'>1</option><option value='2'>2</option>";
}
//追加ボタン
function BtnAddList(){
trNode=document.createElement("tr");
td01Node=document.createElement("td");
td02Node=document.createElement("td");
td03Node=document.createElement("td");
td04Node=document.createElement("td");
td05Node=document.createElement("td");
td06Node=document.createElement("td");
td01Node.style.border="solid #999999 1px";
td02Node.style.border="solid #999999 1px";
td03Node.style.border="solid #999999 1px";
td04Node.style.border="solid #999999 1px";
td05Node.style.border="solid #999999 1px";
td06Node.style.border="solid #999999 1px";
td06Node.style.textAlign="center";
td01Node.innerHTML="<select name='sel1"+iC+"' style='width:60px;'>"+getOption("")+"</select>";
td02Node.innerHTML="<input type='text' name='txt2"+iC+"' style='width:70px;ime-mode:disabled; maxlength='5' value=''>";
td03Node.innerHTML="<select name='sel3"+iC+"' style='width:90px;'>"+getOption("")+"</select>";
td04Node.innerHTML="<input type='text' name='txt4"+iC+"' style='width:75px;ime-mode:disabled;maxlength='5' value=''>";
td05Node.innerHTML="<input type='text' name='txt5"+iC+"' style='width:150px;maxlength='10' value=''>";
td06Node.innerHTML="<input type='checkbox' name='chk6"+iC+"' style='width:27px;' id='chk6"+iC+"'>";
trNode.appendChild(td01Node);
trNode.appendChild(td02Node);
trNode.appendChild(td03Node);
trNode.appendChild(td04Node);
trNode.appendChild(td05Node);
trNode.appendChild(td06Node);
var element=document.getElementById("tblList");
element.appendChild(trNode);
document.getElementById("sel1"+iC).focus();
iC++;
}
</script>
</head>
<body>
<input type="button" name="insertBtn" value="追加" onclick="BtnAddList();"><br><br>
<!--タイトル -->
<TABLE style="table-layout:fixed; border-collapse:collapse;" frame="box">
<THEAD>
<TR>
<TD class="t_td" style="width:62px;"> 確認</TD>
<TD class="t_td" style="width:73px;">履歴</TD>
<TD class="t_td" style="width:93px;">顧客ｺｰﾄﾞ</TD>
<TD class="t_td" style="width:78px;">検収日</TD>
<TD class="t_td" style="width:153px;">件名</TD>
<TD class="t_td" style="width:30px;" align="center">削除</TD>
</TR>
</THEAD>
</TABLE>
<!-- 本体 -->
<DIV id="DIVSCROLL"><TABLE frame="box" ><TBODY id="tblList"></TBODY></TABLE></DIV>
</body>
</html>
JSで文字列バイト数
// S-JISに変換した時の文字列のバイト数を求める（大文字は２バイト、小文字は１バイト）
function getByteCount(str)
{
var len = str.length;
var i,cd,blen=0;
for( i = 0; i < len; i++ )
{
blen += 2;
cd = str.charCodeAt(i);
if ( 0x20 <= cd && cd <= 0x7e )
{
blen--;
}
if ( 0xff61 <= cd && cd <= 0xff9f )
{
blen--;
}
}
return blen;
}
JSで错误信息显示
<head>
<title>JSでErrMsg表示</title>
<script type="text/javascript">
function test(){
var id = document.getElementById("userId").value;
if(id==""){
document.getElementById("errMsg").innerHTML = "ユーザIDをを入力して下さい。";
}else{
alert("ユーザIDは 「" + id +"」 です。");
}
}
</script>
</head>
<body>
<span id="errMsg" style="color:red;font-weight:bold;"></span>
<br><br>
ユーザID：<input type="text" name="userId" value="">
<input type="button" name="doClickBtn" value="Go" onclick="test()">
</body>
</html>
2000年4月28日星期五
JS文本框有无效状态设定
function test(){
var eles = main_form.document.getElementsByTagName('input');
for (ia = 0; ia < eles.length; ia++) {
if(eles[ia].className == "branch" && eles[ia].type == "text"){
eles[ia].disabled = true;//無効
}else{
eles[ia].disabled = false;//有効
}
}
}
var eles = main_form.document.getElementsByTagName('input');
for (ia = 0; ia < eles.length; ia++) {
if(eles[ia].className == "branch" && eles[ia].type == "text"){
eles[ia].disabled = true;//無効
}else{
eles[ia].disabled = false;//有効
}
}
}
2000年4月27日星期四
树状菜单
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:active {text-decoration:none;}
a:hover {text-decoration:none;}
</STYLE>
<SCRIPT language="JavaScript">
<!--
// ツリーメニュー
flag = false;
function treeMenu(tName) {
tMenu = document.all[tName].style;
if(tMenu.display == 'none') tMenu.display = "block";
else tMenu.display = "none";
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="javaScript:treeMenu('treeMenu1')">■ Yahoo! Japan1</a><br>
<DIV id="treeMenu1" style="display:none">
┣ <A href="http://www.yahoo.co.jp/">Yahoo!</A><BR>
┣ <A href="http://bb.yahoo.co.jp/">Yahoo! BB</A><BR>
┣ <A href="http://shopping.yahoo.co.jp/">Yahoo! Shopping</A><BR>
┗ <A href="http://auctions.yahoo.co.jp/">Yahoo! Auctions</A><BR>
</DIV>
<A href="javaScript:treeMenu('treeMenu2')">■ Yahoo! Japan2</a><br>
<DIV id="treeMenu2" style="display:none">
┣ <A href="http://www.yahoo.co.jp/">Yahoo!</A><BR>
┣ <A href="http://bb.yahoo.co.jp/">Yahoo! BB</A><BR>
┣ <A href="http://shopping.yahoo.co.jp/">Yahoo! Shopping</A><BR>
┗ <A href="http://auctions.yahoo.co.jp/">Yahoo! Auctions</A><BR>
</DIV>
<BR><BR><BR><BR>
</BODY>
</HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:active {text-decoration:none;}
a:hover {text-decoration:none;}
</STYLE>
<SCRIPT language="JavaScript">
<!--
// ツリーメニュー
flag = false;
function treeMenu(tName) {
tMenu = document.all[tName].style;
if(tMenu.display == 'none') tMenu.display = "block";
else tMenu.display = "none";
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="javaScript:treeMenu('treeMenu1')">■ Yahoo! Japan1</a><br>
<DIV id="treeMenu1" style="display:none">
┣ <A href="http://www.yahoo.co.jp/">Yahoo!</A><BR>
┣ <A href="http://bb.yahoo.co.jp/">Yahoo! BB</A><BR>
┣ <A href="http://shopping.yahoo.co.jp/">Yahoo! Shopping</A><BR>
┗ <A href="http://auctions.yahoo.co.jp/">Yahoo! Auctions</A><BR>
</DIV>
<A href="javaScript:treeMenu('treeMenu2')">■ Yahoo! Japan2</a><br>
<DIV id="treeMenu2" style="display:none">
┣ <A href="http://www.yahoo.co.jp/">Yahoo!</A><BR>
┣ <A href="http://bb.yahoo.co.jp/">Yahoo! BB</A><BR>
┣ <A href="http://shopping.yahoo.co.jp/">Yahoo! Shopping</A><BR>
┗ <A href="http://auctions.yahoo.co.jp/">Yahoo! Auctions</A><BR>
</DIV>
<BR><BR><BR><BR>
</BODY>
</HTML>
2000年4月22日星期六
CSSでScrollTableを作る
<head><title></title></head>
<body>
<!--本体部分-->
<DIV>
<SPAN id="fixedcols" style="overflow:hidden;overflow-x:scroll;width:100px;height:140px;
scrollbar-base-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
crollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF"
>
<TABLE border="1" style="width:100%">
<tr>
<td width="50%">F</TD>
<TD width="50%">G</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
</tr>
<tr>
<td>P</td>
<td>Q</td>
</tr>
<tr>
<td>U</td>
<td>V</td>
</tr>
<tr>
<td>Z</td>
<td>AA</td>
</tr>
<tr>
<td>EE</td>
<td>FF</td>
</tr>
<tr>
<td>JJ</td>
<td>KK</td>
</tr>
<tr>
<td>OO</td>
<td>PP</td>
</tr>
</TABLE>
</SPAN>
<SPAN id="maincols" style="overflow:scroll;width:300px;height:140px" onscroll="fnc_scroll()">
<TABLE border="1" style="table-layout:fixed;width:450px">
<tr>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
<tr>
<td>W</td>
<td>X</td>
<td>Y</td>
</tr>
<tr>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>GG</td>
<td>HH</td>
<td>II</td>
</tr>
<tr>
<td>LL</td>
<td>MM</td>
<td>NN</td>
</tr>
<tr>
<td>QQ</td>
<td>RR</td>
<td>SS</td>
</tr>
</TABLE>
</SPAN>
</DIV>
<SCRIPT language="javascript">
<!--
function fnc_scroll(){
document.all.item('fixedcols').scrollTop=document.all.item('maincols').scrollTop;
}
-->
</SCRIPT>
</body>
</html>
Flash素材
2000年4月21日星期五
HTMLでScrollTableを作る
<head>
<title>Scroll Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="non-cache">
<style type="text/css">
<!--
.t
{
table-layout :fixed;
border-collapse :collapse;
background-color :#007700;
}
.table_title
{
font-size :12;
border-width :1px;
border-style :solid;
color :#FFFFFF;
border-color :#AAAAAA;
text-align :center;
}
.style_1
{
font-size :12;
text-align :center;
border-width :1px;
border-style :solid;
border-color :#007700;
background-color :#FFFFFF;
}
.style_2
{
font-size :12;
border-width :1px;
border-style :solid;
border-color :#007700;
text-align :center;
background-color :#FFFFBB;
}
.style_3
{
font-size :12;
border-width :1px;
border-style :solid;
border-color :#007700;
background-color :#FFFFFF;
}
.style_4
{
background-color :#007700;
color :#FFFFFF;
}
.style_5
{
width :368;
height :109;
overflow :auto;
scrollbar-face-color :#007700;
scrollbar-arrow-color:#FFFFFF;
}
-->
</style>
<script type="text/javascript">
function Load() {
// 情報のスクロール位置設定
document.getElementById("scroll").scrollTop = document.getElementById("S_I").value;
}
/*
* 詳細ボタン押下時処理
*/
function OnClick(index) {
// 詳細ボタンのIndex
alert(index);
// 情報検索一覧のスクロール位置を格納
document.getElementById("S_I").value = document.getElementById("scroll").scrollTop;
}
</script>
</head>
<body bgcolor="#EEFFF0" onload="Load()">
<form name="main_form" id="main_form" method="post">
<table style="width:390px">
<tr>
<td>
<!-- ヘッダ部分 -->
<table class="t">
<tr>
<td class="table_title" style='width:60;height:20;'>詳細</td>
<td class="table_title" style='width:60;'>年度</td>
<td class="table_title" style='width:60;'>会計年度</td>
<td class="table_title" style='width:80;'>部門コード</td>
<td class="table_title" style='width:90;'>部門名</td>
</tr>
</table>
<!-- データ部分 -->
<DIV ID="scroll" class="style_5" >
<table style="table-layout: fixed; border-collapse:collapse;">
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('1')" id="detail1">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0001</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('2')" id="detail2">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0002</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('3')" id="detail3">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0003</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('4')" id="detail4">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0004</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('5')" id="detail5">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0005</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('6')" id="detail6">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0006</td>
</tr>
</table>
</DIV>
</td>
</tr>
</table>
<!-- 情報検索一覧スクロール位置 -->
<input type="hidden" name="S_I" id="S_I" value="28">
</form>
</body>
</html>
2000年4月20日星期四
Key DownのKeyCode
| Macintosh | Windows | ||||||
| キー | NN4 | IE4 | IE5 | NN6 | NN4 | NN6 | IE4,5 |
| powerKey(mac) | -- | -- | -- | -- | -- | -- | -- |
| tab | (9) | -- | 9 | 9 | -- | 9 | 9 |
| caps lock | -- | -- | -- | -- | -- | 240 | 240 |
| shift | -- | -- | 16 | -- | 0 | 16 | 16 |
| ctrl | -- | -- | 17 | -- | 0 | 17 | 17 |
| option(mac) | -- | -- | 18 | -- | -- | -- | -- |
| alt | -- | -- | -- | -- | -- | 18 | 18 |
| return | 13 | -- | 13 | 13 | 13 | 13 | 13 |
| enter(TenKey) | 3 | -- | 13 | 13 | 13 | 13 | 13 |
| insert | -- | -- | -- | -- | 0 | 45 | 45 |
| del | 127 | -- | 46 | 46 | 0 | 46 | 46 |
| back space | 8 | -- | 8 | 8 | 8 | (8) | (8) |
| esc | 27 | -- | 27 | 27 | -- | 27 | 27 |
| clear(mac),Num Lock | 27 | -- | 12 | 12 | -- | 144 | 144 |
| help | 5 | -- | 45 | 45 | -- | -- | -- |
| home | 1 | -- | -- | 36 | 0 | 36 | 36 |
| page up | 11 | -- | -- | 33 | 0 | 33 | 33 |
| page down | 12 | -- | -- | 34 | 0 | 34 | 34 |
| end | 4 | -- | -- | 35 | 0 | 35 | 35 |
| F1 | -- | -- | 112 | 112 | -- | 112 | 112 |
| F2 | -- | -- | 113 | 113 | -- | 113 | 113 |
| F3 | -- | -- | 114 | 114 | -- | 114 | 114 |
| F4 | -- | -- | 115 | 115 | 0 | 115 | 115 |
| F5 | 16 | -- | 116 | 116 | 0 | 116 | 116 |
| F6 | 16 | -- | 117 | 117 | -- | 117 | 117 |
| F7 | 16 | -- | 118 | 118 | 0 | 118 | 118 |
| F8 | 16 | -- | 119 | 119 | 0 | 119 | 119 |
| F9 | 16 | -- | 120 | 120 | 0 | 120 | 120 |
| F10 | 16 | -- | 121 | 121 | -- | 121 | 121 |
| F11 | 16 | -- | 122 | 122 | 0 | 122 | 122 |
| F12 | 16 | -- | 123 | 123 | 0 | -- | 123 |
| PrintScreen (F13) | 16 | -- | 124 | 44 | -- | -- | -- |
| Scroll Lock (F14) | 16 | -- | 125 | 145 | 0 | 145 | 145 |
| Pause (F15) | 16 | -- | 126 | 19 | 0 | 19 | 19 |
| 半角／全角 | -- | -- | -- | -- | -- | 229 | 243←→244 |
| 窓キー | -- | -- | -- | -- | -- | 91 | 91 |
| メニューキー | -- | -- | -- | -- | -- | 93 | 93 |
| 無変換 | -- | -- | -- | -- | -- | 229 | 29 |
| 前候補 | -- | -- | -- | -- | -- | 229 | 229 |
| カタカナ／ひらがな | -- | -- | -- | -- | -- | 229 | 242 |
| ctrl+A | 1 | -- | 17 | 65 | -- | 65 | 65 |
| ctrl+B | 2 | -- | 17 | 66 | -- | 66 | 66 |
| ctrl+C | 3 | -- | 17 | 67 | -- | 67 | 67 |
| ctrl+D | 4 | -- | 17 | 68 | -- | 68 | 68 |
| ctrl+E | 5 | -- | 17 | 69 | 5 | 69 | 69 |
| ctrl+F | 6 | -- | 17 | 70 | -- | 70 | 70 |
| ctrl+G | 7 | -- | 17 | 71 | -- | 71 | 71 |
| ctrl+H | 8 | -- | 17 | 72 | -- | 72 | 72 |
| ctrl+I | 9 | -- | 17 | 73 | -- | 73 | 73 |
| ctrl+J | 10 | -- | 17 | 74 | 10 | 74 | 74 |
| ctrl+K | 11 | -- | 17 | 75 | 11 | 75 | 75 |
| ctrl+L | 12 | -- | 17 | 76 | 12 | 76 | 76 |
| ctrl+M | 13 | -- | 17 | 77 | -- | 77 | 77 |
| ctrl+N | 14 | -- | 17 | 78 | -- | 78 | 78 |
| ctrl+O | 15 | -- | 17 | 79 | -- | 79 | 79 |
| ctrl+P | 16 | -- | 17 | 80 | -- | 80 | 80 |
| ctrl+Q | 17 | -- | 17 | 81 | -- | 81 | 81 |
| ctrl+R | 18 | -- | 17 | 82 | -- | 82 | 82 |
| ctrl+S | 19 | -- | 17 | 83 | -- | 83 | 83 |
| ctrl+T | 20 | -- | 17 | 84 | 20 | 84 | 84 |
| ctrl+U | 21 | -- | 17 | 85 | -- | 85 | 85 |
| ctrl+V | 22 | -- | 17 | 86 | -- | 86 | 86 |
| ctrl+W | 23 | -- | 17 | 87 | -- | 87 | 87 |
| ctrl+X | 24 | -- | 17 | 88 | -- | 88 | 88 |
| ctrl+Y | 25 | -- | 17 | 89 | 25 | 89 | 89 |
| ctrl+Z | 26 | -- | 17 | 90 | -- | 90 | 90 |
| ← | 28 | -- | 37 | 37 | 0 | 37 | 37 |
| → | 29 | -- | 39 | 39 | 0 | 39 | 39 |
| ↑ | 30 | -- | 38 | 38 | 0 | 38 | 38 |
| ↓ | 31 | -- | 40 | 40 | 0 | 40 | 40 |
| space | 32 | -- | 32 | 32 | 32 | 32 | 32 |
| ! | 33 | -- | 16 | 0 | 33 | 49 | 49 |
| " | 34 | -- | 16 | 222 | 34 | 50 | 50 |
| # | 35 | -- | 16 | 0 | 35 | 51 | 51 |
| $ | 36 | -- | 16 | 0 | 36 | 52 | 52 |
| % | 37 | -- | 16 | 0 | 37 | 53 | 53 |
| & | 38 | -- | 16 | 0 | 38 | 54 | 54 |
| (quote) | 39 | -- | 16 | 222 | 39 | 55 | 55 |
| ( | 40 | -- | 16 | 0 | 40 | 56 | 56 |
| ) | 41 | -- | 16 | 0 | 41 | 57 | 57 |
| * | 42 | -- | 16 | 0 | 42 | 59 | 186 |
| + | 43 | -- | 16 | 0 | 43 | 61 | 187 |
| , | 44 | -- | 188 | 188 | 44 | 188 | 188 |
| - | 45 | -- | 189 | 0 | 45 | 189 | 189 |
| . | 46 | -- | 190 | 190 | 46 | 190 | 190 |
| / | 47 | -- | 191 | 191 | 47 | 191 | 191 |
| 0 | 48 | -- | 48 | 48 | 48 | 48 | 48 |
| 1 | 49 | -- | 49 | 49 | 49 | 49 | 49 |
| 2 | 50 | -- | 50 | 50 | 50 | 50 | 50 |
| 3 | 51 | -- | 51 | 51 | 51 | 51 | 51 |
| 4 | 52 | -- | 52 | 52 | 52 | 52 | 52 |
| 5 | 53 | -- | 53 | 53 | 53 | 53 | 53 |
| 6 | 54 | -- | 54 | 54 | 54 | 54 | 54 |
| 7 | 55 | -- | 55 | 55 | 55 | 55 | 55 |
| 8 | 56 | -- | 56 | 56 | 56 | 56 | 56 |
| 9 | 57 | -- | 57 | 57 | 57 | 57 | 57 |
| : | 58 | -- | 16 | 0 | 58 | 59 | 186 |
| ; | 59 | -- | 186 | 59 | 59 | 61 | 187 |
| < | 60 | -- | 16 | 0 | 60 | 188 | 188 |
| = | 61 | -- | 187 | 61 | 61 | 109 | 189 |
| > | 62 | -- | 16 | 0 | 62 | 190 | 190 |
| ? | 63 | -- | 16 | 0 | 63 | 191 | 191 |
| @ | 64 | -- | 16 | 0 | 64 | 192 | 192 |
| A | 65 | -- | 65 | 65 | 65 | 65 | 65 |
| B | 66 | -- | 66 | 66 | 66 | 66 | 66 |
| C | 67 | -- | 67 | 67 | 67 | 67 | 67 |
| D | 68 | -- | 68 | 68 | 68 | 68 | 68 |
| E | 69 | -- | 69 | 69 | 69 | 69 | 69 |
| F | 70 | -- | 70 | 70 | 70 | 70 | 70 |
| G | 71 | -- | 71 | 71 | 71 | 71 | 71 |
| H | 72 | -- | 72 | 72 | 72 | 72 | 72 |
| I | 73 | -- | 73 | 73 | 73 | 73 | 73 |
| J | 74 | -- | 74 | 74 | 74 | 74 | 74 |
| K | 75 | -- | 75 | 75 | 75 | 75 | 75 |
| L | 76 | -- | 76 | 76 | 76 | 76 | 76 |
| M | 77 | -- | 77 | 77 | 77 | 77 | 77 |
| N | 78 | -- | 78 | 78 | 78 | 78 | 78 |
| O | 79 | -- | 79 | 79 | 79 | 79 | 79 |
| P | 80 | -- | 80 | 80 | 80 | 80 | 80 |
| Q | 81 | -- | 81 | 81 | 81 | 81 | 81 |
| R | 82 | -- | 82 | 82 | 82 | 82 | 82 |
| S | 83 | -- | 83 | 83 | 83 | 83 | 83 |
| T | 84 | -- | 84 | 84 | 84 | 84 | 84 |
| U | 85 | -- | 85 | 85 | 85 | 85 | 85 |
| V | 86 | -- | 86 | 86 | 86 | 86 | 86 |
| W | 87 | -- | 87 | 87 | 87 | 87 | 87 |
| X | 88 | -- | 88 | 88 | 88 | 88 | 88 |
| Y | 89 | -- | 89 | 89 | 89 | 89 | 89 |
| Z | 90 | -- | 90 | 90 | 90 | 90 | 90 |
| [ | 91 | -- | 219 | 219 | 91 | 219 | 219 |
| \ | 92 | -- | 220 | 220 | 92 | 226 | 220 |
| ] | 93 | -- | 221 | 221 | 93 | 221 | 221 |
| ^ | 94 | -- | 16 | 0 | 94 | 222 | 222 |
| _ | 95 | -- | 16 | 0 | 95 | 226 | 226 |
| ` | 96 | -- | 192 | 192 | 96 | 192 | 192 |
| a | 97 | -- | 65 | 65 | 97 | 65 | 65 |
| b | 98 | -- | 66 | 66 | 98 | 66 | 66 |
| c | 99 | -- | 67 | 67 | 99 | 67 | 67 |
| d | 100 | -- | 68 | 68 | 100 | 68 | 68 |
| e | 101 | -- | 69 | 69 | 101 | 69 | 69 |
| f | 102 | -- | 70 | 70 | 102 | 70 | 70 |
| g | 103 | -- | 71 | 71 | 103 | 71 | 71 |
| h | 104 | -- | 72 | 72 | 104 | 72 | 72 |
| i | 105 | -- | 73 | 73 | 105 | 73 | 73 |
| j | 106 | -- | 74 | 74 | 106 | 74 | 74 |
| k | 107 | -- | 75 | 75 | 107 | 75 | 75 |
| l | 108 | -- | 76 | 76 | 108 | 76 | 76 |
| m | 109 | -- | 77 | 77 | 109 | 77 | 77 |
| n | 110 | -- | 78 | 78 | 110 | 78 | 78 |
| o | 111 | -- | 79 | 79 | 111 | 79 | 79 |
| p | 112 | -- | 80 | 80 | 112 | 80 | 80 |
| q | 113 | -- | 81 | 81 | 113 | 81 | 81 |
| r | 114 | -- | 82 | 82 | 114 | 82 | 82 |
| s | 115 | -- | 83 | 83 | 115 | 83 | 83 |
| t | 116 | -- | 84 | 84 | 116 | 84 | 84 |
| u | 117 | -- | 85 | 85 | 117 | 85 | 85 |
| v | 118 | -- | 86 | 86 | 118 | 86 | 86 |
| w | 119 | -- | 87 | 87 | 119 | 87 | 87 |
| x | 120 | -- | 88 | 88 | 120 | 88 | 88 |
| y | 121 | -- | 89 | 89 | 121 | 89 | 89 |
| z | 122 | -- | 90 | 90 | 122 | 90 | 90 |
| { | 123 | -- | 16 | 219 | 123 | 219 | 219 |
| | | 124 | -- | 16 | 0 | 124 | 220 | 220 |
| } | 125 | -- | 16 | 221 | 125 | 221 | 221 |
| ~ | 126 | -- | 16 | 0 | 126 | 48 | 222 |
| TenKey : * | 42 | -- | 106 | 106 | 42 | 106 | 106 |
| TenKey : + | 43 | -- | 107 | 107 | 43 | 107 | 107 |
| TenKey : - | 45 | -- | 109 | 109 | 45 | 108 | 109 |
| TenKey : . | 46 | -- | 110 | 110 | 46 | 110 | 46 |
| TenKey : / | 47 | -- | 111 | 111 | 47 | 111 | 111 |
| TenKey : 0 | 48 | -- | 96 | 96 | 48 | 96 | 45 |
| TenKey : 1 | 49 | -- | 97 | 97 | 49 | 97 | 35 |
| TenKey : 2 | 50 | -- | 98 | 98 | 50 | 98 | 40 |
| TenKey : 3 | 51 | -- | 99 | 99 | 51 | 99 | 34 |
| TenKey : 4 | 52 | -- | 100 | 100 | 52 | 100 | 37 |
| TenKey : 5 | 53 | -- | 101 | 101 | 53 | 101 | 12 |
| TenKey : 6 | 54 | -- | 102 | 102 | 54 | 102 | 39 |
| TenKey : 7 | 55 | -- | 103 | 103 | 55 | 103 | 36 |
| TenKey : 8 | 56 | -- | 104 | 104 | 56 | 104 | 38 |
| TenKey : 9 | 57 | -- | 105 | 105 | 57 | 105 | 33 |
備考：
Netscape Navigator 4.x（NN4.x)
订阅：
评论 (Atom)