JavaScript で最もよく使用される 55 の古典的なヒントを共有する

著者：Eve Cole 更新時間：2025-01-17 19:12:01

1. oncontextmenu="window.event.returnValue=false" はマウスの右ボタンを完全にブロックします

<table border oncontextmenu=return(false)><td>no</table> はテーブルに使用できません

2. <body onselectstart="return false"> 選択をキャンセルしてコピーを禁止します

3. onpaste="return false" は貼り付けできません

4. oncopy="return false;" oncut="return false;"

5. <link rel="Shortcut Icon" href="favicon.ico"> IE アドレスバーを独自のアイコンに置き換えます。

6. <link rel="Bookmark" href="favicon.ico"> でアイコンをお気に入りに表示できます

7. <input style="ime-mode:disabled"> 入力メソッドを閉じる

8. 常にフレームワークを持ち歩く

if (window == top)top.location.href = "frames.htm"; //frames.htm はフレーム Web ページです。

// --></script>

9. はめられないようにする

<スクリプト言語=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

10. Web ページは次の名前で保存されません。

11. <input type=button value="/Web ページのソースコードの表示

onclick="window.location = "view-source:"+ "//www.VeVB.COm"">

12. 削除時の確認

13. コントロールの絶対位置を取得する

次のようにコードをコピーします。

//JavaScript

<スクリプト言語="Javascript">

関数 getIE(e){

var t=e.offsetTop;

var l=e.offsetLeft;

while(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

}

アラート("top="+t+"/nleft="+l);

}

</script>

//VBScript

関数getIE()

薄暗いt、l、a、b

a=document.all.img1 を設定します

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

while a.tagName<>"BODY"

set a = a.offsetParent

t=t+a.オフセット上

l=l+a.左オフセット

曲がります

msgbox "top="&t&chr(13)&"left="&l,64,"コントロールの位置を取得"

終了関数

--></script>

14. テキストボックス内のテキストの末尾でカーソルが停止します

次のようにコードをコピーします。

<スクリプト言語="javascript">

関数cc()

{

var e = イベント.srcElement;

var r =e.createTextRange();

r.moveStart("character",e.value.length);

r.collapse(true);

r.select();

}

</script>

15. 前のページの出典を特定する

JavaScript :

ドキュメント.リファラー

16. ウィンドウを最小化、最大化、閉じる

<入力タイプ=ボタン値=閉じる onclick=hh3.Click()>

この例は IE の場合です

17. シールドファンクションキー Shift、Alt、Ctrl

<スクリプト>

関数 look(){

if(イベント.シフトキー)

alert("Shift キーを押すことを禁止してください!"); //ALT CTRL で置き換えることができます。

}

document.onkeydown=見る;

</script>

18. Web ページはキャッシュされません

または <META HTTP-EQUIV="expires" CONTENT="0">

19. フォームの凹凸を少なくするにはどうすればいいですか？

または

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

1 ソリッド #000000"></textarea>

20. <div><span>&<layer> の違いは何ですか?

<div>(分割) は、ページ要素の大きなセクションを定義するために使用されます。これにより、改行が発生します。

<span> は、同じ行内の要素を定義するために使用されます。 <div> との唯一の違いは、改行が発生しないことです。

<layer> は ns のタグですが、ie ではサポートされていません。<div> と同等です。

21. ポップアップウィンドウを常に最前面に表示します。

22. スクロールバーはありませんか?

垂直バーがないようにします。

</body>

バーは空白のままにしておきます。

</body>

両方削除しますか？より単純な

</body>

23. 画像リンクをクリックした後、画像の周囲の点線を削除するにはどうすればよいですか?

24. 電子メール処理送信フォーム

<form name="form1" method="post" action=mailto:****@***.com

enctype="text/plain">

<入力タイプ=送信>

</form>

25. 開いている子ウィンドウで親ウィンドウを更新するコードを記述するにはどうすればよいですか?

window.opener.location.reload()

26.開いたページのサイズを設定する方法

ページの場所を開く<body onload="top.moveBy(300,200);">

27. ページを引っ張ったときに背景画像が動かないように、完全ではない背景画像をページに追加する方法。

<スタイル>

体

{背景画像:url(/logo.gif); 背景リピート:繰り返しなし;

背景位置:中央;背景添付:固定}

</スタイル>

28. 文字列がすべて数字で構成されているかどうかを確認する

