JavaScrip学习

最新推荐文章于 2023-10-24 22:05:07 发布

jiangzaifu

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量1.8k

点赞数

分类专栏： javascript 文章标签： button function javascript input border 浏览器

本文链接：https://blog.csdn.net/jiangzaifu/article/details/7694521

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javaScrip 鼠标基本事件

鼠标感应改变表格单元背景色

通过鼠标的onMouseOver(鼠标经过)事件和onMouseOut(鼠标离开)事件改变表格单元的背景色

<table border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" bgcolor="#333333">
<tr>
	<td width="86" height="24" align="center"
		onMouseOver="this.style.backgroundColor='#FFCC99'"
		onMouseOut="this.style.backgroundColor=''">
		<a href="#" target="_self" onFocus="if(this.blur)this.blur()">新闻</a></td>
</tr>
</table>

代码说明：

以下代码为设置当鼠标移经过时所改变的单元背景色为“#FFCC99”

	onMouseOver="this.style.backgroundColor='#FFCC99'"

以下代码为设置当鼠标移离开时所产生的变化，这代码中设置的为无背景色，即显示表格本身的背景色(#333333)

	onMouseOut="this.style.backgroundColor=''"

效果演示

鼠标感应改变表格单元背景图片

通过鼠标的onMouseOver(鼠标经过)事件和onMouseOut(鼠标离开)事件改变表格单元的背景图片

	<td width="75" background="../images/bar_1.jpg" align="center"
			onMouseOver="this.background='../images/bar_2.jpg'"
			onMouseOut="this.background='../images/bar_1.jpg'">
		<a href="#" target="_self">新闻</a>
	</td>

效果演示

javaScrip 图片基本特效

鼠标感应半透明图片

通过鼠标的onMouseOver(鼠标经过)事件和onMouseOut(鼠标离开)事件改变图片的透明可见度

平时半透明的模糊图片，鼠标放上就完全显示,共2步

1) 将以下代码加入HTML的<head></head>之间：

	<script language="JavaScript1.2">

	function makevisible(cur,which){
		if (which==0)
			cur.filters.alpha.opacity=100
		else
			cur.filters.alpha.opacity=20
	}

	</script>

2) 将以下代码加入到HTML的<body><body>之间：

	<img src="http://www.01itcn.com/logo/01itcn.gif" style="filter:alpha(opacity=20)"
		onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)">

效果演示

图片渐现效果

在<head>区域中加入如下代码

	<Script For=window Event=onLoad Language=vbScript>
		image1.filters.item(0).apply()
		image1.filters.item(0).Transition = 22
		image1.Style.visibility = ""
		image1.filters(0).play(2.0)
	</Script>

在<body>区域中加入如下代码

	<img src="http://newgo.01itcn.com/01itcn/images/3.jpg" border="1" id="image1"
	style="visibility:hidden; Filter:revealTrans(Duration=4.0, Transition=22);">

备注:代码中 Transition = 22 ,可取值 0-23 分别产生不同的渐现效果,若值超出22则会产生随机效果

0 = 盒状收缩	1 = 盒状放射	2 = 圆形收缩	3 = 圆形放射
4 = 由下往上	5 = 由上往下	6 = 从左至右	7 = 从右至左
8 = 垂直百叶窗	9 = 水平百叶窗	10 = 水平格状百叶窗	11 = 垂直格状百叶窗
12 = 随意溶解	13 = 从左右两端向中间展开	14 = 从中间向左右两端展开	15 = 从上下两端向中间展开
16 = 从中间向上下两端展开	17 = 从右上角向左下角展开	18 = 从右下角向左上角展开	19 = 从左上角向右下角展开
20 = 从左下角向右上角展开	21 = 水平线状展开	22 = 垂直线状展开	23 = 随机产生一种过渡方式

效果演示(若没看到效果,可以按F5刷新重新查看效果)

javaScrip 按钮基本事件

window.external...

	<input οnclick='window.external.ImportExportFavorites(true,"http://localhost");'
	 	type=button value=导入收藏夹>
	<input οnclick='window.external.ImportExportFavorites(false,"http://localhost");'
	 	type=button value=导出收藏夹>
	<input οnclick="window.external.ShowBrowserUI('OrganizeFavorites', null)"
	 	type=button value=整理收藏夹>
	<input οnclick="window.external.ShowBrowserUI('LanguageDialog', null)"
	 	type=button value=语言设置>
	<input οnclick="window.external.AddFavorite('http://blog.csdn.net/Opossum/', '学习，讨论')"
	 	type=button value=加入收藏夹>
	<input οnclick="window.external.addChannel('http://blog.csdn.net/Opossum/')"
	 	type=button value=加入到频道>

