JavaScript网页特效学习笔记3
2012-07-01 12:12 java线程例子 阅读(183) 评论(0) 编辑 收藏 举报挺长时间没有写博客了，有些知识有写模糊了，今天在写10个简单的JavaScript特效吧！
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>
3、表格的行和列的遍历
在开发的过程中，经常会对表格进行一些简单的遍历的操作，其实这个遍历很简单，当获取到表格的对象的时候，可以根据表格的行的数组大小，遍历每行的单元格。两个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>
5、获取方向键
在网页的某些操作中，需要用到上下左右四个键，通过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>
6、状态栏的跑马灯效果
这里的状态栏的跑马灯是文字的逐次出现的效果，在网上也有文字弹出效果，以及来回滚动的效果。
<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>
7、禁用鼠标右键
有时为了需要屏蔽鼠标右键，可以设置为当按下鼠标的右键的时候，弹出一个警告框。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>
8、判断汉字的数量
对于这种判断汉字的数量，需要用到了正则表达式，表达式“/[\u4e00-\u9fa5]/g”是获取中文字符的。我们通过这个便能知道有没有汉字，再通过match方法得到长度。
<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>
9、输出26个英文字母
用字符的ASCII码来获取字母是方便快捷的。大写字母的ASCII码的范围是65--91，小写的ASCII码的范围是97--123，在通过fromCharCode这个方法，便能根据所给的码来获取到字母值，对于用到字母的特效是很有用的。
<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>
10、这个网页列表框同步
下拉列表的同步，有些时候是很有用。当第一个被改变的时候，就将第二个选则的设置为第一个被选中的项。
<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>
这回就到这了，以后在接着写吧，如果哪有问题，希望大家提出来。