関数 checkNum(str){return str.match(//D/)==null}

アラート(checkNum("1232142141"))

アラート(checkNum("123214214a1"))

// --></script>

29. ウィンドウのサイズを取得する

document.body.clientWidth;

30. キャラクターかどうかの見分け方

if (/[^/x00-/xff]/g.test(s)) alter("中国語の文字が含まれています");

elsealert("すべての文字");

31.TEXTAREA適応テキスト行数

<textarea rows=1 name=s1cols=27 onpropertychange

="this.style.posHeight=this.scrollHeight">

</textarea>

32. 日付から日数を引いた値は 2 番目の日付と同じです

<スクリプト言語=JavaScript>

functioncc(dd,dadd)

{

//エラー処理を追加可能

var a = 新しい日付(dd)

a = a.valueOf()

a = a - お父さん * 24 * 60 * 60 * 1000

a = 新しい日付(a)

alert(a.getFull Year() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

}

cc("2002/12/23",2)

</script>

33. どのラジオが選択されますか?

関数 checkme()

radio1 の各 ob に対して

ob.チェックが入っている場合

window.alert ob.value

次

終了関数

</script><BODY>

<INPUT name="radio1" type="radio" value="/style" selected>スタイル

<INPUT name="radio1" type="radio" value="/blog/barcode">バーコード

</BODY></HTML>

34. スクリプトは決して間違っていない

<スクリプト言語="JavaScript">

<!-- 隠す

関数 killErrors() {

true を返します。

}

window.onerror = killErrors;

// -->

</スクリプト>

35. ENTER キーでカーソルを次の入力ボックスに移動できます

36. Web サイトのリンク速度を確認します。

次のコードを <body> 領域に追加します。

<スクリプト言語=JavaScript>

時間=1

setInterval("tim++",100)

b=1

var autourl=新しい配列()

autourl[1]=1000){this.resize=true;this.style.width=1000;}" align=absMiddle border=0>www.njcatv.net"

autourl[2]="javacool.3322.net"

autourl[3]=1000){this.resize=true;this.style.width=1000;}" align=absMiddle border=0>www.sina.com.cn"

autourl[4]="www.nuaa.edu.cn"

autourl[5]=1000){this.resize=true;this.style.width=1000;}" align=absMiddle border=0>www.cctv.com"