window.location...

	<INPUT οnclick=window.location.reload() type=button value=刷新 name=refresh>
	<INPUT οnclick='window.location="view-source:" + 
		window.location.href' type=button value=查看源文件 name=viewButton>

document.execCommand...

	<input οnclick="document.execCommand('Cut')" type=button value=剪切>
	<input οnclick="document.execCommand('Copy')" type=button value=拷贝>
	<input οnclick="document.execCommand('Paste')" type=button value=粘贴>
	<input οnclick="document.execCommand('Undo')" type=button value=撤消>
	<input οnclick="document.execCommand('Delete')" type=button value=删除>
	<input οnclick="document.execCommand('Bold')" type=button value=黑体>
	<input οnclick="document.execCommand('Italic')" type=button value=斜体>
	<input οnclick="document.execCommand('Underline')" type=button value=下划线>
	<input οnclick="document.execCommand('stop')" type=button value=停止>
	<input οnclick="document.execCommand('SaveAs')" type=button value=保存>
	<input οnclick="document.execCommand('Saveas',false,'c:\\test.htm')" type=button value=另存为>
	<input οnclick="document.execCommand('FontName',false,fn)" type=button value=字体>
	<input οnclick="document.execCommand('FontSize',false,fs)" type=button value=字体大小>
	<input οnclick="document.execCommand('refresh',false,0)" type=button value=刷新>

history.go

	<a href="javascript:history.go(-1)">点击后退</a>
	<input type="button" name="button" οnclick=history.go(1) value="前进">
	<input type="button" name="button" οnclick=history.go(-1) value="后退">
	<input type="button" name="button" οnclick=history.forward() value="前进">
	<input type="button" name="button" οnclick=history.back() value="后退">

回到首页

	<input type="button" name="button" OnClick="top.location.href='index.html'" value="回到首页">

按钮的超链接

	<input type="button" name="button" value="按钮"
	 οnclick="window.open('http://www.01itcn.com','_blank')">
	<input type="button" name="button" value="麟妖软圃"
	 οnclick="location.href='http://www.01itcn.com'">

javaScrip 居顶部的浮动面版

<script language="javascript">
<!-- Begin
function setVariables() {
if (navigator.appName == "Netscape") {
	v=".top=";
	dS="document.";
	sD="";
	y="window.pageYOffset";
	}
	else {
	v=".pixelTop=";
	dS="";
	sD=".style";
	y="document.body.scrollTop";
	}
}
function checkLocation() {
object="object1";
yy=eval(y)+30;
eval(dS+object+sD+v+yy);
setTimeout("checkLocation()",10);
}
End -->
</script>

<body OnLoad="setVariables();checkLocation()">
<span id="object1" style="position:absolute; visibility:show; left:10px; top:0px">
<table width="80" border="0" cellpadding="3" cellspacing="3" bgcolor="#FFCC99">
	<tr>
		<td><a href="#" target="_self">首页</a></td>
	</tr>
	<tr>
		<td><a href="#" target="_self">新闻</a></td>
	</tr>
	<tr>
		<td><a href="#" target="_self">娱乐</a></td>
	</tr>
	<tr>
		<td><a href="#" target="_self">财经</a></td>
	</tr>
	<tr>
		<td><a href="#" target="_self">军事</a></td>
	</tr>
	<tr>
		<td><a href="#" target="_self">生活</a></td>
	</tr>
</table>
</span>

居底部的浮动面版

<script language="javascript">
<!-- Begin
function stat(){
var a = pageYOffset+window.innerHeight-document.bar.document.height-15
document.bar.top = a
setTimeout('stat()',2)
}
function fix(){
nome=navigator.appName
if(nome=='Netscape'){
	stat()
	}
	else{
	var a=document.body.scrollTop+document.body.clientHeight-document.all.bar.offsetHeight-30
	bar.style.top = a
	}
}
End-->
</script>

