JavaScriptウェブサイトの特効学習ノート3
9374 ワード
長い間ブログを書いていません.一部の知識がぼやけています.今日は10の簡単なJavaScriptの特効を書いています.
1、EnterキーはTabキー機能を実現する.
フォームを登録する時、Enterキーを押すだけで、カーソルが次の登録オプションに入り、ユーザーの登録速度がアップします.Tabキーの機能と同様に、Enterキーの機能をTabキーに変換する機能があります.
2、Enterが自動的に新しい行を生成する
この効果はマウスをどこかに置くと、Enterキーを押したまま新しい行ができます.通常はinsertRow、insertCellの属性が使用されます.
開発の過程では、表を簡単に遍歴することがよくありますが、実はこの遍歴は簡単です.表のオブジェクトを取得すると、表の行の配列サイズによって、行ごとのセルを遍歴することができます.二つのforを循環すればいいです.
4、テーブルが点滅します
ウェブページの効果の中で、いつも見ています.いくつかの点滅した文字があります.基本的には速いスピードで元素のスタイルを変えます.表の点滅も同じです.
ウェブページのいくつかの操作では、上下左右の4つのキーを使用して、event.keyCodeの属性を通じてユーザー入力の健を取得します.左ボタンのコードは37で、上下は38、39、40です.
ここのステータスバーの走馬灯は文字の繰り返しの効果で、ネット上でも文字のポップアップ効果とスクロール効果があります.
マウスの右ボタンを遮る必要があるため、マウスの右ボタンを押すと警告枠が表示されます.event.buttonの値が2の時は右ボタン、event.buttonの値が1の時は左ボタンです.
このような漢字の数を判断するには、正規表現が必要です.これを通じて、漢字があるかどうかが分かります.
文字のASCIIコードでアルファベットを取得するのは便利です.大文字のASCIIコードの範囲は65-91で、小文字のASCIIコードの範囲は97-1123です.from CharCodeという方法で、与えられたコードに基づいてアルファベットの値を取得することができます.アルファベットを使う特効にはとても役立ちます.
プルダウンリストの同期は、時によっては有用です.最初の項目が変更されると、第二の選択項目が最初の選択項目に設定されます.
1、EnterキーはTabキー機能を実現する.
フォームを登録する時、Enterキーを押すだけで、カーソルが次の登録オプションに入り、ユーザーの登録速度がアップします.Tabキーの機能と同様に、Enterキーの機能をTabキーに変換する機能があります.
<html>
<head>
<title>Enter Tab </title>
<script type="text/javascript">
function changeFocus()
{
if(event.keyCode == 13)
{
event.keyCode = 9;
}
}
</script>
</head>
<body>
<input type="text" onkeydown="changeFocus()"><br/>
<input type="text" onkeydown="changeFocus()"><br/>
<input type="text" onkeydown="changeFocus()"><br/>
<input type="text" onkeydown="changeFocus()"><br/>
<input type="text" onkeydown="changeFocus()"><br/>
<input type="text" onkeydown="changeFocus()"><br/>
</body>
</html>
2、Enterが自動的に新しい行を生成する
この効果はマウスをどこかに置くと、Enterキーを押したまま新しい行ができます.通常はinsertRow、insertCellの属性が使用されます.
<html>
<head>
<title>Enter </title>
<script type="text/javascript">
function newRow()
{
if(event.keyCode == "13")
{
var row = tb1.insertRow(1);
row.height = "50";
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = " 1 ";
cell2.innerHTML = " 2 ";
}
}
</script>
</head>
<body>
， <br/>
<table id="tb1" border="1" width="280px" cellspacing="0" borderColor="green">
<tr bgColor="red"><td>1</td><td onkeypress="newRow()">2</td></tr>
</table>
</body>
</html>開発の過程では、表を簡単に遍歴することがよくありますが、実はこの遍歴は簡単です.表のオブジェクトを取得すると、表の行の配列サイズによって、行ごとのセルを遍歴することができます.二つのforを循環すればいいです.
<html>
<head>
<title> </title>
<script type="text/javascript">
function viewCell()
{
table = document.getElementById("tab1");
var count = 1;
for (var i = 0; i< table.rows.length;i++ )
{
for (var j = 0;j<table.rows[i].cells.length ;j++ )
{
table.rows[i].cells[j].innerText = " "+count+" ";
count++;
}
}
}
</script>
</head>
<body onload="viewCell()">
<table id="tab1" border="1" cellspacing="0" cellpadding="20" borderColor="blue">
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>4、テーブルが点滅します
ウェブページの効果の中で、いつも見ています.いくつかの点滅した文字があります.基本的には速いスピードで元素のスタイルを変えます.表の点滅も同じです.
<html>
<head>
<title> </title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10" width="300px" id="tb1" style="border:3px solid green">
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
<script type="text/javascript">
function flashTable()
{
if(tb1.style.borderColor == "green")
{
tb1.style.borderColor = "red";
}
else
{
tb1.style.borderColor = "green";
}
}
setInterval("flashTable()",400);
</script>
</body>
</html>ウェブページのいくつかの操作では、上下左右の4つのキーを使用して、event.keyCodeの属性を通じてユーザー入力の健を取得します.左ボタンのコードは37で、上下は38、39、40です.
<html>
<head>
<title> </title>
<script type="text/javascript">
function direction()
{
if(event.keyCode == "37")
{
alert(" ");
}
if(event.keyCode == "38")
{
alert(" ");
}
if(event.keyCode == "39")
{
alert(" ");
}
if(event.keyCode == "40")
{
alert(" ");
}
}
</script>
</head>
<body onkeyDown="direction()">
</body>
</html>ここのステータスバーの走馬灯は文字の繰り返しの効果で、ネット上でも文字のポップアップ効果とスクロール効果があります.
<html>
<head>
<title> </title>
<script type="text/javascript">
var msg = " ";
var interval = 400;
seq = 0;
function marquee()
{
len = msg.length;
window.status = msg.substring(0,seq+1);
seq++;
if(seq > len)
{
seq = 0;
}
window.setTimeout("marquee()",interval);
}
</script>
</head>
<body onload="marquee()">
</body>
</html>マウスの右ボタンを遮る必要があるため、マウスの右ボタンを押すと警告枠が表示されます.event.buttonの値が2の時は右ボタン、event.buttonの値が1の時は左ボタンです.
<html>
<head>
<title> </title>
<script type="text/javascript">
function click()
{
if(event.button == 2)
{
alert(" ");
}
}
document.onmousedown = click;
</script>
</head>
<body>
。
</body>
</html>このような漢字の数を判断するには、正規表現が必要です.これを通じて、漢字があるかどうかが分かります.
<html>
<head>
<title> </title>
<script type="text/javascript">
function count()
{
var str = document.getElementById("txt").value;
re = /[\u4e00-\u9fa5]/g;
if(re.test(str))
{
return alert(str.match(re).length);
}
else
{
return alert(0);
}
}
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="button" onclick="count()" value=" "/>
</body>
</html>文字のASCIIコードでアルファベットを取得するのは便利です.大文字のASCIIコードの範囲は65-91で、小文字のASCIIコードの範囲は97-1123です.from CharCodeという方法で、与えられたコードに基づいてアルファベットの値を取得することができます.アルファベットを使う特効にはとても役立ちます.
<html>
<head>
<title> 26 </title>
<script type="text/javascript">
for (var i = 65;i<91 ;i++ )
{
document.write(String.fromCharCode(i)+"");
}
for (var i = 97;i<123 ;i++ )
{
document.write(String.fromCharCode(i)+"");
}
</script>
</head>
<body>
</body>
</html>プルダウンリストの同期は、時によっては有用です.最初の項目が変更されると、第二の選択項目が最初の選択項目に設定されます.
<html>
<head>
<title> </title>
</head>
<body>
<select onchange="sel2.options[selectedIndex].selected=true">
<option>1 </option>
<option>1 </option>
<option>1 </option>
<option>1 </option>
<option>1 </option>
</select>
<select id="sel2">
<option>2 </option>
<option>2 </option>
<option>2 </option>
<option>2 </option>
<option>2 </option>
</select>
</body>
</html>