サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
javascript.eweb-design.com
サンプルと機能 → Sample 1:アクセス時間によってメッセージを変更する アクセス時間によってメッセージを変更します。 ホームページのちょっとしたアクセントに使えます。 サンプルは3時間単位で変更していますが、1時間単位や6時間単位なども可能です。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:アクセス時間によってメッセージを変更する <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY bgcolor="#ffffff"> アクセス時間によって以下のコメントを変更しています。<BR><BR> <FONT color="#0000ff"> <SCRIPT LAN
ページが見つかりません 指定されたURLは存在しません。 URLが間違っているか、ファイルが移動した可能性があります。 5秒後にトップページに移動します。 eWeb - ホームページ作成支援サイト http://www.eweb-design.com/
サンプルと機能 → Sample 1:未入力項目があると警告する テキスト領域やテキストエリアに未入力項目があった場合、送信時に警告をします。 入力必須項目は自由に設定することができます。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:未入力項目があると警告する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 未入力項目をチェックする function chValie() { // 入力必須項目(「,」で区切って追加可能) ess = new Array("email", "name", "comment");
サンプルと機能 → Sample 1:ボタンをクリックするとフルスクリーンでサブウィンドウを開く フルスクリーンでサブウィンドウを開きます。 ブラウザの全画面表示と違い、初心者には通常画面に戻すことが難しいので、 必ず閉じるボタンを配置しましょう。 Netscape Navigatorには対応していません。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 sample.htmlの内容は省略します。 → Sample 1:ボタンをクリックするとフルスクリーンでサブウィンドウを開く <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // サブウィン
サンプルと機能 → Sample 1:選択した背景色に変更して保存する → Sample 2:選択した背景画像に変更して保存する セレクトメニューで選択した背景色に変更して、その背景色をクッキーを使って保存します。 ユーザーが訪問のたびに背景色を選択しなくてすむようになります。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:選択した背景色に変更して保存する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 文字色の変更 function chFtColor() { document.bgColor = docume
サンプルと機能 → Sample 1:チェックした項目の合計を計算する → Sample 2:チェック・セレクト・入力した項目の合計を計算する ラジオボタンやチェックボックスなどでチェックした項目の合計(数字)を 計算して出力します。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:チェックした項目の合計を計算する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 項目の合計を計算 function ttlValue() { chn = 10; // ラジオボタンとチェックボックスの総数 ttl = 0; for
サンプルと機能 → Sample 1:ページを表示すると同時にモニタのサイズに合わせる ウィンドウのサイズをモニタのサイズに合わせます。 800×600のサイズのモニタを使用していれば、 ウィンドウのサイズも自動的に800×600になります。 これは、全画面表示や最大化とは違いますので注意が必要です。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:ページを表示すると同時にモニタのサイズに合わせる <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // ウィンドウをモニタのサイズに合わせる moveTo(0,0); //
サンプルと機能 → Sample 1:時間ごとに背景色を変更する → Sample 2:時間ごとに背景画像を変更する セレクトメニューや、ラジオボタンなどで選択した背景画像に変更します。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:時間ごとに背景色を変更する <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-- // 時間ごとに背景色を変更 h = (new Date()).getHours(); if((h >= 0) && (h < 3)) document.bgColor = "#
サンプルと機能 → Sample 1:クリックされたら画像を入れ替える → Sample 2:様々なフィルタを用いて画像を入れ替える 画像がクリックされたら画像を入れ替えます。 フォトアルバムなどを作る場合に有効です。 Sample 2のように入れ替える際にいろんな効果を加えることができます。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:クリックされたら画像を入れ替える <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像がクリックされたら画像を入れ替える // img0.jpg,img1.jpgなどの数字が続
サンプルと機能 → Sample 1:アクセス日時と最終更新日を表示する → Sample 2:アクセス日時と最終更新日をカスタマイズして表示する アクセス日時と最終更新日を表示します。 どちらか片方しか表示ない場合は、もう一方を消去して使用してください。 表示方法は、自分の好きなようにカスタマイズが可能です。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:アクセス日時と最終更新日を表示する <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY bgcolor="#ffffff"> 現在の日時と最終更新日を表示します。<BR><BR> <FONT color="#000
サンプルと機能 → Sample 1:画像をバウンドさせる → Sample 2:画像に反射運動をさせる 画像にバウンドをさせたり、反射運動をさせたりすることができます。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:画像をバウンドさせる <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像をバウンドさせる itv = 50; // 画像が動く間隔(ミリ秒単位) att = 0.888; // 画像がバウンドする強さ n = 1; imgY = 0; function moveImg() { imgY +=
サンプルと機能 → Sample 1:クッキーの削除 クッキーに保存したデータを削除します。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:クッキーの削除 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // クッキーの削除 function deleteCookie() { cName = "uName="; // 削除するクッキー名 dTime = new Date(); dTime.setYear(dTime.getYear() - 1); document.cookie = cName + ";expires
サンプルと機能 → Sample 1:右クリックを無効にする → Sample 2:右クリックをしたら警告ウィンドウを表示する 右クリックを禁止します。 画像を保存されたり、ソースを隠したいときに有効です。 あくまでも右クリックができないだけですので、他の方法でソースを見られたりすることもあります。 Netscape Navigatorには対応していません。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:右クリックを無効にする <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY bgcolor="#ffffff" onContextmenu="return false"
サンプルと機能 → Sample 1:ドラッグして画像を移動する ドラッグして、画像を移動させます。 キャラクターの洋服の着せ替えなども実現できます。 Netscape Navigatorには対応していません。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:ドラッグして画像を移動する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // ドラッグして画像を移動する x = 40; // マウスと画像の縦方向の距離 y = 30; // マウスと画像の横方向の距離 flag = false; window.docume
サンプルと機能 → Sample 1:ボタンをクリックしてサブウィンドウを開く → Sample 2:ページを表示すると同時にサブウィンドウを開く サブウィンドウから親ウィンドウのURLを変更します。 これを用いればナビゲーションリンクなどを作ることができます。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:ボタンをクリックしてサブウィンドウを開く <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // サブウィンドウから親ウィンドウのURLを変更する w = 200; // 横幅 h = 400; // 縦幅 fun
サンプルと機能 → Sample 1:チェックできる数を制限する チェックボックスにチェック可能な数を制限します。 制限以上にチェックした場合、最後にチェックした項目が自動的に外されます。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:チェックできる数を制限する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // チェックボックスに使用している名前 chn = new Array("ch1","ch2","ch3","ch4","ch5","ch6"); chc = 2; // チェックできる数 // チェックボック
サンプルと機能 → Sample 1:オンマウスで画像を入れ替える(プレロード) 画像にロールオーバー効果を加えます。 一般的には、画像メニューなどに使われます。 簡易版と違い、あらかじめ画像を呼び込むので、 素早く入れ替えることが可能です。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:マウスを上に置くと画像を入れ替える <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // マウスを上に置くと画像を入れ替える(画像を先に読み込む) // 入れ替える画像 img = new Array("img/img0.jpg",
サンプルと機能 → Sample 1:ページを表示すると同時に1文字ずつ画面に表示する → Sample 2:ボタンをクリックすると1文字ずつ画面に表示する 指定したテキストを1文字ずつ画面に表示することができます。 改行などのタグも可能ですが、1文字として扱われるため、その分の表示が遅くなります。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:ページを表示すると同時に1文字ずつ画面に表示する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // テキストを1文字ずつ画面に表示する // 以下にテキストを入力 str
サンプルと機能 → Sample 1:セレクトメニューを用いて選択した背景画像に変更する → Sample 2:ラジオボタンを用いて選択した背景画像に変更する セレクトメニューや、ラジオボタンなどで選択した背景画像に変更します。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:セレクトメニューを用いて選択した背景画像に変更する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 背景画像の変更 function chBgImg(opt) { document.body.style.backgroundImage = "ur
サンプルと機能 → Sample 1:ボタンをクリックするとサブウィンドウを常に最前面に表示する → Sample 2:ページを表示すると同時にサブウィンドウを常に最前面に表示する サブウィンドウを常に最前面に表示します。 メニューを置くなどの工夫はできますが、基本的に邪魔になるので、大きいウィンドウを表示させてはいけません。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:ボタンをクリックするとサブウィンドウを常に最前面に表示する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // サブウィンドウを常に前面に表示する
サンプルと機能 → Sample 1:マウスカーソルの形を変更する マウスカーソルの形を変えます。 紛らわしい形に変更するのは避けてください。 WindowsとMacintoshとでは形が異なります。 また、ブラウザのバージョンによっても形が異なることがあります。 Netscape Navigatorには対応していません。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:マウスカーソルの形を変更する <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY bgcolor="#ffffff"> <SCRIPT language="JavaScript"> <!-- //
サンプルと機能 → Sample 1:カーソルキーを使ってページを移動 カーソルキーを使ってページを移動します。 本のようにめくっていくようなページに使うと効果的です。 Netscapeには対応していません。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:カーソルキーを使ってページを移動 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 矢印キーの左右でページを移動する function lrPage() { // 前のページ(矢印キーの左:←) if(event.keyCode == 37) location.
サンプルと機能 → Sample 1:テキストエリアの入力文字数を超えたら警告する テキストエリアの入力文字数の制限を行います。 実際には、警告を行うだけなので、そのまま送信することは可能です。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:テキストエリアの入力文字数を超えたら警告する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 複数テキスト領域の入力文字数を超えたら警告する function restChar() { n = document.formN.textN.value.length; if(n >
サンプルと機能 → Sample 1:マウスに画像を追従させる → Sample 2:マウスに複数の画像を追従させる マウスカーソルの右下に画像を置きます。 画像はできるだけ小さいものを使いましょう。 アニメーションGIFなどを置くと効果的です。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:マウスに画像を追従させる <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // マウスに画像を追従させる function mouseImage() { document.all["ID"].style.left= event.
サンプルと機能 → Sample 1:ボタンを押すと画像をフェードイン・フェードアウトさせる → Sample 2:画像を順番にフェードインさせる フィルタを使って画像をフェードイン・フェードアウトさせます。 Netscapeには対応していません。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:ボタンを押すと画像をフェードイン・フェードアウトさせる <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔(ミリ秒単位) ntc = 2; // 何
サンプルと機能 → Sample 1:ランダムに背景色を変更する → Sample 2:ランダムに背景画像を変更する ページを読み込んだ時にランダムで背景画像に変更します。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:ランダムに背景色を変更する <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-- // ランダムに背景色を変更する bgc = new Array(); bgc[0] = "#999999"; bgc[1] = "#ff9999"; bgc[2] = "#ff0000";
サンプルと機能 → Sample 1:入力した項目の合計を計算する → Sample 2:チェック・セレクト・入力した項目の合計を計算する テキスト領域などに入力した項目の合計(数字)を計算して出力します。 「Sample 2」では、セレクトメニューで選択した項目などの合計を計算します。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:入力した項目の合計を計算する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // テキスト領域の合計を計算 function ttlValue() { txt = 6; // テキスト領
サンプルと機能 → Sample 1:リンクボタンをクリックするとサブウィンドウを開く → Sample 2:ページを表示すると同時にサブウィンドウを開く サブウィンドウの大きさと、開く位置を指定します。 サブウィンドウは画面の中央に開くこともできます。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 sample.htmlの内容は省略します。 → Sample 1:リンクボタンをクリックするとサブウィンドウを開く <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // サブウィンドウの大きさと開く位置の指定 l = 60; // 表示するx座
次のページ
このページを最初にブックマークしてみませんか?
『JavaScript Samples フリーサンプル - eWeb』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く