<body onLoad='fix()' onScroll="fix()" onResize="fix()">
<span id="bar" style="position:absolute; left:10px; top:0px" >
<table width="80" border="0" cellpadding="3" cellspacing="3" bgcolor="#FFCC99">
	<tr>
		<td><a href="#" target="_self">首页</a></td>
	</tr>
	<tr>
		<td><a href="#" target="_self">新闻</a></td>
	</tr>
	<tr>
		<td><a href="#" target="_self">娱乐</a></td>
	</tr>
	<tr>
		<td><a href="#" target="_self">财经</a></td>
	</tr>
	<tr>
		<td><a href="#" target="_self">军事</a></td>
	</tr>
	<tr>
		<td><a href="#" target="_self">生活</a></td>
	</tr>
</table>
</span>

JavaScript 事件简述

JavaScript 事件简述
	事件	浏览器支持	简述
一般事件	onClick	IE3、N2	鼠标点击时触发此事件
	onDblClick	IE4、N4	鼠标双击时触发此事件
	onMouseDown	IE4、N4	按下鼠标时触发此事件
	onMouseUp	IE4、N4	鼠标按下后松开鼠标时触发此事件
	onMouseOver	IE3、N2	当鼠标移动到某对象范围的上方时触发此事件
	onMouseMove	IE4、N4	鼠标移动时触发此事件
	onMouseOut	IE4、N3	当鼠标离开某对象范围时触发此事件
	onKeyPress	IE4、N4	当键盘上的某个键被按下并且释放时触发此事件
	onKeyDown	IE4、N4	当键盘上某个按键被按下时触发此事件
	onKeyUp	IE4、N4	当键盘上某个按键被按放开时触发此事件
页面相关事件	onAbort	IE4、N3	图片在下载时被用户中断
	onBeforeUnload	IE4、N	当前页面的内容将要被改变时触发此事件
	onError	IE4、N3	出现错误时触发此事件
	onLoad	IE3、N2	页面内容完成时触发此事件
	onMove	IE、N4	浏览器的窗口被移动时触发此事件
	onResize	IE4、N4	当浏览器的窗口大小被改变时触发此事件
	onScroll	IE4、N	浏览器的滚动条位置发生变化时触发此事件
	onStop	IE5、N	浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
	onUnload	IE3、N2	当前页面将被改变时触发此事件
表单相关事件	onBlur	IE3、N2	当前元素失去焦点时触发此事件
	onChange	IE3、N2	当前元素失去焦点并且元素的内容发生改变而触发此事件
	onFocus	IE3 、N2	当某个元素获得焦点时触发此事件
	onReset	IE4 、N3	当表单中Reset的属性被激发时触发此事件
	onSubmit	IE3 、N2	一个表单被递交时触发此事件
滚动字幕事件	onBounce	IE4、N	在Marquee内的内容移动至Marquee显示范围之外时触发此事件
	onFinish	IE4、N	当Marquee元素完成需要显示的内容后触发此事件
	onStart	IE4、N	当Marquee元素开始显示内容时触发此事件
编辑事件	onBeforeCopy	IE5、N	当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件
	onBeforeCut	IE5、N	当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
	onBeforeEditFocus	IE5、N	当前元素将要进入编辑状态
	onBeforePaste	IE5、N	内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
	onBeforeUpdate	IE5、N	当浏览者粘贴系统剪贴板中的内容时通知目标对象
	onContextMenu	IE5、N	当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
	onCopy	IE5、N	当页面当前的被选择内容被复制后触发此事件
	onCut	IE5、N	当页面当前的被选择内容被剪切时触发此事件
	onDrag	IE5、N	当某个对象被拖动时触发此事件 [活动事件]
	onDragDrop	IE、N4	一个外部对象被鼠标拖进当前窗口或者帧
	onDragEnd	IE5、N	当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
	onDragEnter	IE5、N	当对象被鼠标拖动的对象进入其容器范围内时触发此事件
	onDragLeave	IE5、N	当对象被鼠标拖动的对象离开其容器范围内时触发此事件
	onDragOver	IE5、N	当某被拖动的对象在另一对象容器范围内拖动时触发此事件
	onDragStart	IE4、N	当某对象将被拖动时触发此事件
	onDrop	IE5、N	在一个拖动过程中，释放鼠标键时触发此事件
	onLoseCapture	IE5、N	当元素失去鼠标移动所形成的选择焦点时触发此事件
	onPaste	IE5、N	当内容被粘贴时触发此事件
	onSelect	IE4、N	当文本内容被选择时的事件
	onSelectStart	IE4、N	当文本内容选择将开始发生时触发的事件
