JavaScript网页奇效学习笔记3 _JavaScript

JavaScript网页特效学习笔记3

挺长时间没有写博客了，有些知识有写模糊了，今天在写10个简单的JavaScript特效吧！

1、Enter键实现Tab键功能

有些时候我们注册表单的时候，会发现只要按Enter键，光标便进入的到了下一个注册选项，提高了用户的注册速度。和Tab键的功能一样，可以通过将Enter键的功能转换为Tab键的功能。

<span style="font-size:12px;"><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>

</span>

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>

这回就到这了，以后在接着写吧，如果哪有问题，希望大家提出来。