関数 butt(){

***("<フォーム名=autof>")

for(var i=1;i<autourl.length;i++)

***("<input type=text name=txt"+i+" size=10 value="/テスト中...> =》<input type=text

name=url"+i+" size=40> =》<input type=button value="/blog/GO

onclick=window.open(this.form.url"+i+".value)><br>")

***("<input type=submit value=Refresh></form>")

}

お尻()

関数自動(url){

document.forms[0]["url"+b].value=url

if(tim>200)

{document.forms[0]["txt"+b].value="/リンクタイムアウト"}

それ以外

{document.forms[0]["txt"+b].value="/blog/time"+tim/10+"秒"}

b++

}

function run(){for(var i=1;i<autourl.length;i++)***("<img src=http://"+autourl+"/"+Math.random()+" width=1高さ=1

onerror=auto("http://"+autourl+"")>")}

run()</script>

37. さまざまなスタイルのカーソル

自動: 標準カーソル

デフォルト: 標準の矢印

手: ハンドカーソル

wait: カーソルを待ちます

テキスト: I 字型カーソル

垂直テキスト: 水平 I 字型カーソル

no-drop: カーソルはドラッグできません

許可されない: 無効なカーソル

help:?ヘルプカーソル

全スクロール: 三角形の方向インジケーター

移動：ターゲットを移動します

十字線:十字マーク

電子リサイズ

n リサイズ

nw-サイズ変更

サイズ変更付き

S-サイズ変更

サイズ変更

SW-リサイズ

38. ページの入口と出口の特殊効果

ページに入る<meta http-equiv="Page-Enter" content="revealTrans(duration=x,transition=y)">

終了ページ<meta http-equiv="Page-Exit" content="revealTrans(duration=x,transition=y)">

これらは、ページがロードされて呼び出されたときの特殊効果です。持続時間は特殊効果の持続時間を秒単位で表します。トランジションは、どの特殊効果を使用するかを示します。値は 1 ～ 23 です。

0 長方形縮小

1 長方形の拡張

2円縮小

3 円形拡張

4 下から上に更新します

5 上から下へ更新

6 左から右に更新

7 右から左に更新します

縦型ブラインド8枚

横型ブラインド9枚

10 オフセット横型ブラインド

11 オフセット縦型ブラインド

12ポイントスプレッド

13 左から右に更新

14 中央から左右にリフレッシュ

15中～上下

真ん中まで上下16本

17 右下から左上へ

18 右上から左下まで

19 左上から右下へ

左下から右上へ20

横棒21本

22本の縦棒

23 上記22種類の中からランダムで1つ選択

39. 規定時間内にジャンプする

40. Webページが取得されるかどうか

属性値には次のものが含まれます。

属性値は「all」です。ファイルが取得され、ページ上のリンクが照会できます。

属性値は「none」です。ファイルは取得されず、ページ上のリンクは照会されません。

属性値は「index」です。ファイルが取得されます。

属性値は「follow」です。ページ上のリンクをクエリします。

属性値は「noindex」です。ファイルは取得されませんが、クエリとリンクは可能です。

属性値は「nofollow」です。ファイルは取得されませんが、ページ上のリンクを照会できます。

41. メールアドレスの分割

次のコードを <body> 領域に追加します。

<a href="mailto:[email protected]">[email protected]</a>

42. 流れるボーダー効果のあるテーブル

次のコードを <body> 領域に追加します。

次のようにコードをコピーします。

<スクリプト>

l=配列(6,7,8,9,'a','b','b','c','d','e','f')

Nx=5;Ny=35

t="<テーブルボーダー=0セルスペース=0セルパディング=0><tr>"

for(x=Nx;x<Nx+Ny;x++)

t+="<td width=16 id=a_mo"+x+"> </td>"

t+="</tr><tr><td width=10 id=a_mo"+(Nx-1)+"> </td><tdcolspan="+(Ny-2)+" rowspan="+( Nx)+"> </td><td width=16 id=a_mo"+(Nx+Ny)+"></td></tr>"

for(x=2;x<=Nx;x++)

t+="<tr><td width=16 id=a_mo"+(Nx-x)+"> </td><td width=16 id=a_mo"+(Ny+Nx+x-1)+"> </td></tr>"

t+="<tr>"

for(x=Ny;x>0;x--)

t+="<td width=16 id=a_mo"+(x+Nx*2+Ny-1)+"> </td>"

***(t+"</tr></table>")

var N=Nx*2+Ny*2

関数 f1(y){

for(i=0;i<N;i++){

c=(i+y)%20;if(c>10)c=20-c

document.all["a_mo"+(i)].bgColor=""""#0000"+l[c]+l[c]+"'"}

y++

setTimeout('f1('+y+')','1')}

f1(1)

</スクリプト>

43. JavaScript ホームページのポップアップウィンドウのテクニック

ウィンドウの中央にポップアップします

次のようにコードをコピーします。

<スクリプト>

window.open("//www.VeVB.COm","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth) -400)/2);

</script>

============

<html>

<頭>

<スクリプト言語="LiveScript">

関数 WinOpen() {

msg=open("","ディスプレイウィンドウ","ツールバー=いいえ、ディレクトリ=いいえ、メニューバー=いいえ");

msg.***("<HEAD><TITLE>こんにちは！</TITLE></HEAD>");

msg.***("<CENTER><H1>すごいですね!</H1><h2>これは <B>JavaScript</B> によって開かれたウィンドウです!</h2></CENTER>");

}

</script>

</head>

<本文>

<フォーム>

</form>

</body>

</html>

==============

1. 以下のコードでは、クリックするだけで CCID にリンクするウィンドウが開きます。閉じたいときは、開いたばかりのウィンドウをクリックして閉じます。

コードは次のとおりです。

次のようにコードをコピーします。

<SCRIPT言語="JavaScript">

<! --

関数 openclk() {

another=open('1000){this.resize=true;this.style.width=1000;}" align=absMiddle border=0>//www.VeVB.COm','NewWindow');

}

関数 closeclk() {

別の.close();

}

//-->

</スクリプト>

<フォーム>

<BR>

</FORM>

2. 上記のコードは静かすぎるので、もっと動的にしないのはなぜでしょうか。ページにランディング効果を与えられると嬉しいです！

コードは次のとおりです。

次のようにコードをコピーします。

<スクリプト>

関数ドロップ(n) {

if(self.moveBy){

self.moveBy (0, -900);

for(i = n; i > 0; i--){

self.moveBy(0, 3);

}

for(j = 8; j > 0; j--){

self.moveBy(0,j);

self.moveBy(j, 0);

self.moveBy(0,-j);

self.moveBy(-j, 0);

}

</script>

3. 多くの Web サイトが常にデフォルトのウィンドウで開くのが嫌いです。開いているウィンドウを自由に制御できれば便利です。

コードは次のとおりです。

次のようにコードをコピーします。

<スクリプト言語="JavaScript">

<! - 始める

関数ポップアップページ(l, t, w, h) {

var windowprops = "場所 = いいえ、スクロールバー = いいえ、メニューバー = いいえ、ツールバー = いいえ、サイズ変更可能 = はい" +

"、左 = " + l + "、上 = " + t + "、幅 = " + w + "、高さ = " + h;

var URL = "//www.VeVB.COm";

ポップアップ = window.open(URL, "MenuPopup", windowprops);

}

// 終了 -->

</script>

<テーブル>

<tr>

<td>

<フォーム名=ポップアップフォーム>

<前>

ページパラメータを開く<br>

左からの距離: <input type=text name=left size=2 maxlength=4> ピクセル

右からの距離: <input type=text name=top size=2 maxlength=4> ピクセル

ウィンドウの幅: <input type=text name=width size=2 maxlength=4> ピクセル

ウィンドウの高さ: <input type=text name=height size=2 maxlength=4> ピクセル

</pre>

<中央>

<input type=button value="このウィンドウを開いてください!" onClick="popupPage(this.form.left.value, this.form.top.value, this.form.width.value,

this.form.height.value)">

</center>

</form>

</td>

</tr>

</テーブル>

対応するダイアログボックスに値を入力するだけで、開くページのウィンドウは適切に制御されます。

44. ページの開き方と移動

次のコードを <body> 領域に追加します。

次のようにコードをコピーします。

<スクリプト言語="JavaScript">

<!-- 開始

for (t = 2; t > 0; t--) {

for (x = 20; x > 0; x--) {

for (y = 10; y > 0; y--) {

親.moveBy(0,-x);

}

for (x = 20; x > 0; x--) {

for (y = 10; y > 0; y--) {

親.moveBy(0,x);

}

for (x = 20; x > 0; x--) {

for (y = 10; y > 0; y--) {

親.moveBy(x,0);

}

for (x = 20; x > 0; x--) {

for (y = 10; y > 0; y--) {

親.moveBy(-x,0);

}

//-->

// 終了 -->

</script>

45. 個人クライアントマシンの日時を表示する

次のようにコードをコピーします。

<スクリプト言語="LiveScript">

<!-- 非表示

今日 = 新しい日付()

***("現在の時刻: ",today.getHours(),":",today.getMinutes())

***("<br>今日の日付は次のとおりです: ",today.getMonth()+1,"/",today.getDate(),"/",today.getyear());

// コンテンツの非表示を終了 -->

</script>

46. 毎回、最終変更日を自動的に生成します。

次のようにコードをコピーします。

<html>

<本文>

これは単純な HTML ページです。

<br>

最終変更:

<スクリプト言語="LiveScript">

<!-- 古いブラウザからスクリプトを非表示にします

***(document.lastModified)

// コンテンツの非表示を終了 -->

</script>

</body>

</html>

47. 空にすることはできず、電子メールアドレスの制約があります:

次のようにコードをコピーします。

<html>

<頭>

<スクリプト言語="JavaScript">

<!-- 隠す

関数 test1(フォーム) {

if (form.text1.value == "")

alert("何も書いていないので、もう一度入力してください!")

それ以外 {

alert("こんにちは"+form.text1.value+"! 入力が完了しました!");

}

関数 test2(form) {

if (form.text2.value == "" ||

form.text2.value.indexOf('@', 0) == -1)

alert("これは正しい電子メールアドレスではありません。もう一度入力してください。");

elsealert("入力が完了しました!");

}

// -->

</script>

</head>

<本文>

あなたの名前を入力してください:<br>

<P>

電子メールアドレスを入力してください:<br>

</body>

48.マーキー

次のようにコードをコピーします。

<html>

<頭>

<スクリプト言語="JavaScript">

<!-- 隠す

var scrtxt="どうですか! クールです! あなたも試してみてください。"+"ここに訪問者へのメッセージが入ります。

このページは "+"純粋に魅了されて何時間も見続けるでしょう...";

var lentxt=scrtxt.length;

var幅=100;

var pos=1-幅;

関数スクロール() {

pos++;

var スクロール = "";

if (pos==lentxt) {

pos=1-幅;

}

if (pos<0) {

for (var i=1; i<=Math.abs(pos); i++) {

スクローラー=スクローラー+" ";}

スクロール=スクロール+scrtxt.substring(0,width-i+1);

}

それ以外 {

スクロール=スクローラー+scrtxt.substring(pos,width+pos);

}

window.status = スクローラー;

setTimeout("scroll()",150);

}

//-->

</script>

</head>

あなたのウェブページをここに表示できます!

</body>

</html>

49. Web ページのボタンを使用して、前のページ、次のページ、およびホームページの表示を制御します。

次のようにコードをコピーします。

<html>

<本文>

<フォーム名="ボタンバー">

</FORM>

</body>

</html>

50. ウェブサイトのソースコードを表示する

次のコードを <body> 領域に追加します。

次のようにコードをコピーします。

<スクリプト>

関数追加()

{

var ress=document.forms[0].luxiaoqing.value

window.location="ビューソース:"+ress;

}

</スクリプト>

ソースコードを表示する URL アドレスを入力します。

次のようにコードをコピーします。

<フォーム><br>

</FORM>

51. タイトルには日付が表示されます

次のコードを <body> 領域に追加します。

次のようにコードをコピーします。

<スクリプト言語="JavaScript1.2">

<!--非表示

var isnMonth = 新しい

Array("1 月"、"2 月"、"3 月"、"4 月"、"5 月"、"6 月"、"7 月"、"8 月"、"9 月"、"10 月"、"11 月"、"12 月") ;

var isnDay = 新しい

Array("日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日","日曜日");

今日 = 新しい日付 () ;

年=today.getyear();

日付=today.getDate();

if(ドキュメント.すべて)

document.title="今日は: "+年+"年"+isnMonth[today.getMonth()]+日付+"日"+isnDay[today.getDay()]

//--非表示-->

</script>

52. すべてのリンクを表示

次のコードを <body> 領域に追加します。

次のようにコードをコピーします。

<スクリプト言語="JavaScript1.2">

<!--

関数抽出リンク(){

var links=document.all.tags("A")

var total=リンクの長さ

var win2=window.open("","","メニューバー、スクロールバー、ツールバー")

win2.***("<font size='2'>合計 "+total+" 個の接続があります</font><br>")

for (i=0;i<total;i++){

win2.***("<font size='2'>"+links[i].outerHTML+"</font><br>")

}

//-->

</script>

53. Enterキーで行を変更します

次のコードを <body> 領域に追加します。

次のようにコードをコピーします。

関数 handleEnter (フィールド、イベント) {

var keyCode = イベント.keyCode イベント.keyCode : イベント.どれ?

イベント.どれ: イベント.charCode;

if (キーコード == 13) {

変数 i;

for (i = 0; i < field.form.elements.length; i++)

if (フィールド == フィールド.フォーム.要素[i])

壊す;

i = (i + 1) % フィールド.フォーム.要素.長さ;

field.form.elements[i].focus();

false を返します。

}

それ以外

true を返します。

}

</script>

<フォーム>

<textarea>キャリッジリターンとラインフィード

54. 確認後送信

次のコードを <body> 領域に追加します。

次のようにコードをコピーします。

<スクリプト言語="JavaScript">

<!--

関数 msg(){

if (confirm("送信してもよろしいですか!"))

document.lnman.submit()

}

//-->

</スクリプト>

<p>

</p>

<p>

</p>

</form>

55. テーブルの内容を変更する

次のコードを <body> 領域に追加します。

次のようにコードをコピーします。

<スクリプト ***スクリプト>

var arr=新しい配列()

arr[0]="一一一一";

arr[1]="2 2 2 2 2";

arr[2]="3 3 3 3 3";

</script>

<option value=a>最初のフレームを変更する</option>

<option value=a>2 番目のフレームを変更する</option>

<option value=a>3 番目のフレームを変更する</option>

</選択>

<テーブル ID=zz border=1>

<td width=150>最初のフレーム</td>

<td width=150>2 番目のフレーム</td>

<td width=150>3 番目のフレーム</td>

</tr>

</テーブル>