数据绑定	onAfterUpdate	IE4、N	当数据完成由数据源到对象的传送时触发此事件
	onCellChange	IE5、N	当数据来源发生变化时
	onDataAvailable	IE4、N	当数据接收完成时触发事件
	onDataSetChanged	IE4、N	数据在数据源发生变化时触发的事件
	onDataSetComplete	IE4、N	当来子数据源的全部有效数据读取完毕时触发此事件
	onErrorUpdate	IE4、N	当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
	onRowEnter	IE5、N	当前数据源的数据发生变化并且有新的有效数据时触发的事件
	onRowExit	IE5、N	当前数据源的数据将要发生变化时触发的事件
	onRowsDelete	IE5、N	当前数据记录将被删除时触发此事件
	onRowsInserted	IE5、N	当前数据源将要插入新数据记录时触发此事件
外部事件	onAfterPrint	IE5、N	当文档被打印后触发此事件
	onBeforePrint	IE5、N	当文档即将打印时触发此事件
	onFilterChange	IE4、N	当某个对象的滤镜效果发生变化时触发的事件
	onHelp	IE4、N	当浏览者按下F1或者浏览器的帮助选择时触发此事件
	onPropertyChange	IE5、N	当对象的属性之一发生变化时触发此事件
	onReadyStateChange	IE4、N	当对象的初始化属性值发生变化时触发此事件

Dreamweaver 事件简述

Dreamweaver 事件简述
事件	简述
onAbort	当访问者中断浏览器正在载入图像的操作时产生。
onAfterUpdate	当网页中bound(边界)数据元素已经完成源数据的更新时产生该事件。
onBeforeUpdate	当网页中bound(边界)数据元素已经改变并且就要和访问者失去交互时产生该事件。
onBlur	当指定元素不再被访问者交互时产生。
onBounce	当marquee(选取框)中的内容移动到该选取框边界时产生。
onChange	当访问者改变网页中的某个值时产生。
onClick	当访问者在指定的元素上单击时产生。
onDblClick	当访问者在指定的元素上双击时产生。
onError	当浏览器在网页或图像载入产生错位时产生。
onFinish	当marquee(选取框)中的内容完成一次循环时产生。
onFocus	当指定元素被访问者交互时产生。
onHelp	当访问者单击浏览器的Help(帮助)按钮或选择浏览器菜单中的Help(帮助)菜单项时产生。
onKeyDown	当按下任意键的同时产生。
onKeyPress	当按下和松开任意键时产生。此事件相当于把onKeyDown和onKeyUp这两事件合在一起。
onKeyUp	当按下的键松开时产生。
onLoad	当一图像或网页载入完成时产生。
onMouseDown	当访问者按下鼠标时产生。
onMouseMove	当访问者将鼠标在指定元素上移动时产生。
onMouseOut	当鼠标从指定元素上移开时产生。
onMouseOver	当鼠标第一次移动到指定元素时产生。
onMouseUp	当鼠标弹起时产生。
onMove	当窗体或框架移动时产生。
onReadyStateChange	当指定元素的状态改变时产生。
onReset	当表单内容被重新设置为缺省值时产生。
onResize	当访问者调整浏览器或框架大小时产生。
onRowEnter	当bound(边界)数据源的当前记录指针已经改变时产生。
onRowExit	当bound(边界)数据源的当前记录指针将要改变时产生。
onScroll	当访问者使用滚动条向上或向下滚动时产生。
onSelect	当访问者选择文本框中的文本时产生。
onStart	当Marquee(选取框)元素中的内容开始循环时产生。
onSubmit	当访问者提交表格时产生。
onUnload	当访问者离开网页时产生。

javaScrip 循环无间歇滚动

  <div id=demo style="OVERFLOW: hidden; WIDTH: 720px; HEIGHT: 125px">
  <table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
  <td id=demo1 vAlign=top>
  <table width="720" height="125" border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
  <tr>

  <!----- 滚动图片区域 开始----->
  <td>
  <a href="http://newgo.01itcn.com" target=_blank>
   <img src="../images/marquee2-01.jpg" width="180" height="125" border="0"></a>&nbsp;</td>
  <td>
  <a href="http://newgo.01itcn.com" target=_blank>
   <img src="../images/marquee2-02.jpg" width="180" height="125" border="0"></a>&nbsp;</td>
  <td>
  <a href="http://newgo.01itcn.com" target=_blank>
   <img src="../images/marquee2-03.jpg" width="180" height="125" border="0"></a>&nbsp;</td>
  <td>
  <a href="http://newgo.01itcn.com" target=_blank>
   <img src="../images/marquee2-04.jpg" width="180" height="125" border="0"></a>&nbsp;</td>
  <td>
  <a href="http://newgo.01itcn.com" target=_blank>
   <img src="../images/marquee2-05.jpg" width="180" height="125" border="0"></a>&nbsp;</td>
  <td>
  <a href="http://newgo.01itcn.com" target=_blank>
   <img src="../images/marquee2-06.jpg" width="180" height="125" border="0"></a>&nbsp;</td>
  <!----- 滚动图片区域 结束----->

  </tr>
  </table>
  </td>
  <td width="1" id=demo2></td>
  <SCRIPT> 
        var speed1=5
        demo2.innerHTML=demo1.innerHTML 
        function Marquee1(){ 
			if(demo2.offsetWidth-demo.scrollLeft<=0) 
			demo.scrollLeft-=demo1.offsetWidth 
			else{ 
				demo.scrollLeft++ 
			} 
        } 
        var MyMar1=setInterval(Marquee1,speed1) 
        demo.οnmοuseοver=function() {clearInterval(MyMar1)} 
        demo.οnmοuseοut=function() {MyMar1=setInterval(Marquee1,speed1)} 
  </SCRIPT>
  </tr>
  </table>
  </div>

效果演示

javaScrip Marquee滚动效果

图片无缝滚动代码属性：

innerHTML	设置或获取位于对象起始和结束标签内的 HTML
scrollHeight	获取对象的滚动高度。
scrollLeft	设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop	设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth	获取对象的滚动宽度
offsetHeight	获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft	获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop	获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth	获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

以下代码根据自己需要加以改动即可：

1、向上滚动代码：

  <base href="http://www.2ptown.com">
  <div id=demo style=overflow:hidden; height:100; width:90; background:#ffffff; color:#ffffff>
  <div id=demo1>
  <img src="1.gif">
  <img src="2.gif">
  <img src="3.gif">
  <img src="4.gif">
  <img src="5.gif">
	  ……
  </div>
  <div id=demo2></div>
  </div>
  <script>
	  var speed=30
	  demo2.innerHTML=demo1.innerHTML file://克隆demo1为demo2
	  function Marquee(){
	  if(demo2.offsetTop-demo.scrollTop<=0) file://当滚动至demo1与demo2交界时
	  demo.scrollTop-=demo1.offsetHeight file://demo跳到最顶端
	  else{
	  demo.scrollTop++
	  }
	  }
	  var MyMar=setInterval(Marquee,speed) file://设置定时器
	  demo.οnmοuseοver=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
	  demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
  </script>

2、向右滚动代码：

  <base href="http://www.2ptown.com">
  <div id=demo style=overflow:hidden; height:33; width:500; background:#ffffff;color:#ffffff>
  <table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
  <img src="1.gif">
  <img src="2.gif">
  <img src="3.gif">
  <img src="4.gif">
  <img src="5.gif">
	  ……
  </td><td id=demo2 valign=top></td></tr></table></div>

  <script>
	  var speed=30
	  demo2.innerHTML=demo1.innerHTML
	  demo.scrollLeft=demo.scrollWidth
	  function Marquee(){
	  if(demo.scrollLeft<=0)
	  demo.scrollLeft+=demo2.offsetWidth
	  else{
	  demo.scrollLeft--
	  }
	  }
	  var MyMar=setInterval(Marquee,speed)
	  demo.οnmοuseοver=function() {clearInterval(MyMar)}
	  demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
  </script>

鼠标放上去停止滚动

关键的二句代码是

	οnmοuseοver=this.stop()
	οnmοuseοut=this.start()

字的飞行鼠标放上去停止滚动代码

	<marquee οnmοuseοver=this.stop() οnmοuseοut=this.start()>你要加的内容</marquee>

插入超连接带图片滚动鼠标放上去停止滚动代码

<marquee behavior="scroll" direction="up" width="120" height="40"
	scrollamount="1" scrolldelay="38" οnmοuseοver="this.stop()"οnmοuseοut="this.start()">
	  <a target="cont" href="你的网址"><img src="图片地址" width="120" height="30" border="0"></a>
	  <a target="cont" href="你的网址"><img src="图片地址" width="120" height="30" border="0"></a>
	  <a target="cont" href="你的网址"><img src="图片地址" width="120" height="30" border="0"></a>
</marquee>

direction	滚动的方向,例:direction="up"
scrollamount	决定滚动的速度，数值越大滚动越快,例:scrollamount="1"
scrolldelay	延迟时间，数值越大跳跃越明显.例:scrolldelay="38"

制作javaScript声音按钮

一般而言，网页中按钮是没有声音触发事件的。如果要让按钮响应鼠标动作发出声音，我们可以写一段 javaScript脚本代码来实现。
能让按钮发出声音的脚本，不用制作flash按钮也可以实现了。

1、新建文件：DynamicAudioButton.js代码如下：

	//Customize Dynamic Audio Link 自定义动态声音链接
	function DynamicAudioLink(){
		open("http://www.pcedu.com.cn")
	}

	//Customize Dynamic Audio Mouse Over Color 自定义动态声音mouseover颜色
	function AudioOver() {
		document.Audio.button.style.background="#999999"
		document.Audio.button.style.color="white"
	}

	//Customize Dynamic Audio Mouse Down Color 自定义动态声音mousedown颜色
	function AudioDown() {
		document.Audio.button.style.color="#cccccc"
	}

	//Customize Dynamic Audio Mouse Off Color 自定义动态声音mouseOff 颜色
	function AudioOut() {
		document.Audio.button.style.background="#666666"
		document.Audio.button.style.color="#ffffff"
	}

	//Customize Dynamic Audio sound 自定义动态声音
	function playHome(){
		document.all.sound.src = "bleep.wav";
	}

	document.write('<bgsound id="sound">')
	//Customize Button Style 自定义按钮样式
	document.write('<style type="text/css">'+'<!--')
	document.write('.select{background:#666666;border-color:"#999999";color:"#ffffff";
	font-family:Arial,Helvetica,Verdana;font-size:10pt;font-weight:bold;}'+'-->'+'</style>')
	document.write('<center>
	<form name=Audio><input class="select" name=button type="button" value="Dynamic Audio" 
	οnclick="DynamicAudioLink()" onMouseOver="AudioOver();playHome()" 
	onMouseDown="AudioDown()" onMouseOut="AudioOut()"></form></center>')

2、保存文件后，在页面相关处插入代码引用该JS文件：

	<Script language="JavaScript" SRC="DynamicAudioButton.js"></script>

3、选择好音乐文件，可以是 wav、 mp3等，音乐文件尽量小些。

方法制作完成，用户可以使用图片等形式，当然也得修改DynamicAudioButton.js文件相应的代码。

javaScrip 常规数学运算示例

学习加、减、乘、除运算符的使用，同时初识函数的编写、 JS和 form表单的交互

表单：

	<form name="frmcalc" method="POST" οnsubmit="calc()"><p>
	<input type="text" name="t1" size="10" maxlength="10">
	<select size="1"name="d1">
		<option selected>+</option>
		<option>-</option>
		<option>×</option>
		<option>÷</option>
	</select>
	<input type="text" name="t2" size="10" maxlength="10"> = 
	<input type="submit" value="提交" name="B1"></p>
	</form>

JavaScript：

	<script language="javascript">
	<!--
	function calc()   {
		num1=(frmcalc.t1.value)*1; //*1确保为数值变量
		num2=(frmcalc.t2.value)*1;
		if (frmcalc.d1.selectedIndex==0) myresult=num1+num2;
		if (frmcalc.d1.selectedIndex==1) myresult=num1-num2;
		if (frmcalc.d1.selectedIndex==2) myresult=num1*num2;
		if (frmcalc.d1.selectedIndex==3) myresult=num1/num2;
		alert ("计算结果：" + myresult);
		}
	//-->
	</script>

演示：

表单的代码并不难理解，这里只需要注意 form的提交方式：指向我们定义的JS函数 calc()，它就是表单和 JS函数交互的关键。

calc()函数里，我们使用了三个变量：num1，num2是参与计算的变量，它们将是用户在第一个和第二个文本框里输入的数字，我们把它们都乘以1是为了确保变量是数值型的，不然会出现意外，比如1+1=11的结果是要出现的；myresult则是计算结果。函数中，我们用了if语句(如果语句)判断用户选择的运算符号，判断依据为下拉框被选中项的索引值(selectedIndex)，索引值为一个数组，从0开始，0对应于加(+)，1对应于减(-)，2对应于乘(*)，3对应于除(/)。函数的最后用上一节讲到的alert()方法把计算结果显示出来。

宣告一个函数，必须用到function，function之后是函数名，函数名后面有小角括号，括号里可有参数也可没有。函数的正文代码用大括号包含起来。

细心的朋友可能还发现，在函数calc()里，if语句用到了符号(==)，这是双等号，它用于比较，而等号则用来给变量赋值

javaScrip 控制文本框中输入字数

效果演示

1) script代码

	<script language="javascript">
	<!-- Begin
	maxLen = 15; // max number of characters allowed 
	function checkMaxInput(form) {
		if (form.message.value.length > maxLen) // if too long.... trim it!
		form.message.value = form.message.value.substring(0, maxLen);
		// otherwise, update 'characters left' counter
		else form.remLen.value = maxLen - form.message.value.length;
	}
	//  End -->
	</script>

1) HTML代码

	<form name="myform" action="">(最大可输入 15 个字符)<br>
	<textarea name="message" wrap="physical" cols="28" rows="4"
	 onKeyDown="checkMaxInput(this.form)" onKeyUp="checkMaxInput(this.form)"></textarea>
	<br>你还可以输入
	<input readonly type="text" name="remLen" size="3" maxlength="3" value="15"> 个字符</form>

javaScrip 立体感的文字链接

效果演示

首页

新闻

娱乐

军事

音乐

1) 定义CSS样式表如下:

	td{
		cursor:Default;
		font-size:12px;
	}
	.click{
		border-top:1px solid #0033CC;
		border-bottom:1px solid #DDEEFF;
		border-left:1px solid #0033CC;
		border-right:1px solid #DDEEFF;
		padding-top:5px;
		padding-bottom:3px;
		padding-left:5px;
		padding-right:3px;
	}
	.hover{
		border-top:1px solid #DDEEFF;
		border-bottom:1px solid #0033CC;
		border-left:1px solid #DDEEFF;
		border-right:1px solid #0033CC;
		padding:4px;
	}
	.normal{
		border:1px solid #FFFFFF;
		padding:4px;
	}

2) 导入buttons.js文件

	<script src="../common/buttons.js" language="javascript" type="text/javascript" />
	</script>

2) HTML代码

<table width="360" height="36" id="button">
<tr>
	<a href="#" target="_self"><td width="20%" align="center" class="click">首页</td></a>
	<a href="#" target="_self"><td width="20%" align="center" class="normal">新闻</td></a>
	<a href="#" target="_self"><td width="20%" align="center" class="normal">娱乐</td></a>
	<a href="#" target="_self"><td width="20%" align="center" class="normal">军事</td></a>
	<a href="#" target="_self"><td width="20%" align="center" class="normal">音乐</td></a>
</tr>
</table>

2) buttons.js文件源码

	function overbutton(){
		if(src=event.srcElement)
		if(src.className=="normal"){
			src.className='hover';
		}
	}
	function outbutton(){
		if(src=event.srcElement)
		if(src.className=="hover"){
			src.className='normal';
		}
	}
	function clickbutton(){
		if(src=event.srcElement)
		if(src.className=="hover"){
			var cells=document.all.button.rows[0].cells;
			for (i=0;i<cells.length ;i++ ){
				cells[i].className="normal";
			}
			src.className='click';
		}
	}

	document.οnmοuseοver=overbutton
	document.οnmοuseοut=outbutton
	document.οnclick=clickbutton

javaScrip 模仿微软按钮

演示

Back Home

javaScript

CSS2

HTML

javaWeb

在html文档中引入coolbutton.js文件

	<script language="javaScript" src="../common/coolbuttons.js"></script>
	<table width="600" height="32" class="coolBar">
	<tr>
		<td width="20%" align="center" class="coolButton">
		<font face="Verdana" size="2"><b>Back Home</b></font></td>
		<td width="20%" align="center" class="coolButton">
		<font face="Verdana" size="2"><b>javaScript</b></font></td>
		<td width="20%" align="center" class="coolButton">
		<font face="Verdana" size="2"><b>CSS2</b></font></td>
		<td width="20%" align="center" class="coolButton">
		<font face="Verdana" size="2"><b>HTML</b></font></td>
		<td width="20%" align="center" class="coolButton">
		<font face="Verdana" size="2"><b>javaWeb</b></font></td>
	</tr>
	</table>

coolbutton.js文件源码 File coolbutton.